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

编辑
文档创建者:cherishdqy (66470 )     浏览次数:2014次     编辑次数:15次     最近更新:ukae 于 2018-08-10     

目录:

1. 描述编辑

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

222

2. 思路编辑

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

3. 操作步骤编辑

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

3.1 sheet标签显示位置在下方

222

编辑加载结束事件,添加下面的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标签显示位置在上方

222

JS代码修改为:

$('.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端预览效果

222

4.2 移动端预览效果

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

5. 已完成模板编辑

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



附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗?只是浏览 [ 去社区提问 ]