將代碼轉換成類

Question

var tabs = $('ul li a.class'); 
tabs.addEvent('click', function(){ 
tabs.removeClass('active'); 
this.addClass('active'); 
}); 

var tabs = new Fx.Scroll('contents', { 
duration: 2000 
}); 

var scroller = $('.class'); 
scrollTab.addEvent('click',function(e){ 
el_id = this.id.split('_'); 
slide_el = 'myTab_' + el_id[1]; 
tbas.toElement(slide_el); 
}); 

我想知道如何將這段代碼轉換爲模塊化的mootools類，我可以在其他頁面上重用。

我有一個基本的想法，但它似乎沒有工作

var class = new Class({ 
    Implements: [Options, events], 
    options:{ 
    duration: 1500, 
    tabs: $(ul li a.class) 
    }, 
    Initialize: function(options){ 
    this.setOPtions(options); 
}, 
method1:{ 
///// 
}, 
method2:{ 
///// 
}, 

}); 

我知道我必須有2種方法之一製作標籤開關的顏色和一個用於製作標籤的功能。 ...你能幫我做這個工作嗎？謝謝

Answer 1

您必須在代碼中的一些錯誤，你需要學習一點MooTools的類:)：

var myClass = new Class({ // you can't use var class<- reserved word 

    Implements: [Options, Events], //Events uppercase, and, are going to use it? 

    options:{ 
     duration: 1500 
     /*,tabs: $('ul li a.class') see initialize, tabs as a parameter */ 
    }, 

    initialize: function(tabs, scrollers, options){ 

     this.setOptions(options); //u had a typo in setOptions 

     this.tabs = tabs; 

     this.scrollers = scrollers; 

     this.method1(); //i.e. build tabs 

     this.scrollables = new Fx.Scroll(this.options.contentToScroll, { 
      duration: this.options.duration 
     }); 

     this.method2(); //i.e. build scrollers 

    }, 

    method1 : function(){ //a 'method' is a function 

     var self = this; 

     this.tabs.addEvent('click', function(){ 
      self.tabs.removeClass('active'); //note 'self' that references to the instantiated and 'running' 'myClass' object 
      this.addClass('active'); 
     }); 

    }, 

    method2 : function(){ // 'method' = function 

     var self = this; 

     this.scrollers.addEvent('click',function(e){ 
      el_id = this.id.split('_'); 
      slide_el = 'myTab_' + el_id[1]; 
      self.tabs.toElement(slide_el); 
     }); 

    } 

    /*, otherPublicMethod : function(){} */ 

}); 

//to instantiate a 'myClass' 

var myClassInstance = new myClass(
    $('ul li a.class') /* tabs elems*/, 
    $('.class') /*scroller elems*/, 
    { duration : 15000, contentToScroll : $('content') } /* options */ 
); 

---

值得一讀=>http://ryanflorence.com/mootools-class/和http://mootorial.com/wiki/mootorial/09-howtowriteamootoolsclass