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

编辑
文档创建者:yets11 (67190 )     浏览次数:4090次     编辑次数:10次     最近更新:jiangsr 于 2018-05-31     

目录:

1. 描述编辑

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

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

222

2. 思路 编辑

给按钮添加点击事件修改控件颜色

3. 操作步骤编辑

3.1 制作模板

添加内置数据集,如下图所示:

222

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

222

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

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

222

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

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

3.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

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

4. 预览效果编辑

4.1 PC端预览效果
222

4.2 移动端预览效果

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

5. 已完成模板编辑

模板效果在线查看请点击:JS初始化按钮颜色,点击后变色.cpt
已完成的模板,可参见:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\26-JS初始化按钮颜色,点击后变色.cpt



附件列表


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

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

此页面有帮助吗?