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
