Compartir
Publicidad

jQuery Acordeones y Plugins

jQuery Acordeones y Plugins
0 Comentarios
Publicidad
Publicidad

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>
<ul>
<li>Lista1
    <ul>
    <li>Opcion1</li>
    <li>Opcion2</li>
    </ul>
</li>
<li>Lista2

<ul>
    <li>Opcion1</li>
    <li>Opcion2</li>
    </ul>
</li>
</body>
</html>

Se trata de una sencilla lista de elementos:

001desplegable-1.jpg

Vamos a configurar jQuery y construir un código inicial para que el acordeon aparezca completamente cerrado:

<head>
<script src="jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();

    });

</script>
</head>

Ahora el acordeón aparecerá cerrado ya que hemos solicitado que los ul hijos se oculten :

002cerrado.jpg

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>
<script src="jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();
            $("a").click(function() {

                $(this).next().show();
            })

    });

</script>
</head>    
<strong></strong><body>
<ul>
<li><a href="#">Lista1</a>
    <ul>
    <li>Opcion1</li>
    <li>Opcion2</li>
    </ul>
</li>
<li><a href="#">Lista2</a>

<ul>
    <li>Opcion1</li>
    <li>Opcion2</li>
    </ul>
</li>
</ul>
</body>
</html>

Con esta modificación creamos links en el documento y cuando les pulsamos la zona se vuelve a mostrar:

003abierto-2.jpg

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>
<script src="jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();
            $("a").click(function() {

                if(!$(this).next().is(":visible")) {

                    $(this).next().show();

                }
                else {

                    $(this).next().hide();
                }

            })

    });

</script>
</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>
<script src="jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();
            $("a").click(function() {

                var $listaHija=$(this).next();
                if(!listaHija.is(":visible")) {

                    $listaHija.slideDown();

                }
                else {

                    $listaHija.slideUp();
                }

            })

    }
</script>
</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>
<script src="jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();
            $("a").click(function() {

                var $listaHija=$(this).next();
                $listaHija.slideToggle();
            })

    });

</script>
</head>

Por último podemos dejar de cachear las listaHijas ya que solo las utilizamos una vez:

<head>
<script src="jquery-1.11.1.js" type="text/javascript"    charset="utf-8"></script>
<script type="text/javascript">

    $(document).ready(function() {

            $("li>ul").hide();
            $("a").click(function() {

             $(this).next().slideToggle();
            })

    });

</script>
</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

Temas
Publicidad
Comentarios cerrados
Publicidad
Publicidad
Inicio