Treehouse

MooTools 1.2 Class Template

By on  

Starting a MooTools class can be difficult if you haven't created one before. Here's a template you can copy, paste, and use to create your MooTools classes.

MooTools 1.2 Class Template

var yourClass = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		yourOption: ''
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	
	//a method that does whatever you want
	yourMethod: function() {
		
	}
	
});

MooTools 1.2 Class Usage Template

	//once the DOM is ready
	window.addEvent('domready', function() {
		var yourInstance = new yourClass({
			yourOption: 'yourValue'
		});
	}
ydkjs-2.png

Recent Features

Incredible Demos

Discussion

  1. Great reference point, thanks!

  2. 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. 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. @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. 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. An extra nice post, David. Thanks! (It’s Stumble time!)

  7. Very nice snippet

  8. What about add Extends?

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

  10. @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. 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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!