Crear un acordeón horizontal en jQuery

martes, octubre 26, 2010
COMPARTE EL POST

acordeon

Se le llama acordeón o menú deslizante horizontal a aquel elemento que creamos para que ya sea que automáticamente se deslicen los elementos mostrando información, o que nosotros al darle clic a un elemento de deslice sólo ese elemento y los demás se oculten.

Después del salto les voy a enseñar a usar Easy Accordion que nos permite configurar y crear acordeones de forma muy fácil. Su implementación es muy sencilla, y lo mejor de todo es que podemos usar CSS para configurar todo, por lo que no necesitaremos de mucho esfuerzo para darle un toque personal, les dejo los links de ejemplo y de la página oficial para que lo chequen pero después del salto el código de implementación.

Pagina Web: jQuery Plugin: Easy Accordion

Demos: http://www.madeincima.eu/samples/jquery/easyAccordion/

Descarga: Easy Accordion plugin full sample here (250KB – zip file)

HTML

para poder configurar el acordeón en la parte de HTML les dejo el código:

<div id="your-accordion-container">
<dl>
<dt>Title slide</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
<dt>One more</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
<dt>Another slide</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
</dl>
</div>



Podemos ver primero  que el id es opcional y puedes colocar el nombre que quieras, pero debes recordarlo para configurarlo en jQuery. Es muy fácil saber que en las etiquetas <dt></dt> va el título de la pestaña del acordeón, y que donde dice “You can put here any kind of content (divs, text, images, etc.)...” puedes poner tu texto o imágenes o lo que quieras.



Parámetros en jQuery



Del lado de jQuery recuerden que tenemos que adjuntar o mandar a llamar el archivo de acordeón para que después de eso declaremos un nuevo objeto:




$('#your-accordion-container').easyAccordion();



El nombre debe ser el que colocaron en el código HTML así que no se les olvide. Y para poder hacer que el acordeón se pase de elementos automáticamente podemos configurarlo así:




$('#your-accordion-container').easyAccordion({ 
autoStart: true,
slideInterval: 5000
});



Ahora si, podemos configurar de una forma muy fácil este acordeón que para mí está muy bueno y muy bien construido, espero les haya gustado el tutorial y prueben instalarlo en su sitio web.

¡Síguenos en Twitter!


Deja tu comentario