unijimpe

Mootools es un framework Javascript muy potente que nos facilitará el desarrollo de interfaces visuales, efectos, manipulación del DOM, manejo de AJAX, entre otras muchas opciones. Además de ser muy ligera, tiene soporte para OOP y además tiene multitud de plugins que te permitirán implementar variedad de aplicaciones fácilmente.

Empezando con Mootools
Lo primero es descargar la librería, para ello puedes acceder a Download Mootools, donde seleccionas los módulos a utilizar y el método de compresión, para nuestro caso seleccionamos todos los módulos. Descargaremos un archivo con el nombre mootools-release-x.xx.js.txt (Donde x.xx es la versión), el cual lo renombrados a mootools.js y lo colocamos al directorio de nuestro proyecto web.

El siguiente paso es incluir la librería en nuestro html, para poder utilizarlo, para ello colocamos en el header lo siguiente.

<script type="text/javascript" src="js/mootools.js"></script>

Detectando los Eventos de Carga
Lo siguiente que debemos hacer el crear un detector de eventos para ejecutar nuestras acciones una vez que se ha cargado la página. Si se llama a las funciones cuando aun no se ha completado la carga se generar errores pues aun hay elementos que no están disponibles.

Para ello existen dos eventos: domready que se ejecuta cuando todos los elementos de la página están listos, pero no espera por las imágenes y load que se ejecuta cuando toda la página incluyendo las imágenes se ha cargado, entonces tendríamos:

<script type="text/javascript">
window.addEvent('domready', function() {
     // código - carga sin imágenes completa
});
window.addEvent('load', function() {
     // código - carga con imágenes completa
});
</script>

Obviamente es mas rápido domready pues no espera que se carguen las imágenes pero ya se tiene disponible todos los elementos de la página para manipularlos.

La función $ (dolar)
La función $() es equivalente a document.getElementById() con el cual se puede acceder a un elemento mediante su identificador. Veamos los siguientes ejemplos:

document.getElementById('myDiv'); // accede a mydiv
$('myDiv'); // accede al elemento con id=mydiv

La función $$ (doble dolar)
La función $$() es equivalente a document.getElementsByTagName(), pero mas potente pues devuelve un array con los elementos que cumplen la condición.

$$('div'); // Array de elementos Mootools
$$('a.external'); // Array de enlaces con la class=external
$$('a[href=#]'); // Array de enlaces con href=#

Nuestro Primer Ejemplo
Una vez que tenemos los conceptos básicos, podemos implementar nuestro primer ejemplo, haremos que al cargar la página se aplique el estilo link a todos los enlaces de nuestro html, además pintamos de color rojo al div con nombre diverror, para ello tendríamos el siguiente código:

<script type="text/javascript">
window.addEvent('domready', function() {
	$$('a').addClass('link');
	$('diverror').setStyles('color: #CC0000');
});
</script>

Mas Información
Obviamente este es una pequeña introducción con los conceptos más básicos, mas adelante iremos desarrollando mas temas que nos ayudarán a comprender mas las capacidades de Mootools. Para mas información pueden les dejo una pequeña lista con recursos:

• Mootools Docs
• Mootools Demos
• Understanding Mootools Selectors $, $$, $E and $ES
• Selectors on fire: a tale of pseudoselectors
• Mootools: introducción – CSSLab

Posts Relacionados

• Swiff: Mootools Flash Plugin
• Rollover de Imágenes con Mootools
• MooEditable: Editor HTML con Mootools
• Mootools Calendar
• Publicar Archivos Flash con Mootools