JavaScript

Getting Started with MooTools

Avinash Zala
Share

This tutorial introduces one of the most popular JavaScript frameworks today, MooTools. MooTools, which stands for My Object Oriented Tools, is compatible with Internet Explorer 6+, Firefox, Opera and Chrome. MooTools is designed to be compact, modular, and of course, object oriented. MooTools is designed for intermediate to expert JavaScript programmers, so make sure you have enough experience before diving in.

Getting MooTools

Getting MooTools is fairly simple. MooTools comes in two parts, known as Core and More. Core contains the core classes and modules of the framework, while More contains the additional classes which can be included based on an application’s needs. MooTools has powerful builder pages which can customize Core and More based on our needs. The current stable version (at the time of writing this article) of MooTools Core is 1.4.5 and More is 1.4.0.1.

Element Selectors

One of the most basic operations of any JavaScript framework is the selection of elements. MooTools uses Slick as its selector engine. MooTools supports many different types of selectors. This section covers some of the most useful and important selectors.

Selecting an Element by ID

If we want to select an element by ID in plain JavaScript, we need to use the long document.getElementById('id_of_element') syntax. MooTools, like many other JavaScript frameworks, shortens this by using $ to select elements. Your code ends up looking like this:

var element =  $('id_of_element');

This will create problems if you include MooTools and other libraries that use $ (e.g. jQuery) on the same page. To overcome this situation MooTools has provided document.id() as another way to select elements. Your code to select elements by id now looks like this:

var element =  document.id('id_of_element');

Selecting Elements by Class

This will return an array of elements of a certain class. To get each individual element, we need to traverse the array, as shown below.

$$('.class_name').each(function(ele){
  console.log(ele);
});

Selecting Elements by Attribute Patterns

The following examples select elements whose id and class attributes begin with a certain pattern.

$$('[id^=id_start_]').each(function(ele){
  console.log(ele);
});

$$('[class^=class_start_]').each(function(ele){
  console.log(ele);
});

Similarly, the following examples match elements whose id and class attributes end with a certain pattern.

$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});

The DomReady Event

DomReady is an event which can only be bound to the window object. DomReady executes as soon as the DOM is loaded, which can be much earlier than the window.load event, which waits for all other resources to load. I suggest reading this in depth comparison of DomReady and window.load. The following example uses DomReady to wait until the DOM loads before querying it.

window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});

Element Creation

MooTools can create new HTML elements and inject them into the DOM. Creating a new HTML element in MooTools is very simple. For example, the following code creates a new div element.

var new_div = new Element('div', {'class': 'new_div'});

The previous code creates a new element, but does not inject it into the DOM. To perform the injection, you need to call the adopt() method. The following example shows how this is done.

var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);

When this code gets executed, you can see the new div added just before the closing body tag.

Event Binding

Event binding causes code to be executed when certain events are performed on an element. Click, double click, and hovering are examples of common events. You can also create your own custom events, but that is beyond the scope of this article. As an example of MooTools event binding, the following code adds a simple click event handler to an element.

document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});

You can also add events to dynamically created elements. The following code adds a click handler to a dynamically created element.

var new_div = new Element('div', {'class': 'new_div'});
$$('body').adopt(new_div);
new_div.addEvent('click', function(){
  console.log('I was just clicked');
});

Browser Detection

Last, but not least, is browser detection with MooTools. This is required when you want to write conditional code based on the user’s browser. MooTools provides the Browser object, which gets populated on page load. The following example uses a switch statement to identify the current browser.

switch(Browser.name)
{
  case "safari":
    console.log('I am Safari');
    break;
  case "chrome":
    console.log('I am Chrome');
    break;
  case "firefox":
    console.log('I am FireFox');
    break;
  case "opera":
    console.log('I am Opera');
    break;
  case "ie":
    console.log('I am IE');
    break;
}

Conclusion

This article has covered a lot of the MooTools basics. There are some great resources out there for learning to use MooTools effectively. I have learned a lot from the MooTools Docs and The David Walsh Blog. You can also refer to my MooTools work.