FR的控件CSS样式

顶( )

最后更新日期：

有人发表评论 (点击查看)

问题描述
控件的CSS
示例

css样式编写
引用CSS
效果查看

CSS、修改控件样式、修改控件图标、控件风格

1. 问题描述

在实际项目中，为了让FineReport报表中的控件和页面中控件一致，可能需要修改一些控件的样式，如更换控件的图标或者改变填报表单控件的显示样式等，下面我们就来看下如何选择FR的控件，并有哪些样式可以修改。

2. 控件的CSS

class选择器	对应的样式	适用控件
.fr-texteditor	文本区域边框，字样(大小，颜色，字体等)	文本、文本域、下拉框、下拉复选框、树、日期
.fr-texteditor-focus	获取焦点后的文本框的边框、字样	文本、文本域、下拉框、下拉复选框、树、日期
.fr-group-span	字样	单选按钮组、复选框组控件
.fr-combo-list-item	下拉项的边框、字样	下拉框、下拉复选框
.fr-combo-selected	获得焦点的下拉项的字样，边框、背景色	下拉框、下拉复选框
.fr-checkbox-control	全选/反选的背景、字样、边框	下拉复选框
.fr-list-bwrap	列表控件的背景色	列表
.fr-list-bwrap li	字样	列表
.fr-list-node-over	鼠标移动上去的列表项背景色，字体颜色	列表
.fr-list-node-selected	被选中的列表项的背景色，字体颜色	列表
.fr-tree-body	树列表的样式(背景色、字体等)	树
.fr-tree-no-lines .fr-tree-elbow-plus	加号图标样式	树
.fr-tree-node-collapsed .fr-tree-node-icon	未展开的文件夹图标样式	树
.fr-tree-no-lines .fr-tree-elbow-minus	减号图标样式	树
.fr-tree-node-expanded .fr-tree-node-icon	已展开的文件夹图标样式	树
.fr-tree-node-leaf .fr-tree-node-icon	子节点图标样式	树
.fr-calendar thead .fr-date-top	标题行的背景颜色	日期
.fr-calendar thead .headrow	年月选择行的背景颜色
.fr-calendar thead .daynames	星期行的背景颜色
.fr-calendar tfoot .footrow	功能按钮行的背景颜色
.fr-calendar thead .hilite	置鼠标移动到日期头按钮上时的背景色，边框，字体颜色；
.fr-calendar thead .active	鼠标点击日期头按钮时的背景色
.fr-calendar tfoot .hilite	鼠标标移动到日期尾按钮上时的背景色，边框，字体颜色
.fr-calendar tbody td.active	鼠标点击日期主体按钮时的背景色
.fr-calendar tbody td.selected	当前选中天的背景色，字体颜色，大小，边框；
.fr-calendar tbody td.today	设置今天的字体颜色，大小，边框。

3. 示例

以%FR_HOME%/WEB-INF/reportlets/doc/Primary/Parameter_1.cpt模板为例，希望获取参数面板上文本框的焦点后的文本框的边框变为红色，字体颜色变为蓝色加粗，直接使用FineReport设计器是无法实现这个效果的，那么使用css样式该如何实现呢？

3.1 css样式编写

新建一个css文件，在上表中可以查找到获取焦点后的文本框的类选择器为.fr-texteditor-focus，故可在css文件中输入该类的样式，如下图：

保存该css文件为css.css，保存在%FR_HOME%/下面。

3.2 引用CSS

打开模板，点击模板>模板web属性，选择引用Css，点击选择按钮，选中刚刚新建的css文件，点击增加按钮，将该css增加到下方列表中，如下图所示：

3.3 效果查看

点击分页预览，鼠标选中参数面板的文本框，可以看到如下图所示效果：

注：修改css样式除了可引用外部css文件之外，还可以通过web页面事件来覆盖其样式，比如说，加载完成之后，希望文本框边框显示为绿色，即可打开模板，点击模板>模板web属性>分页预览设置，选择为该模板单独设置，添加一个加载结束事件，如下图：

其中，$(".fr-texteditor")是获取文本框类，然后修改其css。

文明发言，用心评论

		应用此篇文章，您: 不费力研究了一会琢磨了好久

查看全部条>>	<<只显示5条