Infragistics公司的多页签控件功能确实强大，但在实际运行过程中总是会出一些莫名其妙的问题，运行速度也不快。因此，在分析了该控件所呈现的网页代码后，决定自己写一个让自己放心的控件。有兴趣的朋友可以仿照这个再添加几个页签。
以下是实现多页签窗口的代码：（本实例里面的图片和style以及表格等代码版权属Infragistics公司所有）
|
< html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>终端信息</title>
<script language="javascript">
//当前选中的页签
var CurrSelNo = 0;
//页签的数目
var MaxTabs=6;
function HovIt(objname)
{
if(CurrSelNo!=objname)
{
var btn1='tabInfotd'+objname;
var btn2=btn1+'R';
document.getElementById(btn1).className = 'tabInfoHovT';
document.getElementById(btn2).className = "tabInfoHovTR";
}
}
function DefIt(objname)
{
if(CurrSelNo!=objname)
{
var btn1='tabInfotd'+objname;
var btn2=btn1+'R';
document.getElementById(btn1).className = 'tabInfoDefT';
document.getElementById(btn2).className = "tabInfoDefTR";
}
}
function SelIt(objname)
{
var btn1;
var btn2;
for(i=0;i<MaxTabs;i++)
{
btn1='tabInfotd'+i;
btn2=btn1+'R';
document.getElementById(btn1).className = 'tabInfoDefT';
document.getElementById(btn2).className = "tabInfoDefTR";
document.getElementById('tabInfo_frame'+i).style.display = 'none';
}
btn1='tabInfotd'+objname;
btn2=btn1+'R';
document.getElementById(btn1).className = 'tabInfoSelT';
document.getElementById(btn2).className = "tabInfoSelTR";
document.getElementById('tabInfo_frame'+objname).style.display = '';
CurrSelNo = objname;
}
</script>
</head>
<body>
<style type=text/css>
.tabInfoDisT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Gray;padding:2px 0 0 7px;cursor:Default;background:url(images/ig_tab_winXP3.gif) no-repeat left 2px;}
.tabInfoSelT{height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 2px 7px;cursor:Default;background:url(images/ig_tab_winXP1.gif) no-repeat left top;}
.tabInfoSelTR{width:6px;cursor:Default;font-size:2px;background:url(images/ig_tab_winXP1.gif) no-repeat right top;}
.tabInfoDefT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 0 7px;cursor:Hand;background:url(images/ig_tab_winXP3.gif) no-repeat left 2px;}
.tabInfoDefTR{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;width:6px;cursor:Hand;font-size:2px;background:url(images/ig_tab_winXP3.gif) no-repeat right 2px;}
.tabInfoHovT{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;height:22px;font-family:Microsoft Sans Serif;font-size:8pt;color:Black;padding:2px 0 0 7px;cursor:Hand;background:url(images/ig_tab_winXP2.gif) no-repeat left 2px;}
.tabInfoHovTR{border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;width:6px;cursor:Hand;font-size:2px;background:url(images/ig_tab_winXP2.gif) no-repeat right 2px;}
</style>
<table border="0" cellspacing="0" cellpadding="0" id="igtabtabInfo" width="803px" height="316px" style="Z-INDEX:108;">
<tr><td>
<table id="tabInfo_tbl" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr valign="center">
<td>
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tr>
<td nowrap id="tabInfotd0" align="center" class="tabInfoSelT" height="22px" unselectable="on" onmouseover="HovIt('0')" onmouseout="DefIt('0')" onclick="SelIt('0')">终端信息</td>
<td nowrap id="tabInfotd0R" class="tabInfoSelTR" width="6px" unselectable="on" onmouseover="HovIt('0')" onmouseout="DefIt('0')" onclick="SelIt('0')"> </td>
</tr>
</table>
</td>
<td><table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"><tr>
<td nowrap id="tabInfotd1" align="center" class="tabInfoDefT" height="22px" unselectable="on" onmouseover="HovIt('1')" onmouseout="DefIt('1')" onclick="SelIt('1')">费用信息</td>
<td nowrap id="tabInfotd1R" class="tabInfoDefTR" width="6px" unselectable="on" onmouseover="HovIt('1')" onmouseout="DefIt('1')" onclick="SelIt('1')"> </td>
</tr></table></td>
<td><table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"><tr>
<td nowrap id="tabInfotd2" align="center" class="tabInfoDefT" height="22px" unselectable="on" onmouseover="HovIt('2')" onmouseout="DefIt('2')" onclick="SelIt('2')">工单信息</td>
<td nowrap id="tabInfotd2R" class="tabInfoDefTR" width="6px" unselectable="on" onmouseover="HovIt('2')" onmouseout="DefIt('2')" onclick="SelIt('2')"> </td>
</tr></table></td>
<td><table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"><tr>
<td nowrap id="tabInfotd3" align="center" class="tabInfoDefT" height="22px" unselectable="on" onmouseover="HovIt('3')" onmouseout="DefIt('3')" onclick="SelIt('3')">更改信息</td>
<td nowrap id="tabInfotd3R" class="tabInfoDefTR" width="6px" unselectable="on" onmouseover="HovIt('3')" onmouseout="DefIt('3')" onclick="SelIt('3')"> </td>
</tr></table></td>
<td><table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"><tr>
<td nowrap id="tabInfotd4" align="center" class="tabInfoDefT" height="22px" unselectable="on" onmouseover="HovIt('4')" onmouseout="DefIt('4')" onclick="SelIt('4')">业务信息</td>
<td nowrap id="tabInfotd4R" class="tabInfoDefTR" width="6px" unselectable="on" onmouseover="HovIt('4')" onmouseout="DefIt('4')" onclick="SelIt('4')"> </td>
</tr></table></td>
<!--复制此段，并将tabInfotd(X)和tabInfotd(X)R改为相应增加的数值,后面的HovIt,DefIt,SelIt函数的调用值也要修改 -->
<td><table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%"><tr>
<td nowrap id="tabInfotd5" align="center" class="tabInfoDefT" height="22px" unselectable="on" onmouseover="HovIt('5')" onmouseout="DefIt('5')" onclick="SelIt('5')">投诉信息</td>
<td nowrap id="tabInfotd5R" class="tabInfoDefTR" width="6px" unselectable="on" onmouseover="HovIt('5')" onmouseout="DefIt('5')" onclick="SelIt('5')"> </td>
</tr></table></td>
<!--段落结束-->
<td nowrap style="font-size:2px;cursor:default;border-width:0px 0px 1px 0px;border-color:#949878;border-style:Solid;width:90%;"> </td>
</tr>
</table>
</td></tr>
<tr><td id="tabInfo_cp" bgcolor="#FEFCFD" style="border-width:0px 1px 1px 1px;border-color:#949878;border-style:Solid;background-color:#FEFCFD;padding:3px 0px 0px 0px;height:294px;width:803px;">
<iframe id="tabInfo_frame0" src="http://www.szonline.net" style="" frameborder="0" width="801px" height="290px"></iframe>
<iframe id="tabInfo_frame1" src="http://www.sina.com.cn" style="display:none;" frameborder="0" width="801px" height="290px"></iframe>
<iframe id="tabInfo_frame2" src="http://bbs.highot.net" style="display:none;" frameborder="0" width="801px" height="290px"></iframe>
<iframe id="tabInfo_frame3" src="http://www.doyouhike.net" style="display:none;" frameborder="0" width="801px" height="290px"></iframe>
<iframe id="tabInfo_frame4" src="http://www.szptt.net.cn" style="display:none;" frameborder="0" width="801px" height="290px"></iframe>
<!--复制此段，并将tabInfo_frame改为相应增加的数值 -->
<iframe id="tabInfo_frame5" src="http://www.szptt.net.cn" style="display:none;" frameborder="0" width="801px" height="290px"></iframe>
<!--段落结束-->
<div width="100%" height="100%" id="tabInfo_empty" style="display:none"> </div>
</td></tr>
</table>
</body>
</html>
|
以下为程序所用图片，请放到网页目录下的Images目录下。
ig_tab_winXP1.gif
ig_tab_winXP2.gif
ig_tab_winXP3.gif
