-
-
yangm 数据达人Lv4
发表于2021-8-5 17:52
楼主
由于tab页组件对样式等有诸多限制，为了实现更加美观更加自由的tab页效果。我们通过按钮传参控制内容显示隐藏达到此需求。同时加入自动切换脚本，达到自动轮播的效果。
一、通过按钮控制容器内容显示隐藏。
（1）拖入按钮设置按钮分组。
分组设置：两个按钮设置相同分组，可以达到互斥的效果。即点击其中一个按钮，另一个按钮自动失效。如图：分组均为‘1’。
（2）设置按钮钻取。
钻取设置：设置热区式钻取，分别给两个按传参。如图：按钮1参数名为@cs值为1，按钮2参数名为@cs1值为2。
（3）配置需要联动的内容显示隐藏。
显示表达式：1代表显示，2代表可预览，4代表可打印，8代表可导出。如果一个组件计算后希望不显示，但可打印可预览也可导出，那么输入需要的相关功能对应的值的和即可，这里输入14（2+4+8=14）。固给需要联动显示隐藏的内容添加if判断，如图：内容1显示表达式：<#=if(@cs=2,0,1)#>，内容2显示表达式：<#=if(@cs=1,0,1)#>。
二、添加自动轮播脚本。
（1）设置需要联动的内容id。为需要联动内容代号。
（2）设置按钮id。
F12调出控制台，鼠标选取按钮定位。如图为按钮ID。
（3）设置按钮选中颜色。
此处只需要写16进制色值即可。
（4）设置轮播时间。
单位毫秒。
完整脚本如下：
复制代码
一、通过按钮控制容器内容显示隐藏。
（1）拖入按钮设置按钮分组。
分组设置：两个按钮设置相同分组，可以达到互斥的效果。即点击其中一个按钮，另一个按钮自动失效。如图：分组均为‘1’。
（2）设置按钮钻取。
钻取设置：设置热区式钻取，分别给两个按传参。如图：按钮1参数名为@cs值为1，按钮2参数名为@cs1值为2。
（3）配置需要联动的内容显示隐藏。
显示表达式：1代表显示，2代表可预览，4代表可打印，8代表可导出。如果一个组件计算后希望不显示，但可打印可预览也可导出，那么输入需要的相关功能对应的值的和即可，这里输入14（2+4+8=14）。固给需要联动显示隐藏的内容添加if判断，如图：内容1显示表达式：<#=if(@cs=2,0,1)#>，内容2显示表达式：<#=if(@cs=1,0,1)#>。
二、添加自动轮播脚本。
（1）设置需要联动的内容id。为需要联动内容代号。
（2）设置按钮id。
F12调出控制台，鼠标选取按钮定位。如图为按钮ID。
（3）设置按钮选中颜色。
此处只需要写16进制色值即可。
（4）设置轮播时间。
单位毫秒。
完整脚本如下：
- //统计图id
- var chart1="HHH3";
- var chart2="HHH2";
- //按钮F12 ID
- var btn1="WidgetParamButton41";
- var btn2 = "WidgetParamButton54";
- //选中颜色
- var chosenColor ="#00FFFF";
- //未选中颜色
- var unChoenColor = "#f0f0f0";
- setInterval(function(){
- if(document.getElementById(chart1).style.display == "block"){
- document.getElementById(btn1).style["background-color"]=chosenColor;
- document.getElementById(btn2).style["background-color"]=unChoenColor;
- document.getElementById(chart1).style.display="none";
- document.getElementById(chart2).style.display="block";
- }else {
- document.getElementById(btn2).style["background-color"]=chosenColor;
- document.getElementById(btn1).style["background-color"]=unChoenColor;
- document.getElementById(chart2).style.display="none";
- document.getElementById(chart1).style.display="block";
- }
- },5000);
