FineReport 自定义工具栏样式
虽然FR界面的工具栏已经很商业化,很好看了,但是总会有那么些需求希望你可以修改工具栏的样式。
修改工具栏样式的主要思路是:
通过JQ选择器选中需要调整的元素,然后修改他们的样式
接下来,我们尝试着对工具栏做出一些样式的调整,以下代码需要在web属性的加载起始事件中书写。
// 调整工具栏的整体高度,并替换背景图片
$(".fs-tab-content-top-toolbar").css({
"height": "100px",
"background": "\#999 url('https://img6.bdstatic.com/img/image/pcindex/sunjunpchuazhoutu.JPG') scroll left top"
})
// 将首页按钮的文字颜色调整为红色
$("div[widgetname='First'] button").css("color", "red");
// 将上一页按钮的颜色调整为蓝色,字号调整为18px
$("div[widgetname='Previous'] button").css({
"color": "blue",
"font-size": "18px"
});
// 将输入框的边框粗细调整为2px,颜色调整为紫红色
$(".fs-tab-content-top-toolbar input").css({
"border": "2px solid #8A1874"
});
// 通过替换class,调整下一页的icon为图片icon
$("div[widgetname='Next'] button").removeClass("x-emb-next");
$("div[widgetname='Next'] button").addClass("x-emb-image");
// 在最后一页按钮下方动态增加一个带icon的按钮
$("div[widgetname='Last']").append('<div class="fr-btn-small fr-btn-icon-small-left"><em unselectable="on"><button unselectable="none" type="button" data-role="none" class="fr-btn-text x-emb-image">测试手动增加图片按钮</button></em></div>');
// 将打印按钮的文字清空
$("div[widgetname='NewPrint'] button").text("");
// 以下样式因为在页面加载时元素并未在DOM中存在,所以需要定时器
setInterval(function() {
// 将导出下拉框的背景色调整为墨绿色
$(".fr-ui-core-menu").eq(0).css({
"background": "\#779649"
})
// 将Excel导出的下拉框背景色调整为浅蓝色
$(".fr-ui-core-menu").eq(1).css({
"background": "#5AA4AE"
})
// 将原样导出按钮的字体颜色调整为淡黄色,字体加粗,字号调整为20px
$(".fr-ui-core-menu:eq(1) .menu-item:eq(1)").css({
"color": "\#B6A014",
"font-wright": "800",
"font-size": "20px"
})
}, 50);
样式调整后的结果如下图:
FineReport 自定义工具栏样式的更多相关文章
- 富文本编辑器UEditor自定义工具栏(三、自定义工具栏功能按钮图标及工具栏样式简单修改)
导读 富文本编辑器UEditor提供丰富了定制配置项,如果想设置个性化的工具栏按钮图标有无办法呢?答案是肯定的!前两篇博文简要介绍了通过将原工具栏隐藏,在自定义的外部按钮上,调用UEditor各命令实 ...
- 富文本编辑器UEditor自定义工具栏(一、基础配置与字体、背景色、行间距、超链接实现)
导读:UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,功能强大,可定制,是一款优秀的国产在线富文本编辑器,编辑器内可插入图片.音频.视频等. 一.UEditor自定义 ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
- finereport Web工具栏
1.获取报表工具栏按钮 在报表页面中,偶尔会有需要获取工具栏按钮的需求,之前只能通过contentPane.toolbar.options.items[index]来获取,比较不方便,现在我们提供了两 ...
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式
stl:searchOutput 自定义显示样式 自定义搜索提交表单需要在<stl:searchOutput>中嵌入显示搜索结果的标签,必须包含的标签 有<stl:pageConte ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示分割线.
一, 经历 1> 自定义plain 样式的 tableview,模拟器上不显示分割线,真机上却显示cell 下面的分割线. 2> 尝试使用表格的separatorStyle属性,尝试失败. ...
- Winform自定义窗体样式,实现标题栏可灵活自定义
最近在编写C/S结构应用程序时,感觉窗体的标题栏样式太死板了,标题文字不能更改大小.颜色.字体等,按钮不能隐藏等问题,在网上也查找了许多相关的资料,没有找到合适的解决方案,发现许多人也在寻求这个问题, ...
- WPF 自定义滚动条样式
先看一下效果: 先分析一下滚动条有哪儿几部分组成: 滚动条总共有五部分组成: 两端的箭头按钮,实际类型为RepeatButton Thumb 两端的空白,实际也是RepeatButton 最后就是Th ...
- Android设置选项开发及自定义Preference样式
一个完整的Android应用程序都应该提供选项(或者叫偏好设置等等)让用户对APP的表现形式能够进行设置,比如说是否加入用户体验计划,或者是否自动升级.定时提醒.开启自启动.后台运行等等.提供一个好的 ...
随机推荐
- SpringBoot+Shiro+LayUI权限管理系统项目-8.实现日志管理
1.说明 基于注解和AOP实现的日志管理.只讲解关键部分,详细看源码,文章下方捐赠或QQ联系捐赠获取. 2.功能展示 包括日志搜索.查看详情和批量删除. 3.业务模型 @Data @TableName ...
- 自古以来,JSON序列化就是兵家必争之地
上文讲到使用ioutil.ReadAll读取大的Response Body,出现读取Body超时的问题. 前人引路 Stackoverflow的morganbaz的看法是: 使用iotil.ReadA ...
- MASM32 - PlaySound的实现
MASM安装教程: https://blog.csdn.net/u010486308/article/details/105495848 代码参考: .model flat, stdcall opti ...
- SQL Server使用常见问题
普通分页查询 三种方式: Top Not IN 方式:查询靠前的数据较快 ROW_NUMBER() OVER()方式:查询靠后的数据速度比上一种较快,在老版本的SQL Server中最常使用 offs ...
- RN运行ios报错No matching function for call to 'RCTBridgeModuleNameForClass'
xcode更新12.5后,ios运行报错No matching function for call to 'RCTBridgeModuleNameForClass' 解决方法: 在ios/Podfil ...
- 关于“非法的前向引用(illegal forward reference)”的探究
1.问题: 有如下代码: public class Test { static { i = 0;// 给变量赋值可以正常编译通过 System.out.print(i);// 编译器会提示" ...
- jquery实现轮播图切换
这个是我模仿网易云的音乐界面写的轮播图,主要实现的功能有 1.每隔4秒图片和对应的背景颜色一起切换 2.点击翻页会跳转到相对应的图片以及背景上 3.点击左右翻页,实现顺序切换 <1>HTM ...
- 【Azure 事件中心】Event Hub 消费端出现 Timeout Exception,errorContext中 LINK_CREDIT为0的解释
问题描述 在使用Event Hub SDK消费数据过程中,出现大量的Timeout Exception,详细消息为: com.microsoft.azure.eventhubs.TimeoutExce ...
- 【Azure 应用服务】Azure App Service 在不配置自定义域名的情况下如何使用呢?
问题描述 根据中国法律法规的规定及相关监管机构的要求,当使用应用服务创建应用时,须立即绑定一个已经完成ICP备案的自定义域名并通过该自定义域名访问该应用服务.任何通过Internet对应用服务默认域名 ...
- FolkMQ 作个简单的消息中间件(最简单的那种), v1.3.1 发布
功能简介 角色 功能 生产端(或发起端) 发布消息.定时消息(或叫延时).顺序消息.可过期消息.事务消息.发送消息(rpc)支持 Qos0.Qos1 消费端(或接收端) 订阅.取消订阅.消费-ACK( ...