JS修改按钮样式

编辑
  • 文档创建者:Holly
  • 浏览次数:13915次
  • 编辑次数:9次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

    很多客户对于按钮样式修改有着较大的需求,除了通过修改 CSS 样式 来实现外,还可以通过定义 JavaScript 脚本 来实现样式变化。

    下面列举几种通过 JavaScript 脚本实现示例,如下图:

    222


    2. 示例

    首先在报表中给 A1~A7 单元格添加按钮控件, 然后分别给 A1~A6 单元格控件添加点击 JavaScript 事件,最后在 A7 单元格(控件)展示其对应的效果。如下图:

    注:给 A7 单元格控件定义控件名:BUTTON

    222

    222
    注:按钮在页面中的排布顺序为从上到下,从左到右。

    给 A1 单元格控件添加点击事件。
    222

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

    注:修改指定按钮用的是 jQuery 的 eq(index) 选择器,index 的值是从 0 开始的,所以 eq(6) 获取到的是页面中第 7 个按钮。

    同理:给 A2~A6 控件设置点击事件。

    A2 单元格控件 JavaScript 脚本:

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

    A3 单元格控件 JavaScript 脚本:

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

    A4 单元格控件 JavaScript 脚本:

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

    A5 单元格控件 JavaScript 脚本:

    $('.fr-btn-up').eq(6).css('background','#8AC007');//按钮背景色 $('.fr-btn-up').eq(6).css('border-radius','20px');//使得第7个按钮背景变为绿色圆角
    A6 单元格控件 JavaScript 脚本:
    $('.fr-btn-up').eq(6).css('height','20'); $('.fr-btn-up').eq(6).css('width','50'); //使得第7个按钮背景变小


    2.1 保存与预览

    保存报表,以填报模式预览,效果如上图。


    2.2 移动端效果

    移动端 H5 解析,如图:
    222

    注:移动端 App 不支持。



    附件列表


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

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

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