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('load', function() {
  6.      // código - carga con imágenes completa
  7. });

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. });

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:

Comentarios Total 6 comentarios


Emilio Lopez
Publicado: 28/02/2008 11:16 am

Oops.. Haz puesto dos veces “domready” xD En la segunda debe decir “load”. Por cierto, muy bueno el blog ;)

unijimpe
Publicado: 28/02/2008 10:04 pm

Hola, cierto en la redacción del post tuve una lapsus y escribí dos veces “domready”, ya lo corregí, gracias por tu colaboración.

enver
Publicado: 20/08/2008 5:41 pm

amigo si que tu eres lo mejor de los mejor

Francisco | Hosting
Publicado: 13/09/2010 4:20 pm

Muy claro tu articulo, muy bueno, muchas gracias.

Fernanda
Publicado: 22/03/2011 10:11 pm

Hola, tengo esta situacion:

if (isset($_GET[‘filas_insertadas’]))

{
$filas_insertadas= $_GET[‘filas_insertadas’];

if ($filas_insertadas>0)
{
$save_ok = constantes::save_ok;
echo “msjOk(‘”.$save_ok.”‘);”;

Bueno el tema es que con Windows Vista e IE7 me da como que hay un error en esa ultima linea, no de sintaxis, sino que Internet Explorer no puede abrir el sitio…. y todos los caminos me llevan a que lo que se postula en esta pagina es lo que debo utilizar de forma que me cargue todo el html y a lo ultimo el mensaje en Javascript…. pero como deberia utilizar la funcion window.addEvent(‘domready’, function() {

en este caso?

José Alejandro Realza
Publicado: 17/10/2011 12:54 am

Muy versatil, aunque tambien pesa mas de lo esperado a diferencia de jQuery

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)