[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（一）

我原来用Prototype.js写过几篇关于选项卡(Tabs)的日志，还用这个实例说明了一下Prototype.js的继承方式。前阵子回过头看看，发现当初的程序有很大的不足，最主要的是将前台XHTML代码的DOM结构写进了JS代码，未能实现XHTML和JS的解耦，通用性大大降低，

这阵子看了看Mootools.js，在《Mootools Essential》书里最后的实例也是用选项卡做为实例讲解了Mootools.js的应用，并也讲解了Mootools的继承。于是，我又萌生了在此基础上继续下去的想法，借此机会来熟悉Mootools的开发方式。

选项卡的核心思想是通过与标签交互来显示相应的内容，因此，选项标签与选项内容页应该为两个数组，首先列出来的是XHTML的代码，我用两个UL来实现选项标签和选项内容页：

 1<div class="divide">
 2    <ul id="tabs" class="tabs">
 3        <li>Tab 1</li>
 4        <li>Tab 2</li>
 5        <li>Tab 3</li>
 6        <li>Tab 4</li>
 7    </ul>
 8    <ul id="sections" class="sections">
 9        <li>This is the content for the first tab.</li>
        <li>This is the content for the second tab.</li>
        <li>This is the content for the third tab.</li>
        <li>This is the content for the fourth tab.</li>
    </ul>
</div>

 

接下来要构思的是程序实现，编程思路是，记录当前所显示标签的下标，当触发标签事件时，如果产生事件的标签下标与当前记录相同，则不做动作，如果不同，则隐藏原来的标签，显示当前的标签，同时记录下当前下标。

在程序初始化时，通过传入选项标签与选项内容页的数组来实现Tabs类与前端DOM结构的解耦，并通过第三个对象参数来设定选项卡的可选式参数。可选式参数包括设定与标签交互的鼠标行为（mouseEvent），当前所选标签的CSS（selectedTabCss）及当前内容页的CSS（selectedSectionCss），还有一个是第一个要显示的内容（firstShow）。

程序内部结构，我分为几个内部函数来组成，包括显示选项内容（showSection)，隐藏选项内容（hideSection），选项内容的显隐（toggleSection），选项标签要绑定的事件（tabEvent），还有两个函数实现选项卡实例化时DOM的初始显示（render）以及将事件绑定至选项标签（attach）。

代码很简单，如下：

 1var Tabs = new Class({
 2
 3    Implements: [Options,Events],
 4
 5    options:{
 6        selectedTabCss:'selected',
 7        selectedSectionCss:'selected',
 8        firstShow:0,
 9        mouseEvent:'click'
    },

    initialize:function(tabs, sections, options){
        this.setOptions(options);
        this.current = this.options.firstShow;
        this.tabs = $$(tabs);
        this.sections = $$(sections);
        this.sectionsLength = $$(sections).length;
        this.attach();
        this.render();
    },

    render:function(){
        this.sections.each(function(section, index){
            if( index !== this.current ) {
                section.hide();
            }else{
                this.showSection(index);
            };
        }, this);
    },

    attach:function(){
        this.tabs.each(function(tab, index){
            tab.addEvent(this.options.mouseEvent,this.tabEvent.bindWithEvent(this,tab));
        }, this);
    },

    tabEvent:function(e,tab){
        e.preventDefault();
        var index = this.tabs.indexOf(tab);
        this.toggleSection(index);
    },

    toggleSection:function(index){
        if(this.current === index) return;
        this.hideSection(this.current);
        this.current = index;
        this.showSection(this.current);
    },

    showSection:function(index){
        var tab = this.tabs[index];
        var section = this.sections[index];
        tab.addClass(this.options.selectedTabCss);
        section.addClass(this.options.selectedSectionCss).show();
    },

    hideSection:function(index){
        if (index===false) return;
        var tab = this.tabs[index];
        var section = this.sections[index];
        tab.removeClass(this.options.selectedTabCss);
        section.removeClass(this.options.selectedSectionCss).hide();
    }
});

这样，我们就完成一个实现了最基本功能的选项卡： 最终示例