[分享]选项卡组件代码

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

选项卡组件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 onclick='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>
 
 

[分享]选项卡组件代码

猜你喜欢