En muchas ocasiones tenemos que trabajar con jQuery y construir algún tipo de efecto que nos han solicitado y siempre andamos con los plazos muy justos. Así pues lo más habitual es buscar un plugin que nos implemente la funcionalidad de forma automática. Por lo tanto buscamos el plugin, lo cargamos como fichero de JavasScript y lo tenemos funcionando. Fin de la historia.
Plugins y problemas
Lamentablemente no siempre es el fin de la historia. La capa de presentación es algo que cambia mucho y que esta en constante evolución con lo cual es más que habitual que un cliente solicite varios cambios. Con lo cual tendremos que modificar la configuración de nuestro plugin y adaptarlo. El problema viene cuando el plugin no se puede adaptar de forma sencilla a lo que nos han pedido. Es ahí donde comienzan los sudores y podemos terminar dedicando muchas horas a una tarea que inicialmente nos llevo un par de horas entre buscar el plugin y configurarlo.
¿Usar siempre Plugins?
¿Es necesario usar siempre Plugins? Vamos a construir un sencillo acordeón con jQuery para ver cual puede ser el esfuerzo que tenemos que realizar si nosotros le construimos desde cero. Esto tendría la ventaja de que podemos modificarle a posteriori sin volvernos locos ya que nosotros hemos construido el código. Para empezar vamos a definir el contenido de la página:
<html>
<head>
</head>
<body>
-
Lista1
-
Opcion1
-
Opcion2
</li>
<li>Lista2
-
Opcion1
-
Opcion2
</li>
</body>
</html>
Se trata de una sencilla lista de elementos:
Vamos a configurar jQuery y construir un código inicial para que el acordeon aparezca completamente cerrado:
<head>
</head>
Ahora el acordeón aparecerá cerrado ya que hemos solicitado que los ul hijos se oculten :
Creación de Eventos
Vamos a añadir enlaces de tipo "a" y vamos a crear los eventos correspondientes en jQuery para poder desplegar las diferentes zonas del acordeón.
<head>
</head>
<strong></strong><body>
-
-
Opcion1
-
Opcion2
</li>
<li><a href="#">Lista2</a>
-
Opcion1
-
Opcion2
</li>
</ul>
</body>
</html>
Con esta modificación creamos links en el documento y cuando les pulsamos la zona se vuelve a mostrar:
El siguiente paso será que el acordeón sea capaz de volver a cerrarse para ello usaremos el método .next() de jQuery que se mueve al siguiente nodo, el metodo .is() y el selector :visible para mostrar o ocultar una zona:
<head>
</head>
SlideDown
Vamos a comenzar a optimizar un poco el código para que sea más claro y nos acerque a lo que nosotros deseamos.
<head>
</head>
En esta primera modificación unicamente hemos cacheado el selector $listaHija y cambiado los métodos .show() y .hide() por .slideDown() y .slideUp() que realizan un efecto persiana.
Método Toggle
Vamos a apoyarnos en el método slideToggle para reducir de forma drástica el código que tenemos. Este método muestra o oculta una zona con el efecto de persiana.
<head>
</head>
Por último podemos dejar de cachear las listaHijas ya que solo las utilizamos una vez:
<head>
</head>
Al final el acordeón son solo tres lineas de código. Si conocemos un poco jQuery en muchas ocasiones podremos construir soluciones muy válidas con muy poco código. Los plugin son más necesarios cuando las necesidades aumentan su complejidad de forma clara.
En GenBetaDev :JQuery Novice to Ninja
