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

1. 描述
2. 思路
3. 操作步骤
4. 预览效果
5. 已完成模板

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端预览效果

4.2 移动端预览效果

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

5. 已完成模板

模板效果在线查看请点击：JS初始化按钮颜色，点击后变色.cpt

已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\填报预览JS实例\26-JS初始化按钮颜色，点击后变色.cpt

点击下载模板

主题：

标签： 9.0验证