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

在这一节里，我将继续对Tabs类进行扩展，加上动态添加和删除选项卡的功能。

这个功能是我在看到126邮箱里用选项卡来查看邮件后，想到在Tabs类也实现相应的功能

思路如下：
添加新选项卡函数有四个参数，分别是新加标签的文本，新加内容的文本，新加选项卡的位置以及在选项标签上加入删除的按钮。

用传入的参数分别建立Element片段，加入到选项卡标签数组及选项卡内容数组，并将Element片段插入到DOM中，同时将选项卡标签事件绑定到新加标签，最后显示新加的内容。

而删除函数则是添加新选项卡函数的反过程。

我还在这两个函数里分别发布了两个自定义事件onAdd和onRemove，能更方便的实现自定义函数。

示例页

最终代码是在上节完成的代码后面，再使用implement方法在不改动原有类的情况下加上了新加了两个方法。

 1 /**
 2  * implement two methods to Tabs class: addSection & removeSection
 3  */
 4 Tabs.implement({
 5     addSection:function(newTabHtml,newSectionHtml,pos,delA){
 6         var length = this.sectionsLength;
 7         pos = $pick(pos, length).limit(0, length);
 8         
 9         pos2 = pos==length?pos-1:pos;
         var oldTab = this.tabs[pos2];
         var oldSection = this.sections[pos2];
 
         var posMethod = pos == length ? 'after':'before';
         var newTab = oldTab.clone().set('html',newTabHtml).inject(oldTab,posMethod);
         var newSection = oldSection.clone().set('html',newSectionHtml).setStyle('display','none').inject(oldSection,posMethod);
 
         this.tabs.splice(pos,0,newTab)
         this.sections.splice(pos,0,newSection)
         this.sectionsLength++;
 
         if(pos<=this.current){
             this.current++;
         }
         
         var delA= newTab.getElement('a.'+delA);
         if (delA){
             delA.addEvent('click',this.removeSection.bindWithEvent(this,[newTab,delA]));
         }
         
         newTab.addEvent(this.options.mouseEvent,this.tabEvent.bindWithEvent(this,newTab));
         this.toggleSection(pos);
         
         this.fireEvent('onAdd',[newTab,newSection]);
     },
 
     removeSection:function(e,tab,delA){
         e.stop();
         delA.removeEvents();
         var index = this.tabs.indexOf(tab);
 
         this.tabs.splice(index,1);
         var section = this.sections.splice(index,1)[0];
         this.sectionsLength--;
 
         tab.removeEvents();
         tab.destroy();
         section.destroy();
         
         if(this.current==index){
             this.current = (index-1).limit(0,this.sectionsLength);
             this.showSection(this.current);
         }
         this.current--;
         this.current = this.current.limit(0,this.sectionsLength);
         this.fireEvent('onRemove',index);
     }
 });