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

今天这节的讲的是用AJAX获取内容，代码大部分与《Mootools Essential》最后的例子一样，Aaron Newton在他的这本书里对这个例子阐述的很详细，我不过稍微改动了一下，让它更适合于继承我所写的Tabs类。

用AJAX获取内容有一点要考虑的是尽量不要重复的到服务器端获取同一内容，这段代码就对此做了处理，数据在得到之后，就不会再到服务器端获取。在示例中可以看到，当四个选项全点击之后，页面上方的提示就不会改变了。

由于AjaxTabs类继承自Tabs类，因此它也拥有了Tabs类的所有功能。

为什么这次不继续采用implement方法来完成，因为AjaxTabs类拥有一个与Tabs类的同名方法：showSection，而这个方法在给Tabs类添加动画效果时覆盖（override）过，如果再次使用implement方法话，又将覆盖（override）视觉效果中的方法。因此采用继承的方式将更好的完成功能需求。

AjaxTabs 继承 Tabs

AjaxTabs.js

 1 var AjaxTabs = new Class({
 2     
 3     Extends:Tabs,
 4 
 5     options:{
 6         cache:true,
 7         urls:[],
 8         requestOptions:{}
 9     },
     
     showSection:function(index, force){
         var tab = this.tabs[index];
         var url = this.options.urls[index] || (tab.getElement('a')? tab.getElement('a').get('href'):false);
         if(!url || force || (this.options.cache && tab.retrieve('loaded'))) {
             this.parent(index);
         } else {
             this.getSectionContent(index, url);
         }
     },
 
     getSectionContent:function(index, url){
         var tab = this.tabs[index];
         var section = this.sections[index];
         var request = tab.retrieve('tabAjax');
         if(!request) {
             request = new Request.HTML(
                 $merge(this.options.requestOptions,{
                     method:'get',
                     update:section,
                     url:url
                 })
             ).addEvent('onSuccess',function(){
                     this.showSection(index,true);
                     tab.store('loaded',true);
             }.bind(this));
             tab.store('tabAjax',request);
         }
         request.send();
     }
 });