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

编辑
  • 文档创建者:yets11
  • 浏览次数:7366次
  • 编辑次数:16次
  • 最近更新:Carly 于 2019-07-24
  • 1. 概述

    1.1 问题描述

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

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


    1.2 解决思路

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

    2. 操作步骤

    2.1 制作模板

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

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


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

    修改统一样式比较简单,只需要在模板加载结束后事件里面写修改 CSS 的代码就行了。

    比如我们要初始化时显示灰色,打开菜单>模板>模板 Web 属性>填报页面设置,添加加载结束事件,如下图所示:


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

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

    2.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()');//清除背景图片 
    }

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

    3. 预览效果

    3.1 PC 端预览效果

     

    3.2 移动端预览效果

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

    4. 已完成模板

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

    点击下载模板:26-JS初始化按钮颜色,点击后变色.cpt


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

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