Primer ejemplo con Mootools

  • Por
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.
Como había dicho en la introducción de este manual de Mootools, el uso del framework 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. En DesarrolloWeb.com tenemos varios manuales de Javascript que nos van a servir para obtener las bases sobre el lenguaje y hasta conocimientos avanzados. Los podemos ver en la sección de Javascipt a fondo.

Además, para quien no sepa qué es Mootools y donde descargarlo, será necesario que comience por el principio del manual sobre Mootools.

En este ejemplo sólo tenemos que conocer unas cuantas cosas de Mootools.

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.

<script src="mootools -1.11.js" type="text/javascript"></script>

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.

Primero voy a poner un enlace al ejemplo en marcha para que se vea lo que hemos hecho.

El código del ejemplo es el siguiente:

<html>
<head>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
   <title>ejemplo básico con mootools</title>
   <script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function(){
   opaco_actual = 0;
   capa_transicion = null;
   cargado = true;
});
</script>   
</head>

<body>

<div id="texto_presentacion">Hola, esto es un texto para hacer una prueba con Mootools. Simplemente estoy alterando propiedades de el DIV donde está este texto.</div>
<br>

<form>
<input type="button" value="Opacidad 0%" onclick="$('texto_presentacion').setOpacity(0);">
<input type="button" value="Opacidad 25%" onclick="$('texto_presentacion').setOpacity(.25);">
<input type="button" value="Opacidad 50%" onclick="$('texto_presentacion').setOpacity(.5);">
<input type="button" value="Opacidad 75%" onclick="$('texto_presentacion').setOpacity(.75);">
<input type="button" value="Opacidad 100%" onclick="$('texto_presentacion').setOpacity(1);">
<br>
<br>
<input type="button" value="Tamaño 200px" onclick="$('texto_presentacion').setStyle('width', '200px');">
<input type="button" value="Pon borde" onclick="$('texto_presentacion').setStyle('border', '1px solid #ff0000');">
<input type="button" value="Tamaño 50%" onclick="$('texto_presentacion').setStyle('width', '50%');">
</form>

</body>
</html>


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.

$('texto_presentacion').setOpacity(0);

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.

$('texto_presentacion').setStyle('width', '200px');

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.

$('texto_presentacion').setStyle('border', '1px solid #ff0000');

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.

$('texto_presentacion').setStyle('width', '50%');

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 de nuevo el enlace para ver el ejemplo en marcha.

Este ejemplo era bastante sencillo, que viene bien para comenzar. Además hemos preparado otro sencillo ejemplo con Mootools que convendrá leer y realizar para ir obteniendo experiencia en la dinámica de trabajo y en las posibilidades de este framework Javascript. Para los que deseen ver otros ejemplos interesantes, algunos bastante más complejos, recomendamos también pasarse por el Taller de Mootools.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jorge Alberto

04/3/2008
Ola!!

El articulo esta muy bien, solo me surjen dos dudas.

1. se puede hacer ke cuando se pulse sobre las opciones el cambio se produzca con algun tipo de transicion o animacion?

2. En el codigo, hay una parte no explicada que no entiendo, es esta

<script>
window.addEvent('domready', function(){
opaco_actual = 0;
capa_transicion = null;
cargado = true;
});
</script>

gracias por el articulo, muy util.

Jorge

Rober_linux

18/3/2008
hola, quería apuntar que en el navegador Konqueror de KDE de linux la opacidad funciona parcialmente sólo cuando es al 0% y al 100%, Un saludo.

fany

23/6/2010
no me funciona el ejemplo
muchachos me descargue la version de mootools 1.11 la guarde en una carpeta, junto con el ejemplo, al ejemplo le ajuste el nombre de src gtal cual con el nombre que le puse al archivo descargado y aun asi cuando lo ejecuto me da errores en internet explorer

Hugo Miguel

23/9/2010
Ejemplo con Mootools
Excelente el artículo. Sólo me llevó unos minutos implementar los efectos, modificarlos a mi gusto y hasta agregar botones. Muchas gracias; una herramienta más para el diseño web.

Kira

08/9/2011
No me encuentra el mootools
Hola,
estoy implementando el ejemplo pero no me funciona. Me da un error en Firefox que dice JSon.encode is not a function, por lo que creo q no me encuentra la librería mootools..
Estoy ejecutando el ejemplo en una aplicación que ya tenía la librería en la ruta js/mootools.js y así lo indico en el código, pero no hay manera.
¿Me podéis ayudar?
Muchas gracias!!!

Kira

08/9/2011
Error encontrado
El problema estaba en que la librería mootools no se entiende bien con jquery. Finalmente me descargué un plugin de jquery: jquery.json-2.2.js, y he utilizado sus funciones.
Menos mal, llevaba varias horas con este tema!!
Saludos!

joelchaoss

15/10/2011
no me funciona la opacidad
no en tiendo porque no me funciona la opacidad yo descargue la version 1.1.4 el aumento del texto y el colocarlo en recuadro funciona perfectamente espero me puedan aclarar mi duda gracias saludos :)