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

编辑
  • 文档创建者:yets11
  • 浏览次数:6706次
  • 编辑次数:11次
  • 最近更新:ukae 于 2018-08-10
  • 1. 描述

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

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


    2. 思路

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

    3. 操作步骤

    3.1 制作模板

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

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


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

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


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

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

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

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


    代码如下:

    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%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\26-JS初始化按钮颜色,点击后变色.cpt



    附件列表


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

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

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