CSS修改工具栏按钮颜色

1. 描述
2. 思路
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

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

2. 思路

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

3. 操作步骤

示例一：填报预览设置

1）打开一张填报模板，此处以%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt为例

2）点击模板>模板web属性>填报页面设置，添加加载结束事件：

$('.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-appendcolumn').css('color', 'red'); //改变增加记录字体颜色 $('.fr-btn-text.x-emb-deletecolumn').css('color', 'red'); //改变删除列行字体颜色

示例二：分页预览设置

1）仍以%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt为例

2）点击模板>模板web属性>分页预览设置，添加加载结束事件：

$('.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');//改变打印客户端字体颜色