导航

[Javascript]多页签窗口的实现

Posted on 2005-06-11 10:02  xujh  阅读(4522)  评论(0)  编辑  收藏  举报
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