Manual de Mootools

Manual con el que podreis aprender a utilizar Mootools, un framework Javascript, que sirve para crear fácilmente código Javascript independiente del navegador, de una forma rápida y directa.

Si te parece útil este manual ayúdanos compartiendo!! :)

1.- Mootools

Qué es Mootools, un framework Javascript para construir aplicaciones web dinámicas y compatibles con cualquier navegador. Introducción a Mootools.

2.- Descarga de Mootools

Podemos descargar Mootools desde la propia página del framework. Debemos elegir los módulos con los que queremos trabajar y la compresión del archivo.

3.- Primer ejemplo con Mootools

Un primer ejemplo de página web que utiliza Mootools para hacer un efecto sencillo que nos permita conocer el framework sin ningún conocimiento previo del sistema.

4.- Segundo ejemplo con Mootools

Vamos a otro ejemplo sencillo con Mootools para crear un scroll en una capa de la página.

5.- Componentes Mootools

Diversos desarrolladores ofrecen componentes realizados con Mootools para utilizar en páginas web.

6.- Evento domready de Mootools

El evento domready de Mootools lo podemos asociar al objeto window, para hacer cosas cuando el DOM está listo (Dom Ready).

7.- Core.js Mootools

Comenzamos la descripción del framework mootools comentando el core, librería de funciones que forman parte del núcleo de mootools.

8.- Core.js de Mootools (parte II)

Continuan las explicaciones de la librería core de Mootools, que forma el núcleo del framework.

9.- Clases en Mootools

Descripción y explicaciones sobre las clases en Mootools. Cómo crear clases de programación orientada a objetos con el Framework Mootools.

10.- Instanciar y trabajar con objetos de clases creadas con Mootools

Ahora veamos la creación de objetos a partir de clases de Mootools y la utilización de esos objetos para acceder a sus propiedades e invocar sus métodos.

11.- Constructores en Mootools

Qué es un constructor y como se crear constructores a las clases de Mootools. Seguimos explicando acerca del trabajo con clases en Mootools.

12.- Extends: Extendiendo clases con Mootools

Vamos a ver como realizar herencia de clases (programación orientada a objetos) en Mootools. Cómo extender clases, utilizando Extends.

13.- Otras formas de extender clases y objetos

Con la función $extend() del core de Mootools, podemos extender unos objetos con las propiedades y métodos de otros objetos. También mostramos cómo crear clases a partir de extender otras clases con objetos.

14.- Implement: implementando clases en Mootools

Con implement podemos implementar nuevas características y funcionalidades en las clases de Mootools, modificando la propia clase en vez de creando nuevas clases.

15.- Función $merge() del core Mootools

Veamos la función $merge(), del core de Mootools, que sirve para combinar varios objetos origen en uno solo, destino, sin alterar los objetos origen.

16.- Element en Mootools. Método $()

El módulo Element de Mootools es uno de los más importantes, que nos permite acceder a cualquier elemento de la página y alterar sus propiedades. Empezamos conociendo el método de Window $().

17.- Element en Mootools. Método $$()

Seguimos viendo el módulo Element de Mootools, ahora explicando la función $$(), que sirve para obtener un grupo de elementos de la página.

18.- Construir elementos en la página con Mootools

Explicaciones sobre la clase Element de Mootools y el constructor de Element, para hacer nuevos elementos en la página.

19.- Ejemplo de construcción de un elemento e inyección en la página

Cómo construir elementos e inyectarlos en la página con Mootools. Construimos elementos con el constructor de Element y los insertamos en la página con el método inject.

20.- Seleccionar un elemento con getElement()

Utilizamos la función getElement() de Mootools para seleccionar un elemento de la página web, que luego podremos alterar para cambiar sus propiedades con otros métodos de Element.

21.- Seleccionar elementos de la página con getElements()

El método getElements() de la clase Element de Mootools permite seleccionar todos los elementos de un tipo o etiqueta.

22.- Más métodos de la clase Element de Mootools

Para continuar con la clase Element de Mootools, ofrecemos explicaciones y ejemplos sobre los métodos getProperty() y setProperty(), addClass() y removeClass().

23.- Más funcionalidades de Element

Continuamos ofreciendo explicaciones sobre métodos de la clase Element de Mootols: empty(), destroy() y clone().

24.- Eventos en Mootools: Element Event

Primeras nociones para trabajo con eventos en elementos Mootools, vemos el método addEvent de la clase Element.

25.- Utilización de bind() en los eventos Mootools

El método bind() de funciones Mootools sirve para cambiar el ámbito de la variable this al invocar una función. Eventos Mootools se utiliza mucho, veremos por qué.

26.- Más sobre Eventos en Mootools. Método fireEvent

Continuamos viendo la clase Element.Event de Mootools, que contiene un método llamado fireEvent que sirve para lanzar eventos de cualquier elemento de la página.

27.- Ejemplo práctico de uso de Mootools - Texarea con cuenta de caracteres

Un ejemplo se uso de Mootools para recopilar y afianzar los conocimientos vistos hasta ahora en el manual de Mootools. Vamos a crear un textarea que cuenta los caracteres que se han escrito por el usuario.

28.- Native Array en Mootools

Características extendidas de los Arrays con Mootools, con diversas funciones y métodos para realizar cosas sobre tablas.

29.- Native Function Mootools

Diversos métodos que se pueden aplicar sobre una función, para extender y mejorar las posibilidades de trabajo con funciones en Mootools.

30.- Native Number en Mootools

Number es una librería de Mootools para trabajo con números, que aporta pocas pero útiles funcionalidades como redondeos, acotaciones y conversiones de formatos.

31.- Native String en Mootools

Funcionalidades que añade Mootools a la clase String, nativa de Javascript, para trabajo con cadenas de caracteres.

32.- Native Hash en Mootools

Hash de Mootools nos ofrece funcionalidades muy útiles para acceso a propiedades y métodos de objetos, para analizar objetos y recorrer todas sus propiedades o iterar con sus elementos.

33.- Native Event en Mootools

Una clase que nos ayuda a realizar tareas avanzadas con eventos en Mootools. Explicaremos la clase Native Event, cómo utilizarla y cómo parar la ejecución y propagación de eventos.

34.- Eventos de teclado con Mootools

Veamos cómo definir eventos de teclado, que se desatan cuando el usuario presiona las teclas del teclado, utilizando el framework Javascript Mootols.

35.- Efectos con Mootools

Comenzamos a estudiar los efectos que se pueden hacer con Mootools con la clase Fx y varias otras que heredan de ella.

36.- Método fade() para hacer un efecto de fundido

Aprendemos a utilizar el método fade() de la clase Element de Mootools, que sirve para hacer efectos de fundido con transparencia.

37.- Efecto highlight para destacar un elemento

Un efecto con Mootools para hacer una iluminación o resaltado de un elemento que se quiera destacar con respuesta a las acciones del usuario.

38.- Método tween de Mootools para efectos sencillos

Explicamos el método tween de Mootools, que sirve para hacer una transición sencilla entre dos valores de un atributo CSS.

39.- Fx.Tween de Mootools

La clase FX.Tween sirve para hacer efectos totalmente personalizables en Mootools, con una propiedad CSS, desde un valor a otro.

40.- Eventos de efectos en Mootools

Cómo definir eventos sobre efectos con Mootools y la clase Fx, para realizar cosas cuando se inicie el efecto o se termine.

41.- Chain de Mootools

Encadenando funciones y efectos Mootools por medio de la clase Chain, para una ejecución secuencial, uno a uno.

42.- Chain sobre Fx: encadenar efectos Mootools

Ahora veremos cómo encadenar diferentes efectos Mootools con la clase Fx que implementa Chain.

43.- Class Options de Mootools

La clase Options de Mootools provee de un mecanismo sencillo para que nuestras clases tengan opciones de configuración a los que se puede dar valores por defecto.

44.- window.getSize en Mootools

El método window.getSize de Mootools, para obtener tamaños de área del navegador y scroll de página. Dependiendo de la declaración Doctype funcionará bien o no en Internet Explorer.

45.- Ajax en Mootools

Bases para aprender a trabajar con Ajax utilizando el framework Javascript Mootools y la clase Request.

46.- Trabajar con la clase Request de Mootools

Explicación del proceso de creación de una conexión Ajax con Mootools y un par de ejemplos sencillos de utilización de la clase Request.

47.- Enviar datos por POST y GET en una llamada Ajax con Mootools

De una manera sencilla, en las llamadas Ajax con Mootools, podemos enviar datos tanto por método POST como GET a la página que solicitamos.

48.- Vídeo: Ajax con Mootools, ejemplos sencillos

Vídeo en el que mostraremos dos ejemplos muy sencillos de Ajax con el framework Javascript Mootools.

49.- Enviar un formulario por Ajax con Mootools

Cómo enviar un formulario con Ajax y mostrar los resultados en la propia página sin recargarla, con Mootools.

Descargas

Este manual puedes descargarlo en formato amigable para impresión y lectura en dispositivos a través de la App de DesarrolloWeb.com.

Compartir

Comentarios

Rael

04/6/2009
Fantástico tutorial de Mootools
Enhorabuena por este tutorial de Mootools, por fin aprendí a trabajar con este sistema que se me estaba rebotando.

jos_gregorio_yzarra

09/11/2010
jose
gracias por el aporte de verdad me interesa

isaac_macedo

19/9/2011
gracias
pues estoy comenzando con estas secciones de ajax y jquery... soy muy nuevo en este sentido asi q gracias por los manuales. son muy buenos y mas por que este website tiene muchos usuarios q pueden ayudar,

gracias x los recursos.

kalad

29/9/2011
gracias
Buen material, estoy iniciandome en mootools y el material es de ayuda aunque el pdf de la descargar no contiene todo el material disponible en indice online,,,, seria posible actualizar dicho pdf para su descarga, pues me interesa contar con este manual.