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

  • 文档创建者:gxy120313
  • 编辑次数:10次
  • 最近更新:用户36206671 于 2020-07-30
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

    利用 JS 获取该对象,然后改变它的 CSS 样式。


    2. 示例

    2.1 操作步骤

    给该控件增加初始化后事件,如下图:

    image.png

    代码如下:


    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);


    2.2 预览效果

    保存模板,选择填报预览,PC 端实现效果下图所示:

    222

    注:经测试,移动端不支持此 JS

    但是直接使用工具栏中的居中即可(PC 端不能居中)

    222


    3. 模板下载

    模板效果在线查看请点击:JS 控制单选组按钮上下左右居中显示.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\43-JS控制单选组按钮上下左右居中显示.cpt

    点击下载模板:43-JS控制单选组按钮上下左右居中显示.cpt


    附件列表


    主题: 数据准备