Design solutions for any media.

MooTools – Creating a New Class

Here is a template for a new class:

var AjaxModalPanel = new Class({

Implements: [Options, Events],

options: {},

initialize: function(){}

});

Implements: [Options, Events]

The class implements the MooTools Options class since any class that is to be used more than once and has features that could be customized is going to need to offer options. The options property in the class definition will contain the default values which will be used if no options are passed. Also, any class that the user can interact with or will have state changing in a manner we cannot predict eg. Ajax events, will need to be able to hook into these state changes so that we can handle them if required – so we implement MooTools Events class as well.

*Note that there are 2 classes which you shouldnt confuse:

Event – this class extends native browser events (click, mouseover)

Events – this class allows the implementation of custom events in classes

initialize

This method is basically the ‘constructor’ and handles any functionality you need to execute when you instantiate an instance of the class

methods and functions

methods are basically functions that are a property of a class, whereas functions exist outside of a class definition.

Defining Arguments

Anything our class needs to work will be passed in as arguments to the initialize method. The key distinction between options and arguments is that arguments are mandatory for the class to work whereas options are only required if you wish to customize the instance (where allowed). An example of an argument is a container that you wish to attach your functionality to, eg:

var AjaxModalPanel = new Class({

Implements: [Options, Events],

options: {},

initialize: function( container ){

this.container = $(container);

}

});

In the above example we are expecting a reference to an element ‘container’ to be passed in which we store as a property of the class so we can reference it later. The reference gets wrapped with the $ method (see below).

$ and $$ methods

$ – this method has 2 purposes: it allows us to pass either an element’s ID or a reference to the element itself – the element is then properly extended with the MooTools methods that extend the native element object

$$ – this method selects dom elements based on either tag names or CSS Selectors (Note CSS Selectors are an additional requirement to the MooTools core). This method extends all the elements in the array it returns with the MooTools methods that extend the native element object.

As well as tag names and selectors, this method accepts
HTML collections and arrays of elements. An array or collection of elements passed through this method will have all its elements extended with the MooTools methods and its common to see this method passed an array of elements to ensure that all the elements are extended by MooTools

Defining Methods

The methods of a class define its behaviour. Here we add a ‘modify’ method that gets called at the end on initialization. The method simply changes the background color of the container to white when the mouse is hovered over it.

var AjaxModalPanel = new Class({

Implements: [Options, Events],

options: {},

initialize: function( container ) {

this.container = $(container);

this.modify();

},

modify: function() {

this.container.addEvent(‘mouseover’, function(event) {

event.preventDefault();

this.container.setStyles({

background: ‘#fff’

});

}.bind(this));

}

});

The ‘this’ keyword

methods are basically functions that are a property of a class, whereas functions exist outside of a class definition.