Simple tutorial for MooTools usage

Hi all. Today we will learn a bit about great javascript framework called MooTools. It’s ultra small and ultra fast :)

In this tutorial we will work with small table. Our task is to implement simple model of behavior – when our mouse is over one of cells, it will be colored in pink, other become gray. Simple, isn’t it?

In result we will get such table. Try to move mouse over it.

Ok, lets start.

First common problem for beginners is how to determine when DOM model is fully loaded. With MooTools its simple as 1,2,3

window.addEvent('domready', function() {
	alert('Dom model is loaded');
});

And thats it. Inside this function you can call any other code and you can be sure, that it runs properly.

Next task is to switch classes for active and inactive cells. To do this, we will use

element.setProperty('property-name', 'class-name' )

Of course we could use

element.addClass('class-name' )  & element.removeClass('class-name' )

or even

element.className = 'class-name'

but we will use setProperty , because it is easier to use one command to change element class from one to another instead of two, and of course because its mootools native method.

Ok, so now we know when DOM model is loaded and how to change class for certain cell. But we need to change class for all cells in a table. So we need to get it into array somehow.

MooTools has a number of very helpful functions for this case.
To make our life a bit easier, give our table id=”testTbl”.
Now pay ATTENTION!!! Complex thing :)

td_array = $$('#testTbl td');

And we have all td items in array. Lets explain it a bit. $$() function used when you need to collect some items from DOM what meet some conditions. “#testTbl” – means to get all items with id=testTbl. “#testTbl td” means to get all TD items inside all items with id=testTbl. I use only one of selectors. More can be found at docs.mootools.net. By the way i like the way guys organized their help.

Ok, back to our table. We miss only one feature to get things working. We need to attach functions to ‘mouseover‘ & ‘mouseout‘ events of each TD element in our table.
We can do this with help of such function:

element.addEvent('event', function() );

Now we have all pieces of puzzle. To organize it nicely, i suggest to use a Class. Create new class using MooTools is simple too. Am i using word ‘simple’ too much :) ?

var new_class = new Class({
	some_property : [],
	initialize: function() {
	},
	some_func: function() {
	},
	.
	.
	.
	some_func: function() {
	}
});

And here is the code

window.addEvent('domready', function() {
	table = new tableEffect();
});

var tableEffect = new Class({
	td_array : [],
	initialize: function() {
		//get all td inside our table
		this.td_array = $$('#testTbl td');
		this.td_array.each( function(td) {
			  td.addEvent('mouseover', this.table_colorize.pass(td, this) );
			  td.addEvent('mouseout', this.table_normalize.pass(td, this) );
		  },   this );
	},

	table_colorize: function(td_hover) {
		this.td_array.each(
		function(td) {
			td == td_hover ? td.setProperty('class', 'cell-hover' ) : td.setProperty('class', 'cell-other' );
		}
		);
	},

	table_normalize: function(td) {
		this.td_array.each(
			function(td) { td.setProperty('class', 'cell-regular' ); }
		);
	}

});

Some explanations.
td_array – contain all td elements of our table. Used in class functions, so i decide to make it class property.
initialize – run when our class created, init td array and bind functions to events.
table_colorize – function used to select active cell and gray others
table_normalize – back to our table with white bg

If you are new to javascript, you could be confused by using word “this” in this code

this.td_array.each( function(td) {
			  td.addEvent('mouseover', this.table_colorize.pass(td, this) );
			  td.addEvent('mouseout', this.table_normalize.pass(td, this) );
		  },   this );
);

But i think it would be too much for the first tutorial.

P.S. : As you noticed, english is not my native language, so you give me a lesson ;)