Mootools Basics

Mootools is a great JavaScript library and I feel really comfortable using it. There are lot other libraries, like JQuery, DoJo, ExtJS. They have their own features, but I feel strong with Mootools. ExtJs is really good, but very much heavyweight. On the other hand, Mootools is really lightweight. Including all the core features, it is only around 64KB. Special effects may weight around 100KB more.

A most used function of Mootools is the $ function. It’s a bit confusing with JQuery and that’s why conflicts with JQuery if used on the same page. $ selects a dom element from the document by its id. The syntax is $(‘element_id’). There is another pretty good function that I like is $$ function. It selects elements by class name or tag etc. More on this functions are available in Mootools documentation.

Mootools Request feature is another great thing to have. This AJAX calling function is capable of sending AJAX request either in GET or POST method.

These are the basic functions one may need to develop a regular web application. There are also other common helper functions for Array, String, Number, Cookie etc. For detail idea about Mootools, it is suggested to visit Mootools Documentation at http://docs.mootools.net/

One thing to keep in mind. Whenever you are adding some JavaScript code on your documents HEAD, make sure it is inside a document onReady or onLoad function. Otherwise, you’ll get stuck with JS errors. Most of the cases, the common mistake is like using the JS code to get an element at the HEAD, but the body is still loading. So the script couldn’t find the element and throw an error.

For Mootools, this onLoad wrapping syntax is like this:

window.addEvent('domready', function(){
//Your Code Here
});

Published by Ashiqur Rahman

Programmer and photography enthusiast.

Join the Conversation

2 Comments

  1. An outstanding share! I have just forwarded this onto a co-worker who was conducting a little research on this. And he in fact bought me lunch because I stumbled upon it for him… lol. So allow me to reword this…. Thank YOU for the meal!! But yeah, thanks for spending the time to talk about this topic here on your blog.

Leave a comment

Your email address will not be published. Required fields are marked *