JS实现改变选中sheet字体颜色

目录:

1. 描述

目前多sheet切换，sheet标签的字体颜色大小均无法设置，当前选中的sheet标签显示不够明显。我们想要下面这种清晰看出来选中的sheet的效果的话，可以通过js进行设置。

2. 思路

给模板设置加载结束事件改变被选中sheet标签的颜色

3. 操作步骤

点击菜单模板>模板web属性>填报预览设置，选择“为该模板单独设置”，添加一个“加载结束”事件，如下图：

3.1 sheet标签显示位置在下方

编辑加载结束事件，添加下面的JS代码：

$('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red'); $('.fr-sheetbutton-container').bind('click', function() { $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red'); $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart').css('color', 'black'); });
js代码说明：
$('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart').css('color', 'red');   //改变选中的sheet标签字体颜色为红色
$('.fr-sheetbutton-container').bind('click', function() {}   //获取sheet切换点击事件
$('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart').css('color', 'black');  //将其他未选中的sheet标签字体颜色改为黑色
保存模板，点击填报预览即可查看效果，选中的sheet的字体会变为红色，如下图：

3.2 sheet标签显示位置在上方

$('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red'); $('.fr-sheetbutton-container').bind('click', function() { $('.fr-sheetbutton-container-active .fr-sheetbutton-middlepart-top').css('color', 'red'); $('.fr-sheetbutton-container:not(.fr-sheetbutton-container-active) .fr-sheetbutton-middlepart-top').css('color', 'black'); });

4. 预览效果

4.1 PC端预览效果

4.2 移动端预览效果

注：此JS不支持移动端使用

5. 已完成模板

模板效果在线查看请点击：JS实现改变选中sheet字体颜色 .cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\23-JS实现改变选中sheet字体颜色 .cpt
点击下载模板


附件列表


主题：
标签： 9.0验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）