虽然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"); $("div[widgetname='Previous'] button").css({ "color": "blue", "font-size": "18px" }); $(".fs-tab-content-top-toolbar input").css({ "border": "2px solid #8A1874" }); $("div[widgetname='Next'] button").removeClass("x-emb-next"); $("div[widgetname='Next'] button").addClass("x-emb-image"); $("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(""); setInterval(function() { $(".fr-ui-core-menu").eq(0).css({ "background": "\#779649" }) $(".fr-ui-core-menu").eq(1).css({ "background": "#5AA4AE" }) $(".fr-ui-core-menu:eq(1) .menu-item:eq(1)").css({ "color": "\#B6A014", "font-wright": "800", "font-size": "20px" }) }, 50);
样式调整后的结果如下图:
|