Como había dicho en la introducción de este manual, Mootools puede resultar difícil para las personas que nunca han trabajado con él o con otro framework Javascript. Por eso tiene sentido hacer un ejemplo inicial muy simple para iniciarse. Este ejemplo realmente no sirve para nada, simplemente para que veamos la facilidad con la que se puede utilizar Mootools para realizar código Javascript compatible con todos los navegadores más habituales.

No obstante, hay que decir que para poder utilizar Mootools debemos tener antes un conocimiento medio o avanzado de Javascript, porque realmente lo que estamos haciendo en estos ejemplos es programar en Javascript funcionalidades para páginas web.

Para empezar, hay que incluir el código Javascript de las librerías de Mootools, esto se hace incluyendo el archivo externo de código Javascript con las librerías del framework, que hemos descargado de la página de Mootools.

La función $()
En Mootols utilizamos la function $() para recibir un objeto con un elemento de la página. $() recibe como parámetro el identificador del elemento, que se ha indicado con el atributo id de la etiqueta HTML de lo que queremos recibir.

Las librerías de Element.js, dentro del paquete llamado NATIVE, contienen varios métodos que podemos invocar sobre los objetos element, para realizar cosas con ellos, analizarlos o alterar su estado. Nosotros vamos a utilizar dos métodos de Element:

Método setOpacity()
Es para alterar la transparencia de un elemento. Recibe un valor entre 0 y 1 para definir cuanto de opaco o transparente que es un elemento. El valor 0 es transparente y el valor 1 es opaco del todo.

Método setStyle()
Para alterar cualquier estilo CSS del elemento. Recibe dos parámetros, el primero el nombre del estilo y el segundo el valor del estilo.

Con estos datos, ya conocemos todo lo que debemos saber de Mootools para entender el siguiente ejemplo.

El código del ejemplo es el siguiente:

Veremos que hemos incluido las librerías Mootools en el head de la página, con un archivo externo Javascript, cargado con la etiqueta <script>.

También debemos fijarnos que tenemos una capa, creada con un <div> que tiene el atributo id para especificar su nombre: id="texto_presentacion".

Luego, tenemos un formulario con una serie de botones, cada uno con un código Javascript que se ejecuta cuando el usuario hace clic sobre el botón.

La primera serie de botones alteran la opacidad del elemento.

Con $('texto_presentacion') recibimos un objeto que es el elemento que tenía el id="texto_presentacion". Luego sobre ese objeto invocamos el método setOpacity() pasando por parámetro el valor de opacidad. Con eso se cambia la transparencia de la capa.

Luego tenemos otra serie de botones que alteran algunos atributos de estilo del elemento.

Esto altera el atributo CSS width y lo cambia por el valor 200px, con lo que la capa texto_presentacion tendrá un ancho de 200 pixel.

Con esto aleramos el atributo CSS border, y le pasamos un nuevo valor que indica que tenga un borde sólido de 1 pixel y con color rojo.

Con esto último cambiamos de nuevo el atributo width para poner una anchura de 50%, es decir, la mitad del espacio disponible donde está el elemento.

Espero que el ejemplo haya sido suficientemente sencillo y claro para entender un poco la facilidad con la que podemos realizar acciones, más o menos complejas, en la página web. Todo sin preocuparnos de las particularidades de cada navegador. Podemos probarlo en distintos browsers para ver que funciona perfectamente, es decir, hemos conseguido un código cross-browser, compatible con todos los navegadores, con un trabajo casi nulo.

Dejo el enlace para ver el ejemplo en marcha.

Para continuar el manual de Mootools, vamos a ver un segundo ejemplo de gran sencillez para hacer un scroll en una capa por Javascript. Este sistema de scroll o desplazamiento sería muy complejo de hacer sin la ayuda del framework como Mootools. Nosotros lo vamos a hacer con una simple ejecución de una sentencia Javascript.

Ahora voy a poner el enlace al ejemplo en marcha para que podamos verlo en funcionamiento antes de pasar a visualizar el código.

El presente ejemplo utiliza el módulo llamado Element.Dimensions.js, que tiene dos métodos que nos van a servir para hacer el desplazamiento:

Método scrollTo()
Sirve para desplazar un elemento a una nueva posición. Recibe dos parámetros, las coordenadas X e Y a las que queremos desplazar el scroll del elemento.

Método getSize()
Sirve para obtener las dimensiones de un elemento, así como la posición actual del scroll o desplazamiento que se haya realizado sobre el mismo. Devuelve un objeto con una serie de propiedades que son las informaciones sobre tamaño y desplazamiento del elemento. Entre las propiedades tiene la que nos interesa, que se llama scroll y a su vez, scroll tiene dos propiedades que son las X e Y del scroll que se haya realizado. Por ejemplo:

Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.

Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.

El código de este sencillo ejemplo es el siguiente:

Como vemos, primero hemos incluido dentro del head de la página el script con el framework de Mootools, con la etiqueta <script>.

Luego hemos creado una capa con un texto y una serie de estilos CSS para que tenga un tamaño definido, que no permita ver el contenido completo del texto, y unas barras de desplazamiento para hacer el scroll.

A continuación hay un script que crea una variable global a la página que contiene la capa que queremos desplazar.

Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente el texto arriba o abajo.

Con "javascript:" metido en un href de un enlace, estamos indicando que se tiene que ejecutar esa sentencia javascript al pulsar el link. Y la sentencia es:

Eso indica que en la variable de la capa que habíamos creado antes, capa_desplazar, se tiene que ejecutar el método scrollTo(). Este método recibe como primer parámetro 0, porque no queremos desplazarlo horizontalmente. Luego como desplazamiento vertical ponemos el desplazamiento vertical del elemento + 20 píxel. El desplazamiento vertical actual del elemento lo sacamos con capa_desplazar.getSize().scroll.y, tal como habíamos explicado antes en este artículo.

El enlace de para desplazar el scroll hacia arriba sería muy similar al que acabamos de ver.

La única diferencia es que ahora hacemos un scrollTo() a cero en la horizontal y a el scroll actual - 20 píxel.

Espero que se haya entendido el ejemplo. Podemos ir a la documentación de Mootools, del módulo Element.Dimensions.js para obtener la descripción completa de los métodos que hemos utilizado.

Hasta aquí en este manual hemos visto un par de ejemplos muy simples sobre Mootools, este segundo un poco más práctico. Pero el objetivo no es sino expresar por medio de un código la sencillez con la que se programa con Mootools para conseguir efectos que de otra manera nos hubiera costado mucho trabajo programar. Y todo compatible con los navegadores más habituales.

Vamos a ver cómo crear un sistema de pestañas o tabs que responda a las acciones del usuario. De modo que, haciendo clic en las distintas pestañas, se muestren dinámicamente los contenidos asociados a los distintos items, en el mismo espacio y sin recargar los contenidos de la página. Es decir, tendremos varias pestañas y un área donde se mostrarán los contenidos relacionados con cada una. Inicialmente se mostrará un contenido de una pestaña y luego, cuando se seleccionen otras, se cambiará el color para mostrar la pestaña activa y se mostrará el contenido asociado a la nueva tab activa.

Quizás lo más fácil es ver el ejemplo en marcha para hacerse una idea exacta de nuestras intenciones.

Este artículo tiene una cierta intención:

Queremos mostrar cómo animar un sistema de pestañas y aplicar la interacción con el usuario, para que el sistema de tabs sea perfectamente funcional y sirva para mantener varios contenidos en un mismo espacio. Todo se debe hacer dinámicamente y respondiendo a las acciones del usuario. En este caso, el artículo sirve de colofón a una serie de artículos en los que venimos creando un sistema de tabs maquetados con CSS.

• Diseño de pestañas con CSS
• Pestañas CSS: mejora de detalles

Cambios sobre la maquetación CSS de las pestañas
En los dos artículos mencionados anteriormente hemos explicado los detalles de la creación de las pestañas a partir de listas HTML y estilos CSS.

Para aplicar el dinamismo con Javascript sobre esas pestañas hemos hecho un par de cambios en el código HTML y CSS de las pestañas.

Por una parte, hemos creado unas nuevas capas donde se muestran los contenidos que tienen que visualizarse cuando se active cada una de las pestañas. Inicialmente sólo uno de los contenidos asociados a los tab está visible, el que corresponde con la pestaña activa. Los demás los tenemos que ocultar de momento.

Por otra parte se han incorporado unos identificadores (atributos id) en los elementos que queremos dinamizar. Esos identificadores han sido colocados en las etiquetas LI de las pestañas y en las etiquetas DIV de los contenidos asociados a ellas. Serán importantes para acceder a los elementos desde Javascript.

El código HTML quedará de la siguiente manera:

Podemos haber observado además que los enlaces tienen unos códigos para definir el href y el evento onclick. En seguida los explicaremos.

También podremos observar que dentro del DIV con id="contenedorpestanas" se han colocado los distintos elementos que se van a asociar con cada una de las pestañas. A estos elementos les hemos colocado una clase CSS class="nover" para que inicialmente no estén a la vista. Sólo hemos dejado a la vista (sin el mencionado class="nover") el elemento asociado a la segunda pestaña, que es la que está activa.

La clase "nover" tendrá este código CSS:

Descargar y enlazar el framework Mootools
Ahora unas notas sobre Mootools, que es una herramienta que permite la programación de aplicaciones web del lado del cliente de una manera sencilla y compatible con todos los navegadores, ya que tiene clases, con sus propiedades y métodos para hacer cualquier cosa que podamos necesitar.

Este ejemplo lo hemos desarrollado con Mootools, por lo que, si no lo tenemos, debemos ir a la página de inicio del Framework para descargarlo: http://mootools.net

Haremos el download del "core" de Mootools, aunque en en vídeo que podrás ver más tarde explicaremos la forma de descargar una versión reducida del "core", dado que nuestro script es tan sencillo que no necesita incorporar todas las características del framework.

Para incluir Mootools en la página tenemos que crear una etiqueta script con la que enlazar con el código del framework:

Script Javascript que hace uso de Mootools para animar las pestañas
Por último podemos dar paso al script Javascript que vamos a utilizar para crear el dinamismo en las pestañas y la interacción con el usuario.

El dinamismo que tenemos que producir sólo tiene que hacer 1 cosa: estar pendiente de los clic del usuario sobre las pestañas, para mostrar en todo momento como activa la pestaña sobre la que se ha hecho clic y además presentar el contenido asociado a ese tab activo.

Para lo cual, voy a crear una función que se encargue de todo. Deberá recibir de algún modo la pestaña que se debe activar y básicamente hará estas acciones:

• Quitar la clase "activa" de todas las pestañas (realmente sólo necesitaría quitar la clase "activa" del tab que estaba seleccionado antes de esta llamada a la función, pero como no sé cuál es, pues simplemente quito la clase "activa" de todas las pestañas.
• Colocar la clase "activa" sobre la pestaña que se ha pulsado y que había recibido por parámetro.
• Ocultar el contenido asociado a todas las pestañas (aquí, de nuevo, hubiera sido suficiente ocultar el contenido asociado a la pestaña que estaba activa anteriormente, pero como no sé cuál era, pues me vale con ocultar todos los contenidos asociados a las tabs)
• Mostrar el contenido de la pestaña que se había pulsado.

Eso es todo. Pero para hacerlo antes voy a tener que crear unos arrays con todos los identificadores de las pestañas (etiquetas LI) y los contenidos asociados a éstas (etiquetas DIV que hay dentro del elemento "contenedorpestanas").

Estos arrays nos servirán para iterar sobre todos los elementos de todas las tabs.

Y ahora podemos ver la función cambiaPestana(), que recibe el índice de la pestaña que ha sido pulsada. Este índice es un número entero que corresponde con el valor de la nueva pestaña que tenemos que poner como activa. Recordemos que los Arrays comienzan por el índice cero, por lo que para activar la primera pestaña se tendrá que enviar a la función el índice de array con valor cero (0) y para activar la última, se debería pasar el índice tres (3), que en este caso corresponde con la cuarta y última pestaña.

El código lo hemos comentado para que se pueda entender mejor. No obstante, utiliza diversas llamadas a métodos de distintas clases Mootools para crear el dinamismo que resultaría imposible explicar si no se conoce el mencionado framework Javascript.

En concreto hace uso del método each() de Native Array, para recorrer todos los elementos de los arrays de identificadores creados anteriormente. También hace uso de la clase Element, para seleccionar elementos con la función dólar y para añadir y quitar clases CSS de los elementos de la página con los métodos addClass() y removeClass().

Por último, debemos realizar las llamadas a esta función, cuando se hace clic sobre los enlaces de las pestañas. Eso lo hemos conseguido con los atributos onclick de los enlaces, en los que hemos escrito la sentencia Javascript para llamar a la función pasando el índice de la pestaña que se debe activar.

Y sobre los href de los enlaces, decir que se llama a una función void() de Javascript, que no devuelve nada, para que simplemente el enlace no haga nada.

Ya lo tenemos todo, así que les recomendamos acceder al ejemplo en marcha, donde podrán ver también el código fuente completo de este sistema.

Mootools y reutilización del código
Lo que sí quiero remarcar es que este ejemplo está hecho para simplificar las cosas. No está desarrollado como me gustaría, pero al menos es sencillo y funcional. Mootools es un framework totalmente orientado a objetos y, a medida que lo vayamos dominando, experimentaremos que si hacemos todo por medio de clases, podremos reutilizar el código en diversos sitios o en páginas dentro de un mismo web.

Estamos viendo una serie de métodos para hacer efectos rápidos en Mootools. En el capítulo anterior dimos una introducción a lo que son los efectos de Mootools y queríamos empezar mostrando cómo hacer efectos recurridos y sencillos.

Fade() es un método muy rápido de usar y que sin duda resulta muy útil y bastante atractivo visualmente. Se trata de hacer lo que en inglés llaman un "fade in" o "fade out", que no es más que un efecto que muestra u oculta un elemento, con un fundido de transparente a opaco, o viceversa.

El método fade() se puede utilizar sobre cualquier elemento de la página que tengamos seleccionado o bien con la función dólar $() o la función dolardolar $$().

Por ejemplo, tenemos un elemento como este:

Podríamos hacer un fundido de opaco a transparente con la sentencia:

Ahora, para hacer un fundido de transparente a opaco, se puede invocar el método fade() de esta manera:

Un ejemplo completo de uso de fade() lo podemos ver a continuación, en el que tenemos un elemento y dos enlaces, uno para hacer un "fade in" y otro para hacer un "fade out", sobre ese elemento:

Podemos ver este ejemplo en marcha en una página aparte.