1. 概述

实现tab标题手动设置统一宽度

1.1 问题描述

默认的tab标题会根据字数自动扩展，若想实现统一宽度除了补空格的方法外，现给另一种解决方案。

1.2 解决思路

使用修改html属性的方法添加初始化后事件。

2. 示例

2.1 报表设计

    1）添加初始化事件

    2）设置change参数（整型、双精度型都可以），并设置宽度值

    3）将以下代码复制粘贴

setTimeout (function () {
  var nums=((document.getElementsByClassName('ui-state-enabled fr-form-imgboard')).length)*1-2*1; //获取修改个数
  var left=[];                //存放修改前的 left 属性
  var width=[];               //存放修改前的 width 属性
  var new_left=[];            //存放新的 left 属性
  var more_width=[];          //存放多出的 width
  var temp=1;                 //记录 left 累加值
    for(var i=0;i<nums;i++){
    left[i]=($(".fr-widget-click").eq(i*1+3*1).parent().css('left')).replace(/[^0-9]+/ig,"");//给修改前left赋值，因为第一个不需要动所以从第二个开始
     width[i]=$(".fr-widget-click").eq(i*1+2*1).width();               //给修改前 width 赋值                   
       more_width[i] = change*1 - width[i]*1;  //计算每次增加的 width
       temp=(temp*1)+(more_width[i]*1);        //累加每次增加的width
    new_left[i]=(temp*1.0)+(left[i]*1.0) ;  //计算新的left
    $(".fr-widget-click").eq(i*1+3*1).parent().css("left",""+new_left[i]+"px");  //更改 left
     } 	
},100);
setTimeout (function () {
   $(".fr-widget-click").css("width",""+change+"px");                 // 更改 fr-widget-click 的 width     
   $(".ui-state-enabled.fr-form-imgboard").css("width",""+change+"px"); // 更改 ui-state-enabled fr-form-imgboard 的 width
},150);

2.2 效果预览

3. 模板下载

tab标题统一宽度.frm

4. 注意事项

   和大多数html修改样式一样，页面放大缩小后会失效，请酌情使用。