Table of contents
ALM
MVC
TOC
Collapse the table of content
Expand the table of content

jQuery UI Accordion. Manual de uso avanzado

Microsoft Community Publishing Service|Última actualización: 26/05/2017
|
2 Colaboradores

©Jaime Peña Tresancos, 2015

Twitter: @jpt219

LinkedIn

Este artículo está dedicado al componente Accordion y agrega información a la dada en nuestro anterior trabajo:

jQuery UI Accordion. Manual de uso básico.

En el presente hablaremos de:

Qué es y qué proporciona el jQuery User Interface Accordion

Los componentes esenciales para su implementación en una página Web

Habilitaciones y deshabilitaciones del componente.

Modelo colapsable, lo que permite mostrar sólo sus títulos, si contenido desplegado.

Modelo de altura no automática, de tal forma que se ajuste al contenido.

¿Qué es el jQuery User Interface Accordion?

En concreto, el componente Accordion se trata de un conjunto de paneles colapsables, que contienen información que se despliega de forma similar a como lo hacen los acordeones. Véanse los ejemplos propuestos y las figuras adjuntas. Adviértase que el despliegue es en vertical, no en horizontal como en los acordeones musicales.

El lugar de Internet de referencia y descarga del componente Accordion, que es de lo que trataremos, es:

http://jqueryui.com/accordion/

Las capacidades que nos proporcionará las iremos desgranando en el anterior y sucesivos artículos, a vuelapluma son:

Grupos de paneles desplegables con contenido HTML completo –con pestañas con títulos-.

La adaptación a estilos predefinidos o más personalizados. Uso de temas.

Colapsables verticalmente –replegables y desplegables- por la acción de un clic sobre la pestaña.

Habilitaciones y deshabilitaciones.

Diversos tipos de alturas automáticas o no.

Apertura mediante el pase del ratón sobre la pestaña.

Ordenables –movibles de posición por arrastre-.

Habilitaciones y deshabilitaciones

Aquí trataremos dos posibilidades relacionadas con éste aspecto. La primera se refiere a la presentación inicial como deshabilitado –o habilitado si no se dice nada al respecto, es la opción por defecto-. La segunda es la posibilidad de deshabilitar y habilitar el sistema de acordeón al vuelo, una vez ya mostrada la página. Seguidamente veremos cómo y lo ilustraremos con un ejemplo completo.

Si partimos con la opción disabled, puesta a true, hará que inicialmente el sistema de presentación en acordeón sea mostrado, pero sin poder cambiarse de pestañas –deshabilitado-.

Por otra parte, para cambiar al vuelo, disponemos además de dos métodos:

MétodoFuncionalidad
disableDeshabilitará el sistema de presentación en acordeón. Será atenuado en Internet Explorer.
enableRestablecerá el sistema de presentación en acordeón.

El código del Listado 6, referente a las acciones de habilitación y deshabilitación, consta esencialmente de lo que sigue:

Obsérvese que hemos dispuesto la opción disabled con un valor true en la función de inicialización. Eso hará que al crearse la página el acordeón estará desplegado, pero deshabilitado. Se mostrará la primera pestaña con el panel desplegado, pero no podrá cambiarse.

Creamos también dos botones de comando que respectivamente habilitarán y deshabilitarán el sistema de acordeón, mediante los métodos antes comentados.

Nótense las respectivas funciones de respuesta onclick, programadas inmediatamente debajo de la función de inicialización del componente acordeón – en formato jQuery-.

Listado 6: Opciones y métodos de habilitación y deshabilitación del componente acordeón

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>jQuery UI Accordion - Disabled, enable &
    disable</title>

    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <script
    src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script
    src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <script>

    \$(function () {

    \$("\#accordion").accordion({

    disabled: true

    });

    });

    \$(function () {

    \$("\#habilitar").on('click', function () {

    \$('\#accordion').accordion('enable')

    })

    \$("\#deshabilitar").on('click', function () {

    \$('\#accordion').accordion('disable')

    })

    });

    </script>

    </head>

    <body>

    <div id="accordion">

    <h3>Olores</h3>

    <div>

    <h2 style="color: red">Olores básicos</h2>

    <ul>

    <li>Fragancia floral</li>

    <li>Leñoso o resinoso</li>

    <li>Frutal (no cítrico)</li>

    <li>Cítrico</li>

    <li>Olor químico</li>

    <li>Mentolado o refrescante</li>

    <li>Dulce</li>

    <li>Quemado o ahumado</li>

    <li>Descompuesto</li>

    <li>Rancio</li>

    </ul>

    </div>

    <h3>Colores</h3>

    <div>

    <h2 style="color: red">Colores fundamentales</h2>

    <ul>

    <li>Rojo</li>

    <li>Anaranjado</li>

    <li>Amarillo</li>

    <li>Verde</li>

    <li>Azul</li>

    <li>Añil</li>

    <li>Violeta</li>

    </ul>

    </div>

    <h3>Sabores</h3>

    <div>

    <h2 style="color: red">Teoría clásica de los tipos de
    sabores</h2>

    <p>

    La teoría clásica reconoce la existencia de sólo cuatro sabores:
    amargo, ácido, dulce, salado.

    Al contrario de la creencia popular, cada uno de estos sabores no
    tiene asociado una zona específica de la lengua como
    sensor específico.

    Las papilas gustativas de toda la superficie de la lengua son
    sensibles y reconocen los cuatro sabores,

    si bien ciertos nervios tienden a responder mejor a uno u otro de
    estos estímulos alimentarios y pueden incluso reconocer otros
    sabores

    (el del fierro, el de la tierra). Los sensores de la lengua que
    detectan los sabores básicos del salado y el amargo se llaman
    canales iónicos.

    </p>

    <p>Amargo</p>

    <p>Ácido</p>

    <p>Dulce</p>

    <p>Salado</p>

    </div>

    </div>

    <input type="button" id="habilitar" value="Habilitar" />

    <input type="button" id="deshabilitar" value="Deshabilitar" />

    </body>

    </html>

Acordeón habilitado.

Acordeón deshabilitado.

Modelo colapsable

Nuevamente encontraremos dos posibilidades, una primera es la capacidad de definir como colapsable o no –opción por defecto- el grupo de paneles de acordeón durante su creación. La segunda es activar o desactivar dicha opción al vuelo, una vez creada la página en el explorador.

Por colapsable entendemos que sólo se muestren las cabeceras de títulos, sin ninguno desplegado, es decir, sin ser mostrado el contenido de ningún panel hasta que se haga clic sobre su título para desplegarlo –y correspondientemente para replegarlo de nuevo, colapsarlo-.

Por defecto, los acordeones se muestran siempre con un título desplegado, el primero, los colapsables pueden tener todos los títulos sin desplegar. Véanse las figuras adjuntas.

Veamos ahora las posibilidades disponibles en nuestro ejemplo del Listado 7.

Con la opción collapsible puesta a true en la función de creación, se hará que inicialmente el sistema en acordeón sea mostrado como colapsable. Podremos colapsar todos los paneles y mostrar solamente los títulos.

Creamos también dos botones de comando que respectivamente harán no colapsable o nuevamente colapsable el sistema de acordeón.

Nótense las respectivas funciones de respuesta onclick, programadas inmediatamente debajo de la función de inicialización del componente acordeón – en formato jQuery-.

Listado 7: Modo de habilitación y deshabilitación de un acordeón colapsable

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>jQuery UI Accordion - Collapsible</title>

    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <script
    src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script
    src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <script>

    \$(function () {

    \$("\#accordion").accordion({

    collapsible: true

    });

    });

    \$(function () {

    \$("\#nocolapsable").on('click', function () {

    \$('\#accordion').accordion('option', 'collapsible', false)

    })

    \$("\#colapsable").on('click', function () {

    \$('\#accordion').accordion('option', 'collapsible', true)

    })

    });

    </script>

    </head>

    <body>

    <div id="accordion">

    <h3>Olores</h3>

    <div>

    <h2 style="color: red">Olores básicos</h2>

    <ul>

    <li>Fragancia floral</li>

    <li>Leñoso o resinoso</li>

    <li>Frutal (no cítrico)</li>

    <li>Cítrico</li>

    <li>Olor químico</li>

    <li>Mentolado o refrescante</li>

    <li>Dulce</li>

    <li>Quemado o ahumado</li>

    <li>Descompuesto</li>

    <li>Rancio</li>

    </ul>

    </div>

    <h3>Colores</h3>

    <div>

    <h2 style="color: red">Colores fundamentales</h2>

    <ul>

    <li>Rojo</li>

    <li>Anaranjado</li>

    <li>Amarillo</li>

    <li>Verde</li>

    <li>Azul</li>

    <li>Añil</li>

    <li>Violeta</li>

    </ul>

    </div>

    <h3>Sabores</h3>

    <div>

    <h2 style="color: red">Teoría clásica de los tipos de
    sabores</h2>

    <p>

    La teoría clásica reconoce la existencia de sólo cuatro sabores:
    amargo, ácido, dulce, salado.

    Al contrario de la creencia popular, cada uno de estos sabores no
    tiene asociado una zona específica de la lengua como
    sensor específico.

    Las papilas gustativas de toda la superficie de la lengua son
    sensibles y reconocen los cuatro sabores,

    si bien ciertos nervios tienden a responder mejor a uno u otro de
    estos estímulos alimentarios y pueden incluso reconocer otros
    sabores

    (el del fierro, el de la tierra). Los sensores de la lengua que
    detectan los sabores básicos del salado y el amargo se llaman
    canales iónicos.

    </p>

    <p>Amargo</p>

    <p>Ácido</p>

    <p>Dulce</p>

    <p>Salado</p>

    </div>

    </div>

    <input type="button" id="nocolapsable" value="No colapsable"
    />

    <input type="button" id="colapsable" value="Colapsable" />

    </body>

    </html>

Inicialmente y en cualquier momento, podremos activar el modo colapsable.

Apariencia de un acordeón con todos los paneles colapsados.

Modelo con altura no automática

Si optamos por el modo de presentación de altura no automática, hemos de indicarlo explícitamente, dado que no es la opción por defecto.

La altura no automática ajustará el alto del panel al contenido o, en su caso al total de la ventana del explorador si es que sus dimensiones son mayores. En el caso de la altura automática, todos los paneles tendrán la misma altura, la de aquel de mayor dimensión. Obsérvense las dos figuras que se muestran seguidamente.

Modo presentación de altura automática.

Modo de presentación con altura no automática; la altura se ajustará al contenido.

En el Listado 8 se muestra cómo fijar un modo de altura que se ajuste al contenido –altura no automática- en el momento de la creación del sistema de paneles en acordeón.

Listado 8: Ajuste de altura al contenido, modo de altura no automática

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>jQuery UI Accordion - No auto height</title>

    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    <script
    src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script
    src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

    <script>

    \$(function () {

    \$("\#accordion").accordion({

    heightStyle: "content"

    });

    });

    </script>

    </head>

    <body>

    <div id="accordion">

    <h3>Olores</h3>

    <div>

    <h2 style="color: red">Olores básicos</h2>

    <ul>

    <li>Fragancia floral</li>

    <li>Leñoso o resinoso</li>

    <li>Frutal (no cítrico)</li>

    <li>Cítrico</li>

    <li>Olor químico</li>

    <li>Mentolado o refrescante</li>

    <li>Dulce</li>

    <li>Quemado o ahumado</li>

    <li>Descompuesto</li>

    <li>Rancio</li>

    </ul>

    </div>

    <h3>Colores</h3>

    <div>

    <h2 style="color: red">Colores fundamentales</h2>

    <ul>

    <li>Rojo</li>

    <li>Anaranjado</li>

    <li>Amarillo</li>

    <li>Verde</li>

    <li>Azul</li>

    <li>Añil</li>

    <li>Violeta</li>

    </ul>

    </div>

    <h3>Sabores</h3>

    <div>

    <h2 style="color: red">Teoría clásica de los tipos de
    sabores</h2>

    <p>

    La teoría clásica reconoce la existencia de sólo cuatro sabores:
    amargo, ácido, dulce, salado.

    Al contrario de la creencia popular, cada uno de estos sabores no
    tiene asociado una zona específica de la lengua como
    sensor específico.

    Las papilas gustativas de toda la superficie de la lengua son
    sensibles y reconocen los cuatro sabores,

    si bien ciertos nervios tienden a responder mejor a uno u otro de
    estos estímulos alimentarios y pueden incluso reconocer otros
    sabores

    (el del fierro, el de la tierra). Los sensores de la lengua que
    detectan los sabores básicos del salado y el amargo se llaman
    canales iónicos.

    </p>

    <p>Amargo</p>

    <p>Ácido</p>

    <p>Dulce</p>

    <p>Salado</p>

    </div>

    </div>

    </body>

    </html>

Conclusiones

En el presente artículo hemos repasado funcionalidades avanzadas del componente jQuery User Interface Tabs. Con ellas estaremos en condiciones de implementar un sistema de paneles con habilitaciones y deshabilitaciones, colapsable y altura ajustable –es decir, no automática-.

Esperamos que todo lo expuesto les haya servido de ayuda. Hasta nuestro próximo artículo, felices horas de programación.

©Jaime Peña Tresancos, 2015

Twitter: @jpt219

LinkedIn:es.linkedin.com/pub/jaime-peña-tresancos/28/677/696

© 2018 Microsoft