CSS 修改工具栏按钮颜色

我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 描述1.1 问题描述

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


1.2 思路

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

2. 示例一:填报预览设置
2.1 添加加载结束事件

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

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


JS 代码如下:

  1. $('.fr-btn-text.x-emb-submit').css('color', 'red'); //改变提交字体颜色
  2. $('.fr-btn-text.x-emb-export').css('color', 'red'); //改变输出字体颜色
  3. $('.fr-btn-text.x-emb-verify').css('color', 'red'); //改变数据校验字体颜色
  4. $('.fr-btn-text.x-emb-flashprint').css('color', 'red'); //改变打印客户端字体颜色
  5. $('.fr-btn-text.x-emb-print').css('color', 'red'); //改变打印字体颜色
  6. $('.fr-btn-text.x-emb-email').css('color', 'red'); //改变邮件字体颜色
  7. $('.fr-btn-text.x-emb-appendrow').css('color','red'); //改变增加记录字体颜色
  8. $('.fr-btn-text.x-emb-deleterow').css('color', 'red'); //改变删除列行字体颜色
复制代码
2.2 预览效果
2.2.1 PC 端

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


2.2.2 移动端

注:不支持移动端。

3. 示例二:分页预览设置
3.1 添加加载结束事件

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

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


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

JS 代码如下:

  1. $('.fr-btn-text.x-emb-previous').css('color','red');//改变上一页字体颜色
  2. $('.fr-btn-text.x-emb-first').css('color','red');//首页
  3. $('.fr-btn-text.x-emb-next').css('color','red');//下一页
  4. $('.fr-btn-text.x-emb-last').css('color','red');//末页
  5. $('.fr-btn-text.x-emb-excel').css('color','red');   //导出excel
  6. $('.fr-btn-text.x-emb-export').css('color','red');//改变输出字体颜色
  7. $('.fr-btn-text.x-emb-print').css('color','red');//改变打印字体颜色  
  8. $('.fr-btn-text.x-emb-email').css('color','red');//改变邮件字体颜色
  9. $('.fr-btn-text.x-emb-flashprint').css('color','red');//改变打印客户端字体颜色
复制代码
3.2 预览效果
3.2.1 PC 端

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


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


编辑于 2020-11-20 13:50  

编辑于 2020-11-20 13:51  

编辑于 2020-11-20 13:52  

编辑于 2020-11-20 13:52  

发表于 2023-5-12 12:00:14
厉害了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1回帖数 3关注人数 6547浏览人数
最后回复于:2023-5-12 12:00

返回顶部 返回列表