MooTools 1.2 Class Template

Written by David Walsh on July 21, 2008 · 16 Comments

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: [Options],

	options: {
		yourOption: ''
	initialize: function(options) {
		//set 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'


  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. Crispijn August 11, 2008

    Hi David,

    I’m struggling with my first mootools (1.2) class now and I have a question about the options. How do I use them in my class?

    For example:

    $(e).addEvent(‘mouseenter’, function(){

    This gives an error: this.options is undefined.

    But when I initialize I also set the options with

    initialize: function(options){
    console.log(‘Buttons ready to hover…’);

    Maybe you’ve got the answer for me…

    Thanks a lot and keep up the good (mootools) work!

  11. @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’);”.

  12. Crispijn August 12, 2008

    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){

    //start the button events
    start: function(){

    var list = $$(‘#buttons div img’);

    list.each(function(e) {


    /*e.addEvent(‘mouseenter’, function(){

    e.addEvent(‘mouseleave’, function(){


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

    The Netherlands

  13. Keijo May 10, 2009

    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.

  14. Samuel M. January 7, 2010

    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.

  15. 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.

    show: function() {
    alert(‘hacer algo’);
    /*al final de la instrucción*/

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

  16. 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.

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Weekend Links - Google Maps API, HeatMap API, googleDrive, MooTools Forms, jQuery Sparklines, Firebug
You Know How I Know You Read My Email?