BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Easy Accordion jQuery plugin. Un acordi贸n horizontal con Jquery

07/OCT/2010 17.781 visitas Ver comentarios
Easy Accordion jQuery plugin. Un acordi贸n horizontal con Jquery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Hace unas semanas, desarrollando un proyecto, me encontré con la necesidad de utilizar un plugin en jQuery para mostrar distintas opciones o destacados de una web, sin utilizar el típico slide o rotación de imágenes, porque, además de querer contenido en texto, quería no utilizar imágenes ni flash. Por esa razón me decidí por un acordión horizontal en jQuery.

Luego de buscar y descubrir opciones (de pago eso sí) como el archiconocido Slidedeck, pensaba que tenían que existir otros plugins ´gratis´ y entonces me encontré con jQuery Easy Accordion Plugin.

jQuery Easy Accordion es un plugin para jQuery que se encarga mediante un poco de CSS y javascript de tomar el contenido definido dentro de unas listas de definición y ejecutar un acordión que puede ser tanto configurado para usarlo manual como automáticamente.

Su aplicación es muy sencilla y la voy a desarrollar en los códigos posteriores, solo se necesita el plugin .JS (obviamente la librería jQuery), un poco de CSS y tu xHTML con el contenido.

Principales características:

Fácil de crear un efecto de acordeón agradable y suave
Decidir si se ejecuta automáticamente o mediante clicks
Insertar varias instancias del acordeón en la misma página
Definición de la diapositiva activa cuando el usuario carga la página
Incluir o eliminar el número de diapositiva
El texto se rota utilizando las propiedades CSS. No hay necesidad de imágenes!
Es totalmente personalizable mediante CSS: altura, el ancho y rellenos, uso de imágenes de fondo y así sucesivamente
Accesible y SEO
Deslice cualquier tipo de contenido (divs, simple texto, imágenes, listas, etc)
Menos de 8 KB!
No hay dependencias

Realmente te recomiendo que le eches un vistazo a su demo: jQuery Easy Accordion

Código 1 - XHTML
<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>
Código 2 - JAVASCRIPT
$('#your-accordion-container').easyAccordion({ 
   autoStart: true,
   slideInterval: 3000,
   slideNum: false	
});
Código 3 - CSS
/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
		
.easy-accordion {display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
		 
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
		
dd p{line-height:120%}

#accordion-1 {width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-1 dl{width:800px;height:245px}	
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 19 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!