MooTools 1.2 Class Template

Discussion

1. evilhuman

   Great reference point, thanks!
2. Seth

   This is something I’ve been curious about for a while with MooTools. What would you use a class for? What determines whether you use a Class or just a function?

   I’m really trying to learn best practices for coding with MooTools and other libraries but I haven’t really found an all encompassing resource…all though this site is quickly becoming a favorite.
3. keif

   I’ve been doing the same thing!

   @Seth, the best explanation I’ve heard is that classes help make your code more readable, reusable, and less complex. That’s the short answer ;)
4. david

   @Seth: I use classes when I’m creating functionality with options. I also use classes so I can reference objects. It does keep the code cleaner too!
5. rborn

   I use classes when I want to reuse the code with other occasions – in same project, or other – with different options
   I use functions when I do more specific tasks, or more simple that a class would be just overhead…
6. Daniel

   An extra nice post, David. Thanks! (It’s Stumble time!)
7. Imzyos

   Very nice snippet
8. Imzyos

   What about add Extends?
9. david

   @Imzyos: I don’t extend other classes much.
10. david

    @Crispjin: Instead of e.addEvent('mouseenter',function() { });, you may want to consider adding a mouseenter event to the class and replace the above with this.fireEvent('mouseenter');.
11. Crispijn

    I’m not very familiar with the JavaScript/moo syntax so I’m still struggling with your suggestion with the this.fireEvent

    How do I implement this? Where to I leave the “e” variable witch points to the element I would like to change the opacity? The mootools docs couldn’t give me a right example…

    var fadeButtons = new Class({
    
        Implements: [Options],
    
        options: {
            maxopacity: 1,
            minopacity: 0
        },
    
        initialize: function(options){
            this.setOptions(options),
            this.start()
        },
    
        //start the button events
        start: function(){
    
            var list = $$('#buttons div img');
    
            list.each(function(e) {
    
                this.e.fireEvent('mouseenter');
    
                //OLD HABBITS
                /*e.addEvent('mouseenter', function(){
                    e.fade(this.options.minopacity);
                });
    
                e.addEvent('mouseleave', function(){
                    e.fade(this.options.maxopacity);
                });*/
            });
    
        },
    });
    

    Could you give me a kick in the right direction? Thanks anyway!

    Crispijn,
    The Netherlands
12. Keijo

    Thanks for this. For some reason I’ve been using it quite a lot. Simple things are usually best!

    One thing I noticed is that Dom Ready is missing ); at the end. So you could add that so it does not confuse newcomers with errors if they use this.
13. Samuel M.

    I have been using mootools for a little bit, and I really like it.

    Thanks for the tutorials, they’re great… Keep them coming.

    Samuel M.
14. Javier

    Buensimo el ejemplo, sin embargo los métodos no se disparan a menos que agregues
    this.fireEvent('yourMethod'); donde "yourMethod" es el nombre de tu evento.
    Ejemplo.-

    show: function() {
          alert('hacer algo');
          /*al final de la instrucción*/
          this.fireEvent('show'); 
    },
    

    Esto es útil cuando quieres agregar codigo personalizado al ejecutar dicho evento.
15. Avi

    Hi,
    This is the tutorial what I am looking for.
    Before some days I have tried to contact you regarding this point. but no reply from your side.
    But after all thanks for this post.
    Thanks
    Avi