La guía definitiva para aprender Mootools

Comenzar con cualquier tipo de marco puede ser una experiencia intimidante. Para ayudar, esta semana tenemos un tutorial en profundidad y un largo screencast para proporcionar un curso intensivo para esta biblioteca de JavaScript popular. Con tanto enfoque en jQuery, es fácil olvidar que Mootools es una biblioteca igualmente poderosa con un gran número de seguidores..

Este tutorial incluye un screencast disponible para miembros Tuts + Premium.

Después del cambio inicial a Mootools, me sentí frustrado por la falta de apoyo de la comunidad y terminé volviendo a Prototype de inmediato. Después de sentirme más cómodo trabajando con frameworks, volví a Mootools y no miré atrás..

Con este tutorial, voy a tratar de asegurarme de que tenga un excelente comienzo en el marco de Mootools. Voy a explicarle cómo descargar y configurar todo, así como algunos de los elementos básicos de Mootools. Después de eso, pasaré un rato explicándote cómo usar los documentos de Mootools, que es un sitio que visitarás con mucha frecuencia durante el uso de Mootools..

De acuerdo, suficientes historias, ensuciémonos las manos..


Algunos requisitos

Lo bueno de trabajar exclusivamente con javascript es que no necesitamos ejecutar los archivos en un servidor web o local. Todo lo que necesitas para este tutorial es:

  • Un editor de texto / IDE
  • Un navegador
  • Algun tiempo.

Para este tutorial usaré Firefox y Firebug para mostrarte algunos consejos de depuración, por lo que te recomiendo que uses Firefox y Firebug. Firebug hará que trabajar con Mootools, o cualquier marco, sea 100 veces más fácil.

Puedes descargar firebug aquí


Descargando el Framework


Dirígete a www.Mootools.net/download

Por ahora vamos a incluir las bibliotecas Core y More. Esto es solo para asegurarnos de que no nos estamos perdiendo nada. Cuando se sienta más cómodo con Mootools, se dará cuenta de que no todos los componentes son necesarios para aplicaciones específicas, por lo que puede crear bibliotecas de Mootools personalizadas para satisfacer sus necesidades y mantener el tamaño de los archivos pequeños..

Descargue el archivo comprimido de Mootools 1.2.3 YUI y guárdelo en su escritorio.


Vaya al constructor más, seleccione todas las opciones y descargue el archivo comprimido YUI.


Configuración del marco

Vamos a crear una nueva carpeta llamada Moo y dentro de esa carpeta, creamos otra carpeta llamada inc. Solo para facilitar las cosas, cree un archivo más dentro de nuestra carpeta inc llamada js y tire ambos archivos Mootools dentro de esa carpeta.

Dentro de nuestra carpeta de Moo, crea un nuevo archivo llamado index.html y abre esa trampa.


¿Está abierto? Bien, ahora ábrelo también en Firefox. Deberías ver una página en blanco. Vuelva a su archivo index.html en su editor.

Para incluir Mootools en nuestro script, necesitamos agregar 2 líneas de código a su archivo HTML. Si alguna vez has incluido un archivo javascript en una secuencia de comandos, esto te resultará muy familiar..

  

Ahora estamos configurados y listos para ir!


Screencast completo



Haciendo Mootools hablar con elementos

Para que Mootools hable con los elementos de nuestra página, usamos la función $ () para obtener un elemento por su ID.

Vamos a crear un nuevo div, asignarle una ID y un texto y luego hacer que Mootools hable con él.

 

Hola chicos!

Después de eso, pongamos algunas etiquetas javascript para que podamos comenzar a escribir algunos Mootools.

Hemos creado div y le hemos dado una ID de "caja". Insertamos un poco de texto dentro de él y creamos algunas etiquetas de script para que podamos comenzar a ingresar algo de bondad de Mootools.

Si usamos la función $ y pasamos el ID de nuestra caja, podemos ver que Mootools no está obteniendo todos los atributos de nuestro "caja" div. Nuestro elemento variable ahora contiene todos esos datos..

 var elemento = $ ('caja');

Si actualizamos la página, no podemos ver visiblemente que algo esté sucediendo, pero sabemos que las cosas están sucediendo en el fondo. Aquí es donde entran en juego console.log () y Firebug.

Si abres Firebug, deberías ver una consola en blanco. Usando console.log () podemos pasar información a Firebug para mostrarla. Esto es extremadamente útil al depurar un script porque puede usarlo para mostrar información en varios pasos de su script para ver dónde fallan las cosas.

 console.log ('Oh, Hola a todos!');

También podemos usarlo para mostrar información que de otro modo no se mostraría en nuestro navegador.

Vamos a usar console.log () para mostrar algo de información sobre nuestro "caja" div.

 console.log (elemento);

Así que hemos aprendido que podemos usar $ () para obtener un elemento, pero ¿qué pasa si queremos obtener la información de muchos elementos? No queremos usar 100 instancias de $ () que solo pueden causar problemas. Aquí es donde entra en juego el $$ ().!

¿Quién necesita obtener uno, vamos a obtener muchos!

Permite añadir 5 enlaces a nuestra página..

 

Soy el primer link

Soy el segundo enlace

Soy el tercer enlace

Soy el cuarto enlace

Soy el quinto enlace

… Etiquetas javascript… var enlaces = $$ ('a'); console.log (enlaces);

Nuestra variable de enlaces ahora contiene una variedad de todos nuestros enlaces..


De acuerdo, hemos creado nuestros elementos y ahora tenemos a Mootools hablando con ellos, pero esto no es nada divertido. El usuario final no está viendo ningún cambio, así que vamos a alejarnos de estas cosas aburridas y nos movemos hacia algo un poco más divertido!


Hechiceros y Setters

Acabamos de cubrir los elementos utilizando nuestras funciones de obtención. Podemos obtener un solo elemento usando $ () y el ID de los elementos. También hemos cubierto la obtención de múltiples elementos utilizando $$ () y el tipo de elemento..

Cuando usamos $$ () podemos pasar el nombre de la etiqueta HTML o usar los selectores de clase CSS para tomar el grupo de elementos. Un ejemplo rápido de agarrar nombres de clase se vería así.

 elementos var = $$ ('. myclass');

Eso devolvería una matriz de todos los elementos en la página con la clase css de "mi clase".

La teoría es seca como un hueso y para eso están los doctores, pero has venido aquí para ensuciarte las manos, así que ensuciémonos.

Ahora que estamos obteniendo nuestros elementos, usemos las funciones de configuración para manipular los elementos en la pantalla.

Nuestro "caja" div se ve un poco simple así que vamos a darle un poco de color. Ya hemos establecido nuestro elemento en nuestra variable elemento.

 element.set ('styles', 'color': 'red');

Usamos nuestra variable element y adjuntamos la función set () usando element.set ().

Hay muchos argumentos que podemos usar para cambiar nuestro elemento, pero por ahora vamos a usar estilos. A continuación pasamos algunas opciones a nuestro argumento de estilos. Estamos pasando la opción de color y configurando nuestro texto en rojo. Los estilos pueden usar todas las opciones de css disponibles. Cambiemos el color de fondo mientras estamos aquí. Siéntase libre de jugar con los estilos y ver cuán colorido puede hacer nuestro elemento de caja..

 element.set ('styles', 'color': 'red', 'background': 'yellow');

Nuestro "caja" El elemento no se ve un poco menos claro. Si quisiéramos aplicar muchos estilos a nuestro elemento de caja, podría terminar siendo una gran cantidad de código innecesario. Afortunadamente, podemos usar estilos CSS y otro argumento conjunto para reducir el código. Continúa y borra el código element.set (). Vamos a agregar algunos estilos css usando css en línea.

Nota: Para facilitar las cosas, vamos a escribir nuestro CSS dentro del archivo, pero al crear un sitio web real es una buena práctica tener todos sus CSS y Javascript en un archivo separado..

Encima de tu "caja" div permite agregar algunas etiquetas de estilo y crear una clase de .myclass.

 

Ahora podemos usar set ('estilo') para agregar nuestro nuevo estilo a nuestro elemento.

 element.set ('class', 'myclass');

Algunos otros argumentos que podemos usar con set son HTML y texto. Algunos ejemplos básicos de esto son:

 element.set ('html', '

Hola chicos, ahora soy atrevido.

'); element.set ('texto', 'Hola chicos, no html aquí');

El argumento que utilice dependerá de para qué lo necesite. Si no necesita pasar valores HTML, usaría texto y visa-versa si necesita pasar valores HTML.

Hemos usado set () para agregar algunos estilos a nuestro "caja" div, pero podríamos haber agregado la clase al div mediante HTML. Realmente no necesitamos usar Mootools para agregar el estilo si solo lo estamos cambiando antes de que el usuario incluso vea el cambio. Aquí es donde los eventos son útiles.


Estamos organizando un evento y todos están invitados.!

Vamos a seguir adelante y eliminar todos los enlaces que creamos y borrar nuestras etiquetas javascript.

Su archivo index.html ahora debe incluir solo este código:

  

Hola chicos!

Crea un nuevo enlace y dale un ID de botón justo debajo. "caja" div.

 

Haz click en mi por favor!

Ahora vamos a agregar un evento a este botón para que podamos ejecutar algo de código cuando un usuario haga clic en el enlace. Usamos addEvent () para hacer esto.

 $ ('botón'). addEvent ('clic', función (e) );

Estamos utilizando la función familiar $ () para decirle a Mootools que queremos hablar con el enlace con un ID de botón. A continuación adjuntamos el addEvent () y pasamos 2 argumentos. El primer argumento es el evento que queremos capturar, que es cuando un usuario hace clic en el enlace. El segundo argumento es una función con una variable de e. Esta función se ejecutará cuando el usuario haga clic en el enlace y la variable de e pase el evento. Entenderás por qué pasamos una variable con la función en este siguiente paso.

... dentro de addEvent ... e.stop ();

Asignamos la función stop () a nuestra variable de e para detener el navegador para enviar la acción de enlace. Por lo general, cuando hace clic en el enlace, la página se actualizará y todos los cambios se perderán. e.stop () impide que el navegador actualice la página para que podamos hacer algo de magia con Mootools!

Ahora tenemos Mootools capturando el evento de clic, así que hagamos que Mootools agregue nuestra clase de .myclass a nuestra "caja" div cuando se hace clic en el enlace.

... dentro de addEvent () ... element.set ('class', 'myclass');

Guarde esto, actualice la página y haga clic en su enlace. Al hacer clic en el enlace, la división ahora debe tener un poco de estilo. Hicimos todo eso sin tener que actualizar la página. Aquí es donde Mootools empieza a ponerse muy interesante..

Rápido poco de actualización antes de continuar. Hemos aprendido cómo usar las funciones de obtención ($ y $$) para permitir que Mootools hable con los elementos de nuestra página. Luego aprendimos que podríamos usar las funciones de establecimiento para manipular esos elementos. Los eventos permiten capturar la interacción del usuario para que podamos manipular los elementos en tiempo real sin tener que actualizar la página para reflejar cada cambio.


Crear elementos es muy fácil!

Mootools también te permitirá crear nuevos elementos sobre la marcha para que el usuario pueda personalizar la página. Para hacer esto vamos a utilizar las nuevas funciones Element () e inyectar ()..

Vamos a empezar con un nuevo archivo HTML. Borre todo de index.html o cree un nuevo archivo.

En nuestro archivo vamos a crear un div y 2 enlaces. Sigue adelante y crea esos ahora!

 

Añadir una caja gris

Añadir una caja azul

Vamos a usar $$ () para agregar un evento a nuestros dos enlaces en la página. Vamos a capturar el evento de clic y luego crear un nuevo elemento. Por último, vamos a inyectar nuestro nuevo elemento en nuestro "resultado" div.

 $$ ('a'). addEvent ('click', function (e) e.stop (););

Usamos $$ ('a') para capturar todos los enlaces y luego adjuntamos addEvent () a cada enlace. Hacemos esto porque reduce la codificación, por lo que no tenemos que encontrar cada ID de los enlaces y crear addEvents para ellos. Vamos a utilizar el ID de cada enlace para determinar qué estilo debemos agregar. Vamos a preparar rápidamente un css para las cajas que vamos a crear..

 

Ahora es el momento de crear nuestros elementos e inyectarlos en la página..

 var class = this.id; var box = new Element ('div', 'class': class); box.inject ($ ('resultado'));

Primero estamos creando una variable llamada "clase" Mantener el ID del enlace en el que se hizo clic. Nuestra siguiente línea se encarga de crear el elemento. Hacemos esto usando nuevo Elemento () y luego pasando algunos argumentos. El primer argumento es el tipo de elemento que queremos crear. Queremos crear un div, así que pasamos un valor de div. El segundo set son nuestras opciones. Queremos asignar una clase diferente dependiendo de en qué enlace se hizo clic. Hacemos esto diciendo primero a la función que queremos configurar el "clase" opción, luego pasamos nuestra variable de clase que devolverá cualquiera "caja azul" o "grey_box".

La última línea está tomando nuestro nuevo elemento, que colocamos en una "caja" Variable y lo está inyectando en nuestro. "resultado" div. Mootools sabe inyectarlo en "resultado" porque estamos pasando el "resultado" Div usando un método getter como la opción principal.

Ahora, si actualizamos la página y comenzamos a hacer clic en nuestros enlaces, debería ver que se crean pequeños cuadros sobre la marcha y se agregan a la página..


Tengo ese efecto en las personas.

En este punto del tutorial, debería sentirse bastante cómodo con el uso de las funciones de obtención y configuración para que Mootools se comunique con nuestros elementos..

En la última parte de este tutorial voy a tocar algunas de las funciones de animación y efectos que Mootools ofrece..

Permite crear otro archivo nuevo. Dentro de ese archivo crea un div con un texto dentro de él y un enlace.

 

Hola chicos!

Haz click en mi

He agregado ID a cada elemento para que podamos hacer que Mootools les hable.

Para empezar, vamos a adjuntar un evento al enlace. Esto debería parecer muy familiar por ahora.

 $ ('botón'). addEvent ('clic', función (e) e.stop (););

Ahora que tenemos a Mootools capturando el evento click, hagamos nuestro "caja" div se desvanecen en cada clic.

 $ ('caja'). fade ('alternar');

Ahora, cuando hacemos clic en nuestro enlace, la caja div debería desaparecer. Si volvemos a hacer clic en el enlace volverá a aparecer..

Fading es genial y todo, pero vamos a agregar un poco de estilo a la caja y ver si podemos hacer que crezca!

 

Vamos a utilizar la función tween () para animar algunos atributos de nuestra "caja" div.

Dentro de nuestro evento de clic, eliminamos la función fade () y la reemplazamos con tween ().

 //$('box')fade('toggle '); $ ('caja'). tween ('altura', '200');

Ahora si hacemos clic en el enlace, nuestro cuadro debería crecer más alto..

La función de interpolación toma 2 argumentos. El primero es el atributo que queremos manipular y el segundo es un valor. Queremos cambiar la altura de la caja y queremos que se anime a 200px.

¿Qué pasaría si quisiéramos que la caja creciera 10px cada vez que hiciéramos clic en el enlace? Primero tendríamos que obtener la altura actual de la caja. Creo que podemos hacerlo con nuestra función $ () getter.

 var box = $ ('box'); var height = box.getHeight (); var new_height = altura + 10; box.tween ('height', new_height);

Primero asignamos nuestro "caja" div a una variable de caja. Luego usamos una función incorporada de Mootools llamada getHeight () para obtener la altura actual de nuestro "caja" div. Queremos que el recuadro crezca 10px cada vez que se haga clic en el enlace, por lo que creamos una nueva variable llamada new_height y le asignamos un valor de altura + 10. Esto es tomar la altura actual y aumentarla en 10. Finalmente, adjuntamos la interpolación ( ) para nuestra variable de caja, dígale que queremos animar la altura y pasarle el valor de new_height.

Si hace clic en el enlace, el cuadro debería crecer. Si vuelves a hacer clic, seguirá creciendo con cada clic del ratón..


Deberíamos documentar esto!


Mootools tiene una extensa sección de documentos en su sitio web. http://Mootools.net/docs/core

Si planea usar Mootools, se familiarizará con esta sección de su sitio. Se divide en las diferentes clases y funciones disponibles que Mootools tiene para ofrecer..

La sección que visitarás más será la sección Elemento. Esta es la sección que contiene toda la información sobre cómo Mootools se comunica y manipula los elementos de la página..

Le he dado un toque amplio para ayudarlo a acostumbrarse a cómo funciona Mootools y, si desea seguir aprendiendo, le sugiero que lea algunas de las páginas de la documentación de Mootools..