仿XP的Tab标签JS代码大全
整理过后的干净的仿XP的Tab标签代码。
点击下载源文件
tab.htm 文件内容如下：
<script src="common/tabclass.js"></script>
<link href="common/style.css" rel="stylesheet" type="text/css">
<script>
var tabbox1=new TabBox("tab1")
tabbox1.addtab("p1","留言",0)
tabbox1.addtab("p2","附件")
tabbox1.addtab("p3","关于此控件")
</script>
<body bgcolor="#AEAEAE">
<table border="0" style="border-collapse: collapse" bordercolor="#808080" cellpadding="0" > <tr><td> <script> tabbox1.init() </script> </td> </tr> <tr width="300"><td bgcolor="#FFFFFF" style="border:1px #000000 solid;border-top:none" nowrap> <table id=p1><tr><td> <textarea rows="6" name="S1" cols="51"></textarea></td></tr></table> <table id=p2><tr><td><input type=file ></td></tr></table> <table id=p3><tr><td>此控件由<b><font face="Verdana"><font color="#FF0000">puter</font>jam</font></b>独立开发<br>如果你在使用过程中有什么意见和建议，请到 <a href="http://puterjam.vipx.net/" target=_blank>puterjam.vipx.net</a> </td></tr></table> </td></tr> <script>tabbox1.inithidetab()</script> </table> </body> common/tabclass.js文件内容如下：function TabBox(tabname,type){
var tabbox=this; this.tabname=tabname; this.lasttab=1; this.tabarray=new Array() this.tabPad=null;//----保存tab项目数祖----
this.item=function(tabid,caption,dis){ this.tabid=tabid this.caption=caption this.dis=dis }//----添加tab项目----
this.addtab=function(tabid,caption,dis){ //alert(tabbox.tabarray.length) tabbox.tabarray[tabbox.tabarray.length]=new tabbox.item(tabid,caption,dis) }//--程序初试化----
this.init=function(){ //alert(tabbox.tabname) if (tabbox.tabarray.length==0) {alert("没有任何项目");return} document.write("<div id='"+tabbox.tabname+"div'>") tabbox.tabPad=eval("document.all."+tabbox.tabname+"div") var tbBoard=document.createElement("table") tabbox.tabPad.insertAdjacentElement("beforeEnd",tbBoard); tbBoard.style.cssText="border-collapse: collapse" tbBoard.border="0" tbBoard.cellSpacing="0" tbBoard.cellPadding="0" tbBoard.height="24" tbBoard.width="100%" trRow = tbBoard.insertRow(0) trRow.height="3" var tl=0 tbCell=trRow.insertCell(tl) tbCell.id=tabbox.tabname+'_tabbar1' tbCell.rowSpan="2" tbCell.className="tbottom3" tbCell.width="3" tbCell.noWrap=true tl++ tbCell=trRow.insertCell(tl) tbCell.id=tabbox.tabname+'_tabtop1' tbCell.noWrap=true for (i=1;i<tabbox.tabarray.length;i++) { tl++ tbCell=trRow.insertCell(tl) tbCell.id=tabbox.tabname+'_tabbar'+(i+1) tbCell.rowSpan="2" tbCell.className="tbottom" tbCell.width="3" tbCell.noWrap=true tl++ tbCell=trRow.insertCell(tl) tbCell.id=tabbox.tabname+'_tabtop'+(i+1) tbCell.noWrap=true } tl++ tbCell=trRow.insertCell(tl) tbCell.id=tabbox.tabname+'_tabbar'+(tabbox.tabarray.length+1) tbCell.rowSpan="2" tbCell.className="tbottom2" tbCell.width="3" tbCell.noWrap=true tl++ tbCell=trRow.insertCell(tl) tbCell.rowSpan="2" tbCell.width="100%" tbCell.noWrap=true tbCell.style.cssText="border-bottom:1px #000000 solid;" //alert(tbBoard.cells.length) trRow = tbBoard.insertRow(1) for (i=0;i<tabbox.tabarray.length;i++) {tbCell=trRow.insertCell(i)
tbCell.id=tabbox.tabname+'_tabcon'+(i+1) tbCell.className="lostfouce" if (tabbox.tabarray[i].dis==1) { tbCell.innerHTML="<b>"+tabbox.tabarray[i].caption+" "+"</b>" } else { tbCell.innerHTML=tabbox.tabarray[i].caption+" " } tbCell.tabnum=i+1 tbCell.noWrap=true tbCell.onclick=function() { tabbox.doclick(this.tabnum) } tbCell.onmouseover=function() { } tbCell.onmouseout=function() { tabbox.doout(this) } } }this.inithidetab=function(num)
{for (i=0;i<tabbox.tabarray.length;i++)
{ eval(tabbox.tabarray[i].tabid).style.display="none" } tabbox.doclick(1) } this.doclick=function(num,action){ lastbar1=eval(tabbox.tabname+"_tabbar"+this.lasttab) nlasttab=this.lasttab+1 lastbar2=eval(tabbox.tabname+"_tabbar"+nlasttab)tpbar1=eval(tabbox.tabname+"_tabbar"+1)
tpbar2=eval(tabbox.tabname+"_tabbar"+(tabbox.tabarray.length+1))tabtop=eval(tabbox.tabname+"_tabtop"+this.lasttab)
tabcon=eval(tabbox.tabname+"_tabcon"+this.lasttab) tabtop.className="" tabcon.className="lostfouce" //alert(lastbar2.className) lastbar1.className='tbottom'; lastbar2.className='tbottom'; tpbar1.className='tbottom3'; tpbar2.className='tbottom2'; eval(tabbox.tabarray[this.lasttab-1].tabid).style.display="none" lastbar1=eval(tabbox.tabname+"_tabbar"+num) nnum=num+1 lastbar2=eval(tabbox.tabname+"_tabbar"+nnum) tabtop=eval(tabbox.tabname+"_tabtop"+num) tabcon=eval(tabbox.tabname+"_tabcon"+num) lastbar1.className='tleft'; lastbar2.className='tright'; tabtop.className="ttop" tabcon.className="getfouce" //alert(tabbox.tabarray[num-1].tabid) eval(tabbox.tabarray[num-1].tabid).style.display="block"this.lasttab=num;
}this.doover=function(obj){ if (obj.className=="lostfouce") { obj.className="lostfouce_over" }
}
this.doout=function(obj){
if (obj.className=="lostfouce_over") { obj.className="lostfouce" }}
} common/style.css文件内容如下：body
{ margin: 6pt; s}td
{ font-family: 宋体; font-size: 12px; color: #000000; }.bd
{ FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#999999,strength=3); } .tleft { background-image: url('../img/tab1.gif'); } .tright { background-image: url('../img/tab3.gif'); } .ttop { background-image: url('../img/tab2.gif'); } .ttop_over { background-image: url('../img/tab8.gif'); } .tbottom { background-image: url('../img/tab4.gif'); } .tbottom2 { background-image: url('../img/tab6.gif'); } .tbottom3 { background-image: url('../img/tab7.gif'); border-bottom: 1px #000000 solid; } .getfouce { cursor: default; text-indent: 6px; font-size: 12px; background-color: #ffffff; color:#000000; FONT-FAMILY: "宋体"; font-weight:bold } .lostfouce { text-indent: 6px; font-size: 12px; background-image: url('../img/tab5.gif'); border-bottom: 1px #000000 solid; cursor: hand; color:#555555; FONT-FAMILY: "宋体"; padding-top:4px } .lostfouce_over { text-indent: 6px; font-size: 12px; cursor: hand; background-image: url('../img/tab9.gif'); border-bottom: 1px #000000 solid; } http://www.imting.com/puterjam/blogview.asp?logID=49&cateID=1