jQuery Plugin: simpleAccordion
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 (
- ). 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.
- Incluye tu librería de jQuery favorita
- Incluye el plugin jquery.simpleAccordion.js
- Inicialízalo cuando el [DOM][1] esté cargado:
- Tu código debe ser algo como esto:
- Tómate una cerveza helada, ya estás listo.
- jQuery 1.2+
Modo de Uso:⌗
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)
ó para esto:
<pre class="language-markup"><code><ul id="id_elemento_2"><br />
<li class="cabeza">Elemento activo</li><br />
<li class="colapsable">Element collapsable</li><br />
</ul></code></pre>
<pre class="language-javascript"><code>$(document).ready(function(){<br />
$('#id_elemento_2').simpleAccordion({<br />
header: ".cabeza",<br />
collapsable: ".colapsable",<br />
speed: 200<br />
});<br />
});</code></pre>
[Ver ejemplo][2]{.verejemplo}
[Bajar jQuery simpleAccordion plugin v0.9][3]{.bajar} (.zip 24kb total con ejemplo)⌗
Requerimiento:⌗
[1]: http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/ “Enlace en CSSLab a “Iniciándose en el DOM”” [2]: http://www.csslab.cl/ejemplos/JQuery_Accordion/accordion.html “Enlace en CSSLab.cl a “Ver Ejemplo”” [3]: http://www.csslab.cl/ejemplos/JQuery_Accordion/JQuery_Accordion_v0.9.zip “Enlace en CSSLab.cl a “Bajar jQuery simpleAccordion Plugin””