1. 概述
1.1 预期效果
场景描述：实际场景中我们有时候需要实现tab切换的效果，点击上面的tab块来切换数据查询结果。
预期效果图
1.2 实现思路
通过label标签画出一个一个tab块；
通过js实现点击label对于某个文本框赋值（隐藏不可见）；
赋值变化后进行查询。
2. 示例
2.1 模板设计
新建数据集：（为了便于演示，这里仅仅使用FRDemo，做简单示意）：
select
case
when '${wbk}'= '0' then "第一个"
when '${wbk}' = '1' then "第二个"
when '${wbk}' = '2' then "第三个"
when '${wbk}' = '3' then "第四个"
when '${wbk}' = '4' then "第五个"
when '${wbk}' = '5' then "第六个"
else null end as 结果在参数面板拖入label控件，分别命名label0~lable5，控件值分别写入1~6
拖入文本框控件，默认不可见，命名wbk，控件值写入1
给参数面板初始化加入这段js：
timer = setInterval(function() {
if ($("[widgetname^='LABEL']")) {
clearInterval(timer);
} //1.替代延迟加载setTimeout()方法，用定时器的方式来实现，当label元素出现则清除定时器，否则每隔15ms执行代码
$("[widgetname^='LABEL']").css({
"border": "1px solid #e8ebf1"
})//2.给LABEL0~LABEL5加边框
$("[widgetname^='LABEL']:first").css({
"borderRadius": "4px 0 0 4px"
})//3.给LABEL0(第一个label)加左边圆角
$("[widgetname^='LABEL']:last").css({
"borderRadius": "0 4px 4px 0"
})//4.给LABEL5(最后一个label)加右边圆角
$("[widgetname^='LABEL']").find("td .fr-label").css({
"color": "#555555",
})//5.给LABEL0~LABEL5设置字色，直接在注释第2步中加color是不行的
var num = "";
$("[widgetname^='LABEL']").click(function() {
$(this).css({
border: "1px solid #1890ff",
backgroundColor: "#1890ff"
}).siblings().css({
border: "1px solid #e8ebf1",
backgroundColor: "transparent"
})//6.给点击的LABEL加边框和背景样式，其他兄弟LABEL加另外一种边框和背景样式
num = $(this).attr("widgetname").replace("LABEL", "");
$("[widgetname^='LABEL'] td .fr-label").css({
"color": "#555555"
});//7.给所有LABEL字色设置样式
$("[widgetname^='LABEL'] td .fr-label").eq(num).css({
"color": "white"
});//8.给点击了的LABEL设置另一个字体颜色;不用$("this").sibings()方式
var a = _g().parameterEl.getWidgetByName("wbk").getValue(); //获取文本框的
var b = _g().parameterEl.getWidgetByName("wbk").setValue(num);//给文本框赋值
if (b !== a) {
_g().parameterCommit();
}//如果文本框的值和上次不同，则进行查询操作
})
}, 15)设计器主体内容简单设计下如下图所示：
2.2 效果预览
