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

本来这节是想讲讲用AJAX获取选项卡的内容，但是在编写过程中，发现前两天写的第三节，动态创建和删除选项卡功能里有BUG，于是动手将BUG修正。

改完后，一时兴起，决定把动态创建删除功能再次增强，现在不仅能创建静态内容选项卡，还能用AJAX获取内容并创建选项卡。

另外新加了判断，如果选项卡已经创建，那么再点击新建不会再次创建新的选项卡，而是显示已经创建了的选项卡。

addSection函数包括三个参数，第一个是选项标签的文本，第二个是选项内容的文本，如果使用AJAX获取内容，就是url地址，第三个为可选的options参数，包括有插入的位置，删除功能标签，是否使用AJAX，创建选项卡的ID。

而通过选项卡的ID，在DOM中检索是否已经存在，已经存在的话，就显示相应的选项卡，没有则创建一个。

目前这个代码原型已经基本实现了选项卡式邮箱所需要的功能，可以在此基础上继续扩展实现更强大的功能。

AJAX动态新建选项卡示例

本节完整代码如下：

 1 /**
 2  * implement two methods to Tabs class: addSection & removeSection
 3  */
 4 Tabs.implement({
 5     addSection:function(newTabHtml,newSectionHtml,options){
 6         var options =$merge({
 7                 pos:null,
 8                 del:'tabDel',
 9                 isAjax:false
             },options);
         var isCreated = $(options.id);
         if(isCreated){
             this.toggleSection(this.tabs.indexOf(isCreated));
             return;
         }
         var length = this.sectionsLength;
         var pos = $pick(options.pos, length).limit(0, length);
         
         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,'id':options.id}).inject(oldTab,posMethod);
         var newSection = oldSection.clone().setStyle('display','none').inject(oldSection,posMethod);
         if(options.isAjax){
             var request = new Request.HTML(
                 $merge(this.options.requestOptions,{
                     method:'get',
                     update:newSection,
                     url:newSectionHtml
                 })
             )
             request.send();
         }else{
             newSection.set('html',newSectionHtml)
         }
 
         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.'+options.del);
         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);
         }
         else if(this.current>index) {
             this.current--;
             this.current = this.current.limit(0, this.sectionsLength);
         }
         this.showSection(this.current);
         this.fireEvent('onRemove',index);
     }
 });