修改报表组页签颜色

需求背景

在大数据的的报表组中运行中有可能出现比较慢的可能会出现下面的现象

两个页签都是红色 这样的情况下用户有时候无法确认是那个报表是当前报表。

解决方案

自定义页签样式 修改我们的页签样式。

操作步骤

1． 跟踪jsp 源代码 找到我们的原先设置的css样式脚本。

<style>

#rq_tabs { background:#F4F7FB;font-size:13px;font-family:宋体;line-height:normal;border-bottom:1px solid #BCD2E6; }

#rq_tabs label { margin:0;padding:0; }

#rq_tabs a { float:left;background:url(“http://127.0.0.1:6001/demo/images/rq_tableft1.gif”) no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}

#rq_tabs a span { float:left;background:url(“http://127.0.0.1:6001/demo/images/rq_tabright1.gif”) no-repeat right top;padding:5px 15px 4px 6px;color:#627EB7; }

#rq_tabs a:hover { background-position:0% -42px; }

#rq_tabs a:hover span { background-position:100% -42px; color:red; }

#rq_tabs label.rq_curr a { background-position:0% -42px; }

#rq_tabs label.rq_curr a span { background-position:100% -42px; color:red; }

</style>

2. 在展示报表组的jsp中重载脚本

<style type=”text/css”>
#rq_tabs a:hover span { background-position:100% -42px; color:red; }

#rq_tabs label.rq_curr a { background-position:0% -42px; }

#rq_tabs label.rq_curr a span { background-position:100% -42px; color:green; }

</style>

其改后的效果图为:

总结：类似这类的脚本修改 我们可以通过重写脚本来覆盖掉集成的样式。同理我们的内置js也可以用这种方法来自定义。

关键字: 报表组 页签 Css 脚本