报表组Tab标签样式设计
报表设计器的报表组设计是将有关联关系或可进行比较的多个独立的报表集成于一个报表组中，这样就很容易对类似或有关联的报表发布到同一页面通过切换sheet标签页来进行对照参看。报表的报表组设计类似于Excel的sheet标签页的形式。针对这一功能，不同的客户有不同的需求，比如报表组标签页的样式的要求不同。
报表提供的tab标签页样式，当前页与其他页的区别方式是：当前页的字体颜色更改为红色。有的客户会感觉在web上的展现效果不是很符合自己的要求，而想以其它的样式展现，如类似button样式的tab标签。
本文将介绍报表报表组自定义tab样式的实现方法。
总体思路：使用Javascript控制tab标签页的CSS样式，比如当前默认选中标签页为tab1，当点击tab2时，tab1失去焦点，而tab2得到焦点，此时就要更换两个标签页的CSS样式，从而达到更换显示样式的效果，并且每个标签页都用CSS控制显示成类似button的效果。
第一步、设计一个含有三个报表的报表组，将其发布到web预览，报表报表组标签页默认样式如下图所示。
从上图可看出报表组标签页，当前浏览标签为红色字体，其它标签为蓝色，当点击其它标签页浏览时，标签颜色对换。
第二步、修改发布报表组的JSP文件
在发布报表组的JSP中加入如下代码
1、 定义CSS样式的代码
<style>
//CSS样式属性设置
//未获取到焦点的标签页对象CSS样式
.mynormal{
display:block;
color:#444;
text-decoration:none;
font-weight:normal;
background:#ddd;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
width:50px;
//获取到焦点的标签页对象CSS样式
.myhover{
text-decoration:none;
font-weight:bold;
margin:0;
padding:0.25em 1em;
border-left:1px solid #fff;
border-top:1px solid #fff;
border-right:1px solid #aaa;
width:100px;
//当tab1获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）
#tab_item1 A:hover,
#tab_item1 A:active,
#tab_item1 A.here:link,
#tab_item1 A.here:visited {
background:#C6C0CB;
cursor:hand;
//当tab2获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）
#tab_item2 A:hover,
#tab_item2 A:active,
#tab_item2 A.here:link,
#tab_item2 A.here:visited {
background:#C6C0CB;
cursor:hand;
//当tab3获取到焦点时的CSS样式：当鼠标移动到tab页上时，鼠标变成”小手”的效果，//点击后背景色变为深灰色（#C6C0CB）
#tab_item3 A:hover,
#tab_item3 A:active,
#tab_item3 A.here:link,
#tab_item3 A.here:visited {
background:#C6C0CB;
cursor:hand;
</style>
2、tab标签调用已定义的CSS样式的js代码
<SCRIPT LANGUAGE=”JavaScript”>
//默认情况下，初始化tab1获取当前焦点
//oldNode是指当前或发生点击标签页事件之前取得焦点的标签页对象
var oldNode = “tab_item1″;
function click1(nodeDesc) {
//将当前获取到对象的标签页赋值给newNode
var newNode = nodeDesc;
//判断，如果当前获取到焦点的新标签页对象与其之前标签页对象相同，则不进行任何操作。
//当两对象不相同时，更换两对象的CSS样式
if(newNode!=oldNode){
//设置失去焦点的标签页对象的Css样式为”myhover”，背景色为”浅灰色（#C6C0CB）”
document.getElementById( newNode ).childNodes.item(0).childNodes.item(0).className=”myhover”;
document.getElementById( newNode ).childNodes.item(0).style.background=”#C6C0CB”;
//设置得到焦点的标签页对象的Css样式为”mynormal”，背景色为”深灰色（# ddd）”
document.getElementById( oldNode ).childNodes.item(0).childNodes.item(0).className=”mynormal”;
document.getElementById( oldNode ).childNodes.item(0).style.background=”#ddd”;
//更换当前获取到焦点的标签页对象
oldNode = newNode;
//tab栏样式，宽度占到窗口的30%，背景色为浅灰色（# BDD9D2）
document.getElementById( “rq_tabs” ).parentNode.parentNode.parentNode.width=”30%”;
document.getElementById( “rq_tabs” ).parentNode.style.background=”#BDD9D2″;
//tab1样式：初始状态下显示样式背景色为”深灰色（#ddd）”，显示标签名为”tab1 contents”
document.getElementById( “rq_tabs” ).style.background=”#ddd”;
document.getElementById( “tab_item1″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item1′
onclick=’click1(this.parentNode.parentNode.id);return false;’>tab1 contents</span></a>”;
document.getElementById( “tab_item1″ ).childNodes.item(0).childNodes.item(0).className=”myhover”;
document.getElementById( “tab_item1″ ).childNodes.item(0).style.background=”#C6C0CB”
//tab2样式：初始状态下显示标签名为”tab2 contents”
document.getElementById( “tab_item2″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item2′
onclick=’click1(this.parentNode.parentNode.id);return false;’> tab2 contents</span></a>”;
document.getElementById( “tab_item2″ ).childNodes.item(0).childNodes.item(0).className=”mynormal”;
document.getElementById( “tab_item2″ ).childNodes.item(0).style.background=”#ddd”
//tab3样式：初始状态下显示标签名为”tab3 contents”
document.getElementById( “tab_item3″ ).innerHTML=”<a id=’a_item1′ href=” ><span id=’span_item3′
onclick=’click1(this.parentNode.parentNode.id);return false;’> tab3 contents</span></a>”;
document.getElementById( “tab_item3″ ).childNodes.item(0).childNodes.item(0).className=”mynormal”;
document.getElementById( “tab_item3″ ).childNodes.item(0).style.background=”#ddd”
//待增加的tab……
//->
</SCRIPT>
第三步、用上面定义的jsp文件将报表组发布到web预览，效果如下图所示。
从上图可看出tab标签变为button按钮样式，色调为灰色，当鼠标移动到标签名处时变为小手图标。
以上介绍了润乾报表设计器中报表组tab标签的个性化设计方法。用户若不喜欢默认的tab标签样式，可以按照以上的方法和途径进行个性化设计。