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

  • Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • Implement the Google AJAX Search API

    Let's be honest...WordPress' search functionality isn't great. Let's be more honest...no search functionality is better than Google's. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API....

  • Using jQuery and MooTools Together

    There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page. The XHTML and JavaScript jQuery is namespaced so the...

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!