Vamos a otro ejemplo sencillo con Mootools para crear un scroll en una capa de la página.
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.
Lo primero aclarar que este artículo ya da por entendidos algunos conceptos que hemos visto en el manual de Mootools, por lo que será necesario leer los anteriores capítulos.
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:
mielemento.getSize().scroll.x
Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.
mielemento.getSize().scroll.y
Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.
El código de este sencillo ejemplo es el siguiente:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo 2 con Mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
</head>
<body>
<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">
<div style="width:100%;">
Hola, esto es un texto que voy a poner de prueba para hacer un scroll rápidamente con Mootools.
<br>
La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido.
<br>
En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside.cnet.com/wiki/mootorial/
<br>
Ahora tendría que intentar ir poco a poco para conocer todo el funcionamiento en detalle.
</div>
</div>
<br>
<script>
capa_desplazar = $('texto_scroll');
</script>
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a> // <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
</body>
</html>
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.
<script>
capa_desplazar = $('texto_scroll');
</script>
Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente el texto arriba o abajo.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>
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:
capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);
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.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
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.
Dejo de nuevo el enlace al ejemplo en funcionamiento.
Lo primero aclarar que este artículo ya da por entendidos algunos conceptos que hemos visto en el manual de Mootools, por lo que será necesario leer los anteriores capítulos.
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:
mielemento.getSize().scroll.x
Nos devolvería los píxel que se haya desplazado el elemento mielemento en la horizontal.
mielemento.getSize().scroll.y
Nos devolvería el desplazamiento vertical que se haya realizado sobre el elemento mielemento.
El código de este sencillo ejemplo es el siguiente:
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">
<title>Ejemplo 2 con Mootools</title>
<script src="mootools-comprimido-1.11.js" type="text/javascript"></script>
</head>
<body>
<div id="texto_scroll" style="overflow: auto; height: 70px; width: 400px;">
<div style="width:100%;">
Hola, esto es un texto que voy a poner de prueba para hacer un scroll rápidamente con Mootools.
<br>
La verdad es que este framework de javscript funciona muy bien y permite un desarrollo sorprendentemente rápido.
<br>
En pocos pasos y con absolutamente ningún conocimiento del Framework he conseguido hacer esta página. Me he ayudado de la documentación y de unos ejemplos que he encontrado en la página: http://clientside.cnet.com/wiki/mootorial/
<br>
Ahora tendría que intentar ir poco a poco para conocer todo el funcionamiento en detalle.
</div>
</div>
<br>
<script>
capa_desplazar = $('texto_scroll');
</script>
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a> // <a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
</body>
</html>
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.
<script>
capa_desplazar = $('texto_scroll');
</script>
Luego hay un par de enlaces que son los que, pulsándolos, desplazará automáticamente el texto arriba o abajo.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);">Abajo</a>
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:
capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y + 20);
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.
<a href="javascript:capa_desplazar.scrollTo(0, capa_desplazar.getSize().scroll.y - 20);">Arriba</a>
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.
Dejo de nuevo el enlace al ejemplo en funcionamiento.
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.
Espero que este segundo ejemplo haya ilustrado un poco más lo que es Mootools y algunas cosas que permite hacer con pocas líneas de código. Para encontrar nuevos ejemplos puedes echar un vistazo también al Taller de Mootools.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...