Introducción a Mootools

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.

mootools.gif

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.

  1. <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:

  1. <script type=“text/javascript”>
  2. window.addEvent(‘domready’, function() {
  3.      // código – carga sin imágenes completa
  4. });
  5. window.addEvent(‘domready’, function() {
  6.      // código – carga con imágenes completa
  7. });
  8. </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:

  1. document.getElementById(‘myDiv’); // accede a mydiv
  2. $(‘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.

  1. $$(‘div’); // Array de elementos Mootools
  2. $$(‘a.external’); // Array de enlaces con la class=external
  3. $$(‘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:

  1. <script type=“text/javascript”>
  2. window.addEvent(‘domready’, function() {
  3.     $$(‘a’).addClass(‘link’);
  4.     $(‘diverror’).setStyles(‘color: #CC0000’);
  5. });
  6. </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.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: