Un nuevo plugin para jQuery sale a la luz. Nuevamente, iluminado por una necesidad en un proyecto web, qué mejor que hacer las cosas a mi manera y al mismo tiempo aportar al mundo con algo que quizás le será útil a alguien más.
Un colega necesitaba hacer una sección de Preguntas Frecuentes (FAQ) y que las respuestas a las preguntas se desplegaran mediante el efecto de acordeón. Bastante simple, ¿no? Bueno, como sabrán le recomendé que lo más semántico era utilizar listas de definición (<dl>). Pero los plugins que encontraba eran muy grandes para lo poco que necesitaba (10kb+), y necesitaban además de otros plugins de jQuery para funcionar, como el Dimensions, lo que hacía que pesara aún más el total. Así que construí uno simple, customizado y parametrizable, y que finalmente pesa apenas 1kb.
Modo de Uso:
- Incluye tu librería de jQuery favorita
- Incluye el plugin jquery.simpleAccordion.js
- Inicialízalo cuando el DOM esté cargado:
$(document).ready(function(){
$('#id_elemento').simpleAccordion();
});Algunos parámetros:
- header: "selector" (cualquier etiqueta, class o id que activará el evento; <dt> es por defecto)
- collapsable: "selector" (igual que el anterior; <dd> es por defecto)
- speed: integral (un número en milisegundos ó las velocidades "slow", "normal" ó "fast"; fast es por defecto)
- Tu código debe ser algo como esto:
<dl id="id_elemento">
<dt>Elemento activo</dl>
<dd>Elemento colapsable</dd>
</dl>ó para esto:
<ul id="id_elemento_2">
<li class="cabeza">Elemento activo</li>
<li class="colapsable">Element collapsable</li>
</ul>$(document).ready(function(){
$('#id_elemento_2').simpleAccordion({
header: ".cabeza",
collapsable: ".colapsable",
speed: 200
});
}); - Tómate una cerveza helada, ya estás listo.
Bajar jQuery simpleAccordion plugin v0.9 (.zip 24kb total con ejemplo)
Requerimiento:
- jQuery 1.2+
Comentarios
Elemento activo
Elemento colapsable
</dl
???
[code]
Elemento activo
Elemento colapsable
[/code]
PD: hace falta un pequeño editor para los comentarios para poder ponde código 😛 no me se los tags de memoria.
Bueeena man, sigue así…. uno de estos días, luego hacemos sociedad y mandas a ese piche argentino chanta.
Hola,
Felicidades por el trabajo, el plugin es bueno y ligero.
He encontrado un pequeño salto en Firefox 3 cuando se utilizan imágenes en la zona collapsable.
En IE7 se ve perfectamente el desplazamiento.
Saludos. Buen trabajo.
Por cierto, acabo de arreglarlo (al menos en al caso en que lo estoy usando):
Como, al deslizarse, bajaba más de la altura del dd y luegoi la recuperaba, he dado una altura fija al dd y overrflow:hidden.
Ahora ya no se ve el salto en firefox 3.
Un saludo de nuevo
Muy bueno, LOL, ya trabajas en Jquery super que bien, me acuerdo cuando apenas empezabas con Mootools 😀