MooTools for Beginners Part 1 - the Basics
By Ryan Florence, published 2009-12-29
Part of the issue MooTools for Beginners (1.2).
This is a basic tutorial to help get you started with mootools. We’ll be manipulating elements, adding and removing event listeners, and ridding the world of magic if you want.
Setting up your page
MooTools is a collection of javascript code. To get any of it to work you have to first include mootools-core into your html page. Just like an img tag, your src has to point to your copy of mootools.
<html>
<head>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript">
</script>
</head>
</html>
Alternatively you can use google’s copy instead:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
Using domready and load to launch code.
In mootools we wrap our code in a domready or load event like so:
window.addEvent('domready', function(){
// do stuff when the document has loaded but images have not
});
window.addEvent('load', function(){
// do stuff when the document has loaded along with images and other stuff
});
domready means that the document has loaded all the html but not the images. Therefore, it is safe to try to select and manipulate elements. load means that the entire page is finished loading, including images. This means it’s safe to manipulate elements when you’re trying to get their dimensions, etc. Typically you’ll use domready.
Click the play button or “result” to execute the code.
Manipulating elements and Element methods
A common task is to add and remove a class from an element. First you have to select it, then you can manipulate it. We’ll have a .selected css class that turns the color blue and add the class as soon as the document is ready.
$ selects an element by its id attribute. Often you want to select a lot of elements. Simply use $$, which returns a collection of elements (or array.) Makes sense, one to select one, two to select many.
$$('div#some-awesome > .css3 + span.selectors');
If you’re coming from jquery:
$('div#someElement'); // doesn't work
$('someElement'); // works
$$('div#someElement'); // works, but you get an array with one item
$$('div#someElement')[0]; // stupid, but the same result as $('someElement');
Once you’ve selected an element with $ (or an array of elements with $$) you’ve given it wings. You can now call some methods on it, like addClass, removeClass or the tween and morph animations.
Event Listeners, chaining, and passing objects around
We’re going to create the ever-loved menu nudge. We’ll need to attach mouseenter event to each element, and then run an animation on the element. We’ll also need a mouseleave event to animate it back.
The first thing you may notice is each. Since we used $$ we selected a collection of elements. Each iterates over each element; once inside the function, we can reference the current element with li or whatever you name the variable.
addEvent is a method just like tween. It takes two arguments: the event name and the function to run when the event occurs. You can also chain methods together when you need to do a lot of stuff to the element: element.addEvent().addEvent().tween(). Chaining gets ugly really fast and it’s silly to chain addEvent when we have addEvents. We could clean that code up like this:
$$('li').each(function(li){
li.addEvents({
'mouseenter': function(){
element.tween('padding-left', 20);
},
'mouseleave': function(){
element.tween('padding-left', 0);
}
});
});
Or we could just store the events in an object and pass the object to addEvents
$$('li').each(function(li){
var events = {
'mouseenter': function(){
li.tween('padding-left', 20);
},
'mouseleave': function(){
li.tween('padding-left', 0);
}
};
li.addEvents(events);
});
Manipulating other elements, caching, and removing events.
Javascript was my first programming language. The thing that frustrated me the most right at first was trying to click one element and change the other. So here’s an example of that.
The first few lines I cache the elements by storing them in variables. Since I have several places that reference rabbit, it’s easier on the browser to just select it once, rather than use $('rabbit') everywhere I want to manipulate it.
Also this demonstrates how to remove events after you have added them. When you use addEvent you give it the two arguments, the event type (click) and the function (showRabbit). To remove the event you call removeEvent and then pass it the same arguments you did when you added the event and it’ll remove that function from the click listener.
At this point the mootools docs ought to make some sense. Happy tooling!
