实用选项卡组件-优快云博客

这是以前编写后整理出来的一个选项卡组件代码，个人使用感觉还是不错的，挺好用的，现分享一下！

选项卡组件createTab.js代码如下：

 
 /**
*传入参数说明：
*1、传入参数数量不限，但要符合3*n+1(n>0)的规则
*2、第一个参数为进入后默认显示的选项卡索引，索引值从0开始
*3、后续参数每3个为一组，分别为：
*A、选项卡名称
*B、选项卡对应元素没有tab前缀的id，对应元素以tab为前缀
*C、选项卡宽度，缺省为75px，可指定固定值或百分比
*4、使用示例initTabs(0,"名称1","ElementId1","100","名称2","ElementId2","20%");
*
 **/ 
 //初始化选项卡  
functioninitTabs()
{
 varcolorBorder="#C0C0C0";//边框颜色  
 varcolorSelected="#000000";//选定选项卡字体颜色  
 varcolorUnSelected="#000000";//未选定选项卡字体颜色  
 varbg="#FFFFFF";//选项卡背景  
 varbgUnSelected="#DEDFEF";//未选定选项卡背景  
 varfont="宋体";//选项卡字体名称  
 varfontSize="12px";//选项卡字体大小  
 varborderStyle="solid1px"+colorBorder; 
 vartabSlected="background:"+bg+";font-family:"+font+";font-size:"+fontSize+";color:"+colorSelected; 
 vartabUnSlected="background:"+bgUnSelected+";font-family:"+font+";font-size:"+fontSize+";color:"+colorUnSelected+";border-bottom:"+borderStyle; 
 varbgStyle="border-bottom:"+borderStyle+";background:"+bg; 
varlen=arguments.length;
varindex=arguments[0];
 document.write("<tableborder=0id=tabscellspacing=0cellpadding=0width=100%style='table-layout:fixed'><trheight=21pxvalign=bottomindex="+index+">"); 
index=index*3+1;
 for(vari=1;i<len;i+=3) 
{
 document.write("<tdwidth=1pxstyle='"+bgStyle+"'><inputstyle='width:1px;height:20px;border:"+borderStyle+"'></td>"); 
 document.write("<tdοnclick='onClickTab(this)'id='td"+arguments[i+1]+"'width="+(arguments[i+2]==""?"72":arguments[i+2])+"pxvalign=middlealign=centerstyle='cursor:hand;border-top:"+borderStyle+";"+(index==i?tabSlected:tabUnSlected)+"'>"+arguments[i]+"</td>"); 
 document.write("<tdwidth=1pxstyle='"+bgStyle+"'><inputstyle='width:1px;height:20px;border:"+borderStyle+"'></td>"); 
 document.write("<tdwidth=2pxstyle='"+bgStyle+"'><inputstyle='height:1px;visibility:hidden'></td>"); 
}
 document.write("<tdstyle='"+bgStyle+"'></td></tr><trheight=8px></tr></table>"); 
}
 //点击响应事件  
functiononClickTab(src)
{
vartr=src.parentElement;
varoldIndex=tr.index,index=(src.cellIndex-1)/4;
 if(oldIndex==index)returnfalse; 
varobj=tr.cells[oldIndex*4+1];
vartext=obj.style.cssText;
obj.style.cssText=src.style.cssText;
src.style.cssText=text;
 if(src.colorbak) 
{
text=obj.style.color;
obj.style.color=src.colorbak;
src.colorbak=text;
}
 if(obj.colorbak) 
{
text=obj.style.color;
obj.style.color=obj.colorbak;
obj.colorbak=text;
}
vartabid=src.id.substring(2);
 if(document.all('if'+tabid)!=null) 
{
 if(document.all('if'+tabid).name!=""&&document.all('if'+tabid).name!=document.all('if'+tabid).src) 
{
 document.all('if'+tabid).removeAttribute("src"); 
 document.all('if'+tabid).setAttribute("src",document.all('if'+tabid).name); 
}
}
 obj=document.all('tab'+obj.id.substring(2)); 
 if(obj)obj.style.display="none"; 
 obj=document.all('tab'+src.id.substring(2)); 
 if(obj) 
{
 obj.style.display=""; 
obj.focus();
 window.setTimeout("document.all('tab"+src.id.substring(2)+"').focus()",1); 
}
tr.index=index;
}
 

测试页面test.html代码如下：

 
 <HTML>
<HEAD>
<TITLE>选项卡例子</TITLE>
 <scriptsrc="createTab.js"></script> 
</HEAD>
<BODY>
 <script>initTabs(0,"基本信息","basic","","办理单","outline","","督查反馈","feedback","","查看意见","opinion","","查看流程","flow","")</script> 
<tableid=tabbasicborder=0width=100%>
<tr><tdalign=center>基本信息</td></tr>
</table>
 <divid=taboutlinewidth=100%style="display:none"> 
<!--嵌套子选项卡-->
 <script>initTabs(0,"来文单位","unit","","主题词","keyword","","系统参数","system","")</script> 
<tableid=tabunitborder=0width=100%>
<tr>
<td>来文单位</td>
</tr>
</table>
 <tableid=tabkeywordborder=0width=100%style="display:none"> 
<tr>
<td>主题词</td>
</tr>
</table>
 <tableid=tabsystemborder=0width=100%style="display:none"> 
<tr>
<td>系统参数</td>
</tr>
</table>
</div>
 <tableid=tabfeedbackborder=0width=100%style="display:none"> 
<tr>
<td>督查反馈</td>
</tr>
</table>
 <divid=tabopinionwidth=100%style="display:none"> 
 <script>initTabs(0,"签名","sign","60","领导批示","leader","200","其它意见","other","50%")</script> 
<!--嵌套子选项卡，设置选项卡宽度，宽度可为空值、百分比或数值，空值默认为72-->
<tableid=tabsignborder=0width=100%>
<tr>
<td>签名</td>
</tr>
</table>
 <divid=tableaderwidth=100%style="display:none"> 
 <script>initTabs(0,"国家领导","country","","省级领导","province","","单位领导","local","")</script> 
<tableid=tabcountryborder=0width=100%>
<tr>
<td>国家领导</td>
</tr>
</table>
 <tableid=tabprovinceborder=0width=100%style="display:none"> 
<tr>
<td>省级领导</td>
</tr>
</table>
 <tableid=tablocalborder=0width=100%style="display:none"> 
<tr>
<td>单位领导</td>
</tr>
</table>
</div>
 <tableid=tabotherborder=0width=100%style="display:none"> 
<tr>
<td>其它意见</td>
</tr>
</table>
</div>
 <tableid=tabflowborder=0width=100%style="display:none"> 
<tr>
<td>查看流程</td>
</tr>
<tr>
 <td><iframeid=ifflowname="iframe.htm"src=""></iframe></td> 
</tr>
</table>
</BODY>
</HTML>
 