Javascript : 模拟 Windows 选项卡控制类

该 Javascript 选项卡类并没有提供漂亮的界面，它只是提供了对指定的多个容器元素进行切换的功能。实际使用时通过指定CSS来定义显示样式。

该类并不创建包含元素的页容器，而是添加指定的容器，添加后，该类将接管此容器元素的显示。比如，页面上有两个DIV，里面分别包含不同的元素。默认情况下这两个DIV将上下排列显示在页面上。现在想让这两个DIV组成选项卡，就可以将这两个DIV添加到该类中，添加后这两个DIV只有一个显示，通过点击该类生成的相应的切换按钮进行控制。

该类有两个方法：
add(text,elementid,ico)
将指定的元素添加到选项卡控制中。
text             : 选项卡的标题；
elementid :添加到选项卡中的元素的ID。
ico              : 可以为该选项卡添加一个图标。

render(elementid)
生成到指定的元素内。
elementid          :生成到的元素ID。
此方法将生成一个DIV，包含一个UL元素，UL元素中包含相应数量的LI元素，每个LI元素中包含一个A元素，即选项卡的切换控制按钮，分别控制由 add 方法添加的每一个容器元素。
此方法生成的元素结构如下：

< div  class ="tabs" >
     < ul >
         < li >< a class="active" > tabText </ a ></ li >
         < li >< a > tabText </ a ></ li >
        ...
     </ ul >
</ div >

被激活的选项卡其控制按钮元素的CSS类为：active

需要自定义的样式：

  .tabs {}
  .tabs ul {}
  .tabs ul li {}
  .tabs ul li a, .tabs ul li a:link, .tabs ul li a:visited, .tabs ul li a:active, .tabs ul li a:hover {}
  .tabs ul li a.active, .tabs ul li a.active:link, .tabs ul li a.active:visited, .tabs ul li a.active:active, .tabs ul li a.active:hover {}

该类的 ID 包含随机数，这是为了防止页面中有多个此类的对象时发生冲突。

可以将同一个容器元素添加多次，也可以将同一个容器元素添加到多个此类的对象中，这样控制起来就有意思了。大家可以试试。

使用方法：
将下面的代码保存为js文件，在使用的页面用 <script type="text/javascript" src="......"></script> 导入，然后添加几句代码即可。

/*
    选项卡类

    类名称：tabs
    使用：
        var t = new tabs;
        t.add('选项卡标题','被控制的元素ID');
        ...
        
        t.render('要输出到的元素ID');

*/
function  tabs(){
     this .id  =   ' tabs '   +  Math.ceil(Math.random() * 10000 );
     this .lnkItems  =   new  Array();     // 所包含的选项页数组列表
}


// 添加方法。参数：text:选项页的标题；elementid:选项页所控制的元素ID
tabs.prototype.add = function (text,elementid,ico){
     var  element  =  document.getElementById(elementid);
     if (element != null )
    {
         var  lnk  =  document.createElement( ' a ' );
        lnk.id  =   ' tab_ '   +   this .id  +   ' _ '   +  Math.ceil(Math.random() * 10000 );     // ID，生成随机数，确保不重复
        lnk.innerHTML  =  ico != null   ?   ' <img src=" '   +  ico  +   ' " /> '  :  '' ;
        lnk.innerHTML  +=  text;
        lnk.href = ' # ' ;
        lnk.masterdivid  =   this .id;
        lnk.delementid  =  elementid;
        element.style.display  =   ' none ' ;
         if ( this .lnkItems.length == 0 )
        {
            lnk.className  =   ' active ' ;
            element.style.display  =   '' ;
        }
         this .lnkItems[ this .lnkItems.length]  =  lnk;
    }
}

// 输出到指定的元素中
tabs.prototype.render = function (elementid){
     var  pelement  =  document.getElementById(elementid);
     if (pelement != null ){
         var  d  =  document.createElement( ' div ' );
        d.id  =   this .id;
        d.className  =   ' tabs ' ;
        pelement.appendChild(d);
         var  ul  =  document.createElement( ' ul ' );
        d.appendChild(ul);
         var  cleardiv  =  document.createElement( ' div ' );
        cleardiv.className  =   ' clear ' ;
        d.appendChild(cleardiv);

         for ( var  i = 0 ;i < this .lnkItems.length;i ++ )
        {
             this .lnkItems[i].onclick = function ()
            {
                 var  master  =  document.getElementById( this .masterdivid);
                 var  lnks  =  master.all.tags( ' a ' );
                 for ( var  j = 0 ;j < lnks.length;j ++ )
                {
                    lnks[j].className  =   '' ;
                    document.getElementById(lnks[j].delementid).style.display  =   ' none ' ;
                }
                 this .className  =   ' active ' ;
                document.getElementById( this .delementid).style.display  =   '' ;
            }
             var  li  =  document.createElement( ' li ' );
            li.appendChild( this .lnkItems[i]);
            ul.appendChild(li);
        }
    }
}