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);
        }
    }
}