这是以前编写后整理出来的一个选项卡组件代码,个人使用感觉还是不错的,挺好用的,现分享一下!
选项卡组件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%");
- *
- **/
- //初始化选项卡
- function initTabs()
- {
- var colorBorder="#C0C0C0"; //边框颜色
- var colorSelected="#000000"; //选定选项卡字体颜色
- var colorUnSelected="#000000"; //未选定选项卡字体颜色
- var bg="#FFFFFF"; //选项卡背景
- var bgUnSelected="#DEDFEF"; //未选定选项卡背景
- var font="宋体"; //选项卡字体名称
- var fontSize="12px"; //选项卡字体大小
- var borderStyle="solid 1px " + colorBorder;
- var tabSlected="background:" + bg + ";font-family:" + font + ";font-size:" + fontSize + ";color:" + colorSelected;
- var tabUnSlected="background:" + bgUnSelected + ";font-family:" + font + ";font-size:" + fontSize + ";color:" + colorUnSelected + ";border-bottom:" + borderStyle;
- var bgStyle="border-bottom:" + borderStyle + ";background:" + bg;
- var len=arguments.length;
- var index=arguments[0];
- document.write("<table border=0 id=tabs cellspacing=0 cellpadding=0 width=100% style='table-layout:fixed'><tr height=21px valign=bottom index=" + index + ">");
- index=index*3+1;
- for(var i=1;i<len;i+=3)
- {
- document.write("<td width=1px style='" + bgStyle + "'><input style='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]) + "px valign=middle align=center style='cursor:hand;border-top:" + borderStyle + ";" + (index==i ? tabSlected:tabUnSlected) + "'>" + arguments[i] + "</td>");
- document.write("<td width=1px style='" + bgStyle + "'><input style='width:1px;height:20px;border:" + borderStyle + "'></td>");
- document.write("<td width=2px style='" + bgStyle + "'><input style='height:1px;visibility:hidden'></td>");
- }
- document.write("<td style='" + bgStyle + "'> </td></tr><tr height=8px></tr></table>");
- }
- //点击响应事件
- function onClickTab(src)
- {
- var tr=src.parentElement;
- var oldIndex=tr.index,index=(src.cellIndex-1)/4;
- if(oldIndex==index)return false;
- var obj=tr.cells[oldIndex*4+1];
- var text=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;
- }
- var tabid=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>
- <script src="createTab.js"></script>
- </HEAD>
- <BODY>
- <script>initTabs(0,"基本信息","basic","","办理单","outline","","督查反馈","feedback","","查看意见","opinion","","查看流程","flow","")</script>
- <table id=tabbasic border=0 width=100%>
- <tr><td align=center>基本信息</td></tr>
- </table>
- <div id=taboutline width=100% style="display:none">
- <!--嵌套子选项卡-->
- <script>initTabs(0,"来文单位","unit","","主题词","keyword","","系统参数","system","")</script>
- <table id=tabunit border=0 width=100%>
- <tr>
- <td>来文单位</td>
- </tr>
- </table>
- <table id=tabkeyword border=0 width=100% style="display:none">
- <tr>
- <td>主题词</td>
- </tr>
- </table>
- <table id=tabsystem border=0 width=100% style="display:none">
- <tr>
- <td>系统参数</td>
- </tr>
- </table>
- </div>
- <table id=tabfeedback border=0 width=100% style="display:none">
- <tr>
- <td>督查反馈</td>
- </tr>
- </table>
- <div id=tabopinion width=100% style="display:none">
- <script>initTabs(0,"签 名","sign","60","领导批示","leader","200","其它意见","other","50%")</script>
- <!--嵌套子选项卡, 设置选项卡宽度,宽度可为空值、百分比或数值,空值默认为72-->
- <table id=tabsign border=0 width=100%>
- <tr>
- <td>签 名</td>
- </tr>
- </table>
- <div id=tableader width=100% style="display:none">
- <script>initTabs(0,"国家领导","country","","省级领导","province","","单位领导","local","")</script>
- <table id=tabcountry border=0 width=100%>
- <tr>
- <td>国家领导</td>
- </tr>
- </table>
- <table id=tabprovince border=0 width=100% style="display:none">
- <tr>
- <td>省级领导</td>
- </tr>
- </table>
- <table id=tablocal border=0 width=100% style="display:none">
- <tr>
- <td>单位领导</td>
- </tr>
- </table>
- </div>
- <table id=tabother border=0 width=100% style="display:none">
- <tr>
- <td>其它意见</td>
- </tr>
- </table>
- </div>
- <table id=tabflow border=0 width=100% style="display:none">
- <tr>
- <td>查看流程</td>
- </tr>
- <tr>
- <td><iframe id=ifflow name="iframe.htm" src=""></iframe></td>
- </tr>
- </table>
- </BODY>
- </HTML>