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
![](/images/cnblogs_com/xujh/ig_tab_winXP1.gif)
ig_tab_winXP2.gif
![](/images/cnblogs_com/xujh/ig_tab_winXP2.gif)
ig_tab_winXP3.gif