JS初始化按钮颜色,点击后变色

编辑
文档创建者:yets11 (67190 )     浏览次数:2196次     编辑次数:6次     最近更新:jiangsr 于 2017-12-26     

目录:

1. 概述编辑

我们知道,利用控件CSS按钮CSS可以修改整个模板中某种控件的CSS样式,即使这里面没有你需要的,现在基本所有新的浏览器都有调试功能,按F12,找到控件相应的CSS代码,再用JS修改下就行了。

但是在有些需求下,模板中出现多个按钮,而我们需要的并不是仅仅统一修改样式,需要的是在初始化后统一出现一种样式,而点击后出现另一种样式,再次点击后又恢复成原来的样式,这样我们以前所使用的修改CSS样式的方法就不再适用,比如想实现下图中的效果,用统一修改就没办法实现了,那么,如何实现呢?

222

2. 实现方法编辑

2.1 制作模板

添加内置数据集,如下图所示:
222
把内置数据集第1列拖动到A1单元格,B1单元格为按钮控件,模板设计如下图所示:
222


2.2 按钮初始化后的统一样式

修改统一样式比较简单,只需要在模板加载结束后事件里面写修改CSS的代码就行了,比如我们要初始化时显示灰色,打开菜单>模板>模板web属性>填报页面设置,添加加载结束事件,如图所示:
222

加载结束事件的js代码如下:

$('.fr-btn-up#fr-btn-').each(function(){ if($(this).closest('td').attr('col')=='1') { $(this).css('background-color','gray'); } })

2.3 点击后修改单个按钮的样式

按钮文字为失效时,再点击变成生效,并且背景色变成红色。右击B1单元格,弹出控件设置对话框,添加点击事件,如下图所示:
222

代码如下:

if(this.getValue()=='失效'){ this.setValue('生效'); this.$btn.closest('#fr-btn-').css('background-color','red');//换背景色 this.$btn.closest('#fr-btn-').css('background-image','url()');//换背景图片,自己填写url地址 } else { this.setValue('失效'); this.$btn.closest('#fr-btn-').css('background-color','gray');//背景色为灰色 this.$btn.closest('#fr-btn-').css('background-image','url()');//清除背景图片 }

已完成模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\按钮点击修改颜色.cpt。

利用此方法同样可以实现其他控件单独变色,并且代码中提供了更换背景图片的功能,只需要填上图片地址就行了。

附件列表


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

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: