JS实现修改按钮样式

  • 文档创建者:Holly
  • 编辑次数:13次
  • 最近更新:Leo.Tsai 于 2020-04-29
  • 1. 概述

    1.1 应用场景

    实际应用中经常需要修改按钮的样式,除了通过修改 CSS 样式 来实现外,还可以通过定义 JavaScript 脚本来实现样式变化。

    下面列举几种通过 JavaScript 脚本改变按钮样式的示例,如下图所示:

    2020-04-29_14-47-34.gif

    1.2 实现思路

    通过给按钮添加 JS 点击事件,改变按钮的样式。

    2. 示例

    2.1 报表设计

    A1~A7 单元格都添加按钮控件,给 A7 单元格控件定义控件名:BUTTON,如下图所示:

    Snag_19528e8b.png

    2.2 添加事件

    给 A1~A6 单元格分别添加 JS 点击事件,如下图所示:

    JS 代码如下:

    1)A1 单元格

    $('.fr-btn-text').eq(6).css('color','red');//使得第7个按钮名称颜色变为红色

    2)A2 单元格

    $('#fr-btn-BUTTON').css('text-align','left');//使得第7个按钮名称居左显示

    3)A3 单元格

    $('.fr-btn-text').eq(6).css('font-size','20px'); $('.fr-btn-text').eq(6).css('height','25');
    //使得第7个按钮名称字体变为20px,按钮文本高度默认为16px,如果字体大小超过文本高度会显示不全,需要调整按钮文本高度

    4)A4 单元格

    $('.fr-btn-up').eq(6).css('color','green');
    $('.fr-btn-up').eq(6).css('border-radius','20px');//圆角边框

    5)A5 单元格

    $('.fr-btn-text').eq(6).css('font-style','italic');//使得第7个按钮名称字体倾斜

    6)A6 单元格

    $('.fr-btn-up').eq(6).css('height','20'); $('.fr-btn-up').eq(6).css('width','50');//使得第7个按钮背景变小

    Snag_1955c84a.png

    2.3 效果预览

    保存报表,点击填报预览,效果如下图所示:

    2020-04-29_14-47-34.gif

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS实现修改按钮样式.cpt

    点击下载模板:JS实现修改按钮样式.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!