Mootools además de aportar una gran cantidad de efectos y soluciones a problemas contidianos en javascript nos permite hacer de forma muy fácil que nuestra página gane en dinamismo y que aporte un valor extra a ese contenido que ya disponemos.
Una de las formas de aportar información de forma elegante es el uso del famoso acordeón de Moo.fx. Ya que generalmente es un elemento bastante usable, o así lo veo yo, y permite ordenar la información de la web de una forma bastánte eficiente.
El problema radica generalmente en como hacer que esto funcione, ahi es donde entra MooTools… MooTools lo hace solo 😀 Es muy simple y veremos como tengo razón.
Preparando el código
Inicialmente hemos de preparar nuestro código para albergar el contenido que deseamos «acordeonizar» (me tienen que matar xDD).
<div id="mi_acordeon">
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
.....
</div>
En este ejemplo este vemos que hemos creado un <div></div> que albergará nuestro acordeón. Nuestro acordeón se compone de un <h2></h2> que hará de elemento que recibirá el click y desplegará el <div> con clase slider. Podremos repetir los elementos <h2></h2> y <div class="slider"></div> las veces que deseemos, siempre en esta posición, para hacer que nuestro acordeón sea más o menos grande.
El javascript
Aqui es donde entra MooTools y la magia de la facilidad. Simplemente tendremos que indicar los elementos que deseamos que se comporten como accionadores (no encontraba una palabra mejor) y los que serán los que contengan el contenido y se deslicen.
Para ello usaremos la función $$(), que te permite recoger un array de elementos mediante una pequeña expresión CSS.
var trig = $$('.trigger'); // Array de elementos que accionan.
var box = $$('.slider'); // Array de elemenos que se deslizan.
Una vez hecho esto solo tendremos que hacer que el objeto Accordion haga el resto.
new fx.Accordion(trig, box);Como habeis visto es realmente fácil, aunque aún nos queda una cosilla.
Puliendo la ejecución
Las páginas web se van cargando, para entendernos de arriba a abajo, por ese motivo si añadimos esta llamada en el <head></head> de nuestra página o en un fichero que se incluya arriba tendremos un problema para acceder a lo que se encuentre por debajo. Para entenderno, si yo defino algo encima del elemento <body></body> no puedo hacer referencia a él por que aún no está cargado, entonces el javascript nos causa un error. Además el tag que queremos usar debe estar cerrado, por lo tanto para el <body></body> tendremos que esperar a que se haya cargado la página entera.
Por este motivo javascript tiene un sistema de eventos que facilitan la tarea. Mediante el objeto window podremos añadir funcionalidades al evento onload del mismo objeto. Y de esta forma podremos asegurarnos que nuestro acordeón funciona coloquemos el código jasvascript donde queramos.
Código final
En definitiva, el código resultante sería algo asi.
window.onload = function() {
var trig = $$('.trigger');
var box = $$('.slider');
var ac = new fx.Accordion(trig, box);
// En una línea
//var ac = new fx.Accordion($$('.trigger'), $$('.slider'));
}
Pero además MooTools dispone de unas modificaciones sobre el objeto window que nos fácilita aún más la tarea, ya que nos permite, en este caso, apilar funcionalidades al onload de la página.
Window.onDomReady(function() {
var trig = $$('.trigger');
var box = $$('.slider');
var ac = new fx.Accordion(trig, box);
// En una línea
//var ac = new fx.Accordion($$('.trigger'), $$('.slider'));
});El objeto Accordion dispone de muchas opciones para modificar su apariencia, podrás verlas en la documentación oficial.
Conclusión
Algo a tener en cuenta en este formato de acordeón es que si por cualquier cosa el usuario no dispone de javascript en su navegador, podrá disfrutar del contenido de la página perfectamente. De esta forma conseguimos que PDA’s, móviles y lectores de pantalla nos puedan continuar leyendo y disfrutando de nuestros contenidos.
Código completo
Gracias Eberth! 😀
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
Window.onDomReady(function() {
var trig = $$('.trigger');
var box = $$('.slider');
var ac = new Fx.Accordion(trig, box);
// En una línea
//var ac = new Fx.Accordion($$('.trigger'), $$('.slider'));
});
</script>
</head>
<body>
<div id="mi_acordeon">
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
<h2 class="trigger">Click para abrir</h2>
<div class="slider">
<p>Aqui ponemos el texto grande y largo que deseemos</p>
</div>
</div>
21 comentarios, 1 referencias
+
#