帆软css修改按钮立体,FineReport 控件的 CSS 样式

设置控件的 CSS 样式可以在「模板 Web 属性」中引用 CSS 实现，也可以在「模板 Web 属性」中添加事件实现，据此给出如下两个示例。

3.1 修改文本框边框颜色和字体

希望参数面板上文本框控件的边框变为红色，字体颜色变为蓝色。如下图所示：

3.1.1 准备模板

1)新建模板，添加一个模板参数 p1。

2)将参数添加到参数面板中，并设置为文本框控件，参数默认值是地区。

最终模板如下图所示：

3.1.2 准备 CSS 文件

新建一个 CSS 文件test.css，保存在%FR_HOME%webroot目录下。

CSS 文件内容为：.fr-texteditor{ border:1px solid red; color:blue; font-weight:bold;}

其中 .fr-texteditor 是文本框类选择器，代码修改文本框的边框为红色，字体为蓝色加粗。

3.1.3 引用 CSS 文件

打开模板，点击「模板>模板 Web 属性」，选择「引用 CSS」，点击选择按钮，添加刚刚新建的 CSS 文件。如下图所示：

3.1.4 预览效果

保存模板，点击「分页预览」，效果如 3.1 节开头所示。

3.2 设置控件不可用不置灰

参数面板中控件，设置为「不可用」时，希望显示效果不置灰，和设置为「可用」时效果一致。如下图所示：

注：控件选择不可用后，预览不透明度降低，显示灰色

。

3.2.1 准备模板

1)新建模板，添加一个模板参数 p1。

2)将参数添加到参数面板中，并设置为下拉框控件。

3)在 A1 单元格中也添加填报下拉框控件。

最终模板如下图所示：

3.2.2 添加 WEB 页面事件

点击「模板>模板 Web 属性>填报页面设置」，选择「为该模板单独设置」，勾选「直接显示控件」，添加一个「加载结束」事件，如下图所示：

JavaScript 代码如下：setTimeout(function() {$(".ui-state-disabled").css({'opacity':'1'});}, 100)

代码重置控件的不透明度为 1，其中opacity: value|inherit值描述

value规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。

inherit应该从父元素继承 opacity 属性的值。

3.2.3 预览效果

保存模板，点击「分页预览」。效果如 3.2 节开头所示。

3.3 设置日期控件展开框字体样式

希望参数面板上日期控件的字体由默认字体变为华文楷体。如下图所示：

3.3.1 准备模板

1)新建模板，添加一个模版参数 p1。

2)将参数添加到参数面板中，并设置为日期控件。

最终模板如下图所示：

3.3.2 添加初始化后事件

点击「日期控件」，在「控件设置>事件」处，为其添加一个「初始化后」事件，如下图所示：

JavaScript 代码如下：setInterval(function(){$(".fr-datepicker").css("font-family", "华文楷体");},500)

3.3.3 预览效果

保存模板，点击「分页预览」，效果如 3.3 节开头所示。

帆软css修改按钮立体,FineReport 控件的 CSS 样式相关推荐

Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
五、QPushButton按钮和QLineEdit控件操作
在第四节基础上,下面来进行QPushButton按钮和QLineEdit控件操作. 1.在主界面添加三个QLineEdit编辑框(其控件对象依次为lineEditNum1.lineEditNum2.l ...
菜单向上拉html,模拟select控件，CSS上拉菜单
模拟select控件,CSS下拉菜单模拟select控件 html,body{height:100%;overflow:hidden;} body,div,form,h2,ul,li{margin: ...
Android如何设置按钮图片（控件图片）大小自适应
Android如何设置按钮图片(控件图片)大小自适应在你的button中放入图片:drawble属性,你可以选择它的位置上下左右, 如何让图片自适应? 把图片放入res-drawable-mipma ...
修改安卓默认的系统button样式,以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...
php万圣节源码,如何使用纯CSS实现万圣节的toggle控件（附源码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现万圣节的toggle控件(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码地址 https://github ...
DevExpress自学笔记—整体修改窗体及控件的皮肤样式1
[时间] 2016-02-15 11:41:11 天气晴没有雾霾难得的好天气!!! [工具] (1)Visual Studio 2015 (2)DevExpress15.2.3 [感言] 一直以来都 ...
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加、删除和修改
Element Tree 树形控件自定义显示样式与hover事件绑定实现添加.删除和修改最近在搞erp项目对应后台的管理功能,为了加速开发使用了 vue-element-admin 开发,使用的是e ...
一个类似抖音 APP 拍摄按钮效果的控件
TouchButton 一个类似抖音 APP 拍摄按钮效果的控件效果图预览用法 <net.angrycode.library.TouchButtonandroid:id="@+id ...

帆软css修改按钮立体,FineReport 控件的 CSS 样式

帆软css修改按钮立体,FineReport 控件的 CSS 样式相关推荐

最新文章

热门文章