|
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 代码如下：
- $('.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.1 PC 端
保存模板，点击填报预览，效果如下图所示。 ![]()
2.2.2 移动端注：不支持移动端。 3. 示例二：分页预览设置
3.1 添加加载结束事件1）仍以%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt为例 2）点击模板>模板 Web 属性>分页预览设置，添加加载结束事件： ![]()
根据个人需求添加工具栏按钮，如下图所示：
![]()
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.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
| 
