FineReport 自定义工具栏样式

2022-08-21 18:30:36 阅读：191 来源： 互联网

标签：工具栏自定义 widgetname FineReport 按钮 div css 调整

虽然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);

样式调整后的结果如下图：

标签：工具栏,自定义,widgetname,FineReport,按钮,div,css,调整
来源： https://www.cnblogs.com/weibw162/p/16610506.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

FineReport 自定义工具栏样式