JS控制单选组按钮上下左右居中显示

目录:

1、描述

在项目中有时会用到单选按钮组控件,有时候单元格很大,按钮就不居中,为了美观,这时候就需要用到这个js了

222


2、解决方案

利用在js中获取控件,使用css控制单选按钮组的显示位置。
给单元格按钮添加初始化事件,js代码解析如下:
var el = $(this.element);//获取当前元素
var f = function() {//自定义函数为f的函数
var w = 0; //初始化变量W=0
var cs = el.children();//获取当前元素的节点
if (cs.length == 0) {//如果无节点
  setTimeout(f, 100);//延迟100s后调用f
  return;//返回
}
for (var i=0; i<cs.length; i++) {//遍历节点的,每个节点增加5px宽度
  w += cs.eq(i).width() + 5;
}
el.css({//CSS:宽度为:W,同时div居中显示
  width: w,
  'margin-left': 'auto',//左边距自适应
  'margin-right': 'auto',//右边距自适应
  'height':' auto', //高度自适应
});
}
setTimeout(f, 100);

3、示例

3.1  给单选按钮组添加初始化事件


222

3.2  添加js

var el = $(this.element); var f = function() { var w = 0; var cs = el.children(); if (cs.length == 0) { setTimeout(f, 100); return; } for (var i=0; i<cs.length; i++) { w += cs.eq(i).width() + 5; } el.css({ width: w, 'margin-left': 'auto', 'margin-right': 'auto', 'height':' auto', }); } setTimeout(f, 100);

3.3 效果

单选按钮组居中显示,如下图:



附件列表


主题: 二次开发

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(微信ID:frbiaoge)