Contenido

Hagamos un acordeón con MooTools

28 Mar

+ 22

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>
  • creo que podrías poner un ejemplo de código completo, o mejor dicho, publica el código ‘meloncillo’ que si no no me entero de nada! xDDD

  • Muchisisisisisismas Gracias!!!
    algo así es como lo que andaba buscando, casi no hay tutoriales paso a paso de mootools!!

    Al principio no me quedaba y como siempre cuando quiero intentar hacer algo con mootools comenzaba a frustrarme, pero la web developer toolbar me mostraba que había errores y lo que tuve que hacer para que funcionara es:
    -> Sustituir $S en tu código por $$
    -> Sustituir fx en tu código por Fx

    ya con eso funcionó de maravilla, ojalá te sea posible seguir publicando tutoriales por el estilo, porque creo que solo así voy a poder entenderle un poquillo a mootools.

    n37, subí lo que hice con el tutorial aquí, espero te sea de utilidad.

    http://www.sendspace.com/file/0ve18a

  • La verdad es que es super útil.
    Yo encontré un tutorial similar a este hace unas semanas y decidí aprovecharlo para desarrollar mi primer tema para WordPress usando este efecto.

    El problema que yo le veo es que, al requerir muchas funciones de Mootools, luego hay algunos problemas a la hora de implementar cosas como Lightbox y similares pero bueno, alguna pega tenía que tener ¿no? 😀

  • #3 En lugar de usar lightbox puedes usar SlimBox que es la versión de Lightbox para MooTools y aprovechas todas las funcionalidades que MooTools ofrece.

    Saludos

  • Si, es una de «esas» cosas que tengo pendientes 😀

    Asias de todas formas por el consejo compañero.

    Ciao

  • Andrés, en los primeros ejemplos de código donde dice new fx.Accordion debería decir new Fx.Accordion, que es como lo tenes en el ejemplo final…sino no anda.

    Saludos,

  • Muy bueno. Eso si, como podrias para abrir los DIV del acordeon desde otra pagina, es decir di tu pagina tiene:

    1.
    2.
    3.

    y desde otra pagina quieres que se despliegue solo uno de estos el 1 o el 2 o el 3?.
    Saludos

  • QUICIERA SAVER CUANTO CUESTA UN ACORDEON

  • QUIERO UN ACORDEON PORQUE SON MUY BONITO

  • Hola,

    Gracias por la explicación! Estaba intentando crear el efecto acordeón con mootools, pero haciendo que las variables sean:

    var trig = $$(‘thead’);
    var box = $$(‘tbody’);

    Es decir, que al hacer clic en un thead nos muestre el tbody.

    Es esto posible? A mi no me funciona.

    Gracias.

  • Hola, tengo un problemilla con el codigo porque intento aplicarle estilo en css a #mi_acordeon, #mi_acordeon h2 y .slider y no me muestra los estilos, a pesar de que el resto de estilos definidos en la hoja de estilos si los carga.

    Por que puede ser? Gracias.

  • Buenas Rocky, ¿¿tienes algún sitio donde poder verlo??

  • La verdad que a mi no me resulto demasiado util, siento que mas bien perdi el tiempo leyendo este tutorial que la verdad no funciona, agradezco igual la intencion, pero a la frustracion de no aprender mootools debido a la pesima documentacion oficial,se suma que los ejemplos que dan o no funcionan, o en el mejor de los casos explican con surte el 50% de los pasos a seguir, creo que mejor sera darle al flash y no perder tiempo con esta clase de juguetes, una pena.

  • Buenas SuperCharly, la verdad es que todo va en relación a las capacidades de la persona que quiere aprender, una pena.

  • Perdon, solo es que crei que debia ser accesible a todos los que nos sentimos interesados, no solo a personas con determinadas capacidades (y pensar que crei que tener el certificado «Java Certified Developer» de Sun me convertia en alguien capaz, se ve que me equivoque!!, con cariño, jaja)

  • Hola
    Antes de nada gracias por este blog que a muchos nos sirve de ayuda.

    He probado este acordeón y funciona perfectamente en firefox pero no funciona en iexplorer (¿qué raro?)

    ¿Podríais darme alguna idea para hacer que funcione?

    Podéis verlo aquí: http://www.conmasarte.es en la sección que pone ¿Cómo comprar?

  • Buenos días.
    Hasta que porfin encontre lo que buscaba.
    Pero como no soy experto la verdad no logro que me funcione.
    Hago tal cual como explica el ejercicio pero no me funciona.
    Debo instalar algo?, algun componente?
    Si necesito un componente cual es y donde lo bajo. Exactamente cual componente es.
    o como se debo hacer para que funcione?.
    Mucha suerte y gracias por su ayuda

  • Hola
    He visto muchos acordeones y este es uno de los que más me gustan. En Firefox se ve perfecto pero en Explorer se me crean unos espacios enormes entre apartado y apartado. Funcionar funciona pero no se como evitar esas separaciones. ¿Alguien me puede echar una mano? Gracias a todos

  • no veas Andrés que fauna hay por aquí!! el que quiere un acordeón es la polla y el certificado en java otro iluminado que no conoce la diferencia entre un navegador y una máquina virtual.

    Venia buscando a ver si ponías cómo abrir por defecto uno de los submenus, ya que por defecto pilla el primero, pero eso seguro que viene en la referencia del objecto en cuestión. Ná, me busco la vida por ahí.

    Ala, saludos!

  • Muy bueno el tuto!!

    Yo también he usado el acordeón, pero en horizontal, la verdad es que no ha quedado mal, y como lo he juntado con otros efectos de mootools (sorprendete la potencia de esta librería) ha quedado (en mi modestia opinión) bastante bien.

    Saludos y no dejes de iluminarnos con tus tutoriales!!!


    Fran

  • ¿No es más fácil programarlos? A mí me llevó 38 líneas de código. No es tan difícil, es más problemático estar jugando con frameworks que hacer librerías propias y efectos que funcionen de manera adecuada y comprensible para el que lo utiliza.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.