CSS 修改工具栏按钮颜色

编辑
  • 文档创建者:gxy120313
  • 浏览次数:6198次
  • 编辑次数:14次
  • 最近更新:Carly 于 2019-09-17
  • 1. 描述

    1.1 问题描述

    在项目开发的时候,有时会遇到需要更改工具栏按钮的颜色,这时候就可以使用 CSS 达到如下效果:

    222

    1.2 思路

    给模板添加加载结束事件,通过 class 获取相应的按钮,使用 css() 修改按钮的字体颜色。

    2. 示例一:填报预览设置

    2.1 添加加载结束事件

    1)打开一张填报模板,此处%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt为例

    2)点击模板>模板 Web 属性>填报页面设置,添加加载结束事件

    222
    JS 代码如下:

    $('.fr-btn-text.x-emb-submit').css('color', 'red'); //改变提交字体颜色
    $('.fr-btn-text.x-emb-export').css('color', 'red'); //改变输出字体颜色
    $('.fr-btn-text.x-emb-verify').css('color', 'red'); //改变数据校验字体颜色
    $('.fr-btn-text.x-emb-flashprint').css('color', 'red'); //改变打印客户端字体颜色
    $('.fr-btn-text.x-emb-print').css('color', 'red'); //改变打印字体颜色
    $('.fr-btn-text.x-emb-email').css('color', 'red'); //改变邮件字体颜色
    $('.fr-btn-text.x-emb-appendrow').css('color','red'); //改变增加记录字体颜色
    $('.fr-btn-text.x-emb-deleterow').css('color', 'red'); //改变删除列行字体颜色

    2.2 预览效果

    2.2.1 PC 端

    保存模板,点击填报预览,效果如下图所示。

    222

    2.2.2 移动端

    注:不支持移动端。

    3. 示例二:分页预览设置

    3.1 添加加载结束事件

    1)仍以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt为例

    2)点击模板>模板 Web 属性>分页预览设置,添加加载结束事件

    222

    根据个人需求添加工具栏按钮,如下图所示:
    222

    JS 代码如下:

    $('.fr-btn-text.x-emb-previous').css('color','red');//改变上一页字体颜色
    $('.fr-btn-text.x-emb-first').css('color','red');//首页
    $('.fr-btn-text.x-emb-next').css('color','red');//下一页
    $('.fr-btn-text.x-emb-last').css('color','red');//末页
    $('.fr-btn-text.x-emb-excel').css('color','red');   //导出excel
    $('.fr-btn-text.x-emb-export').css('color','red');//改变输出字体颜色
    $('.fr-btn-text.x-emb-print').css('color','red');//改变打印字体颜色  
    $('.fr-btn-text.x-emb-email').css('color','red');//改变邮件字体颜色
    $('.fr-btn-text.x-emb-flashprint').css('color','red');//改变打印客户端字体颜色

    3.2 预览效果

    3.2.1 PC 端

    保存模板,点击分页预览,效果如下图所示。

    222

    3.2.2 移动端

    注:不支持移动端。

    4. 已完成模板

    4.1 示例一

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\02-CSS修改工具栏按钮颜色示例一.cpt

    点击下载模板:02-CSS修改工具栏按钮颜色示例一.cpt

    4.2 示例二

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\02-CSS修改工具栏按钮颜色示例二.cpt

    点击下载模板:02-CSS修改工具栏按钮颜色示例二.cpt

    附件列表


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

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

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