JqueryUI - Acordeón
Accordion Widget en jQueryUI es un contenedor de contenido expandible y plegable basado en jQuery que está dividido en secciones y probablemente se ve como pestañas. jQueryUI proporciona el método accordion () para lograr esto.
Sintaxis
los accordion() El método se puede utilizar de dos formas:
$ (selector, contexto) .accordion (opciones) Método
El método accordion (options) declara que un elemento HTML y su contenido deben tratarse y administrarse como menús de acordeón. El parámetro de opciones es un objeto que especifica la apariencia y el comportamiento del menú involucrado.
Sintaxis
$(selector, context).accordion (options);Puede proporcionar una o más opciones a la vez utilizando el objeto Javascript. Si hay más de una opción para proporcionar, las separará con una coma de la siguiente manera:
$(selector, context).accordion({option1: value1, option2: value2..... });La siguiente tabla enumera las diferentes opciones que se pueden utilizar con este método:
| No Señor. | Opción y descripción |
|---|---|
| 1 | activo Indica el índice del menú que está abierto cuando se accede a la página por primera vez. Por defecto su valor es0, es decir, el primer menú. Option - active Indica el índice del menú que está abierto cuando se accede a la página por primera vez. Por defecto su valor es0, es decir, el primer menú. Esto puede ser de tipo:
Syntax |
| 2 | animar Esta opción se utiliza para configurar cómo animar los paneles cambiantes. Por defecto su valor es{}. Option - animate Esta opción se utiliza para configurar cómo animar los paneles cambiantes. Por defecto su valor es{}. Esto puede ser de tipo:
Syntax |
| 3 | plegable Esta opción cuando se establece en verdadera , permite a los usuarios cerrar un menú haciendo clic en él. De forma predeterminada, los clics en el encabezado del panel abierto no tienen ningún efecto. Por defecto su valor esfalse. Option - collapsible Esta opción cuando se establece en verdadera , permite a los usuarios cerrar un menú haciendo clic en él. De forma predeterminada, los clics en el encabezado del panel abierto no tienen ningún efecto. Por defecto su valor esfalse. Syntax |
| 4 | discapacitado Esta opción cuando se establece en verdadero desactiva el acordeón. Por defecto su valor esfalse. Option - disabled Esta opción cuando se establece en verdadero desactiva el acordeón. Por defecto su valor esfalse. Syntax |
| 5 | evento Esta opción especifica el evento utilizado para seleccionar un encabezado de acordeón. Por defecto su valor esclick. Option - event Esta opción especifica el evento utilizado para seleccionar un encabezado de acordeón. Por defecto su valor esclick. Syntax |
| 6 | encabezamiento Esta opción especifica un selector o elemento para anular el patrón predeterminado para identificar los elementos del encabezado. Por defecto su valor es> li > :first-child,> :not(li):even. Option - header Esta opción especifica un selector o elemento para anular el patrón predeterminado para identificar los elementos del encabezado. Por defecto su valor es> li > :first-child,> :not(li):even. Syntax |
| 7 | heightStyle Esta opción se utiliza para controlar la altura del acordeón y los paneles. Por defecto su valor esauto. Option - heightStyle Esta opción se utiliza para controlar la altura del acordeón y los paneles. Por defecto su valor esauto. Los valores posibles son:
Syntax |
| 8 | iconos Esta opción es un objeto que define los iconos que se utilizarán a la izquierda del texto del encabezado para paneles abiertos y cerrados. El icono que se utilizará para los paneles cerrados se especifica como una propiedad denominada encabezado , mientras que el icono que se utilizará para los paneles abiertos se especifica como una propiedad denominada headerSelected . Por defecto su valor es{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Option - icons Esta opción es un objeto que define los iconos que se utilizarán a la izquierda del texto del encabezado para paneles abiertos y cerrados. El icono que se utilizará para los paneles cerrados se especifica como una propiedad denominada encabezado , mientras que el icono que se utilizará para los paneles abiertos se especifica como una propiedad denominada headerSelected . Por defecto su valor es{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }. Syntax |
La siguiente sección le mostrará algunos ejemplos prácticos de la funcionalidad del widget de acordeón.
Funcionalidad predeterminada
El siguiente ejemplo demuestra un ejemplo simple de la funcionalidad del widget de acordeón, sin pasar parámetros al accordion() método.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:
Haga clic en los encabezados (pestaña 1, pestaña 2, pestaña 3) para expandir / contraer el contenido dividido en secciones lógicas, como pestañas.
Uso de plegable
El siguiente ejemplo demuestra el uso de tres opciones collapsible en el widget de acordeón de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:
Aquí hemos establecido collapsible en true . Haga clic en un encabezado en acordeón, esto permite contraer la sección activa.
Uso de heightStyle
El siguiente ejemplo demuestra el uso de tres opciones heightStyle en el widget de acordeón de JqueryUI.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-3" ).accordion({
heightStyle: "content"
});
$( "#accordion-4" ).accordion({
heightStyle: "fill"
});
});
</script>
<style>
#accordion-3, #accordion-4{font-size: 14px;}
</style>
</head>
<body>
<h3>Height style-content</h3>
<div style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>Guardemos el código anterior en un archivo HTML. accordionexample.htmy abrirlo en un navegador estándar que admita javascript, también debe ver el siguiente resultado. Ahora puedes jugar con el resultado:
Aquí tenemos dos acordeones, el primero tiene la opción heightStyle configurada como contenido , lo que permite que los paneles de acordeón mantengan su altura nativa. El segundo acordeón tiene la opción heightStyle configurada para llenar , el script establecerá automáticamente las dimensiones del acordeón a la altura de su contenedor principal.
$ (selector, contexto) .accordion ("action", params) Método
El método de acordeón ("acción", parámetros) puede realizar una acción sobre los elementos del acordeón, como seleccionar / deseleccionar el menú del acordeón. La acción se especifica como una cadena en el primer argumento (por ejemplo, "desactivar" desactiva todos los menús). Consulte las acciones que se pueden aprobar en la siguiente tabla.
Sintaxis
$(selector, context).accordion ("action", params);;La siguiente tabla enumera las diferentes acciones que se pueden utilizar con este método:
| No Señor. | Acción Descripción |
|---|---|
| 1 | destruir Esta acción destruye completamente la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio. Action - destroy Esta acción destruye completamente la funcionalidad de acordeón de un elemento. Los elementos vuelven a su estado previo al inicio. Syntax |
| 2 | inhabilitar Esta acción desactiva todos los menús. No se tendrá en cuenta ningún clic. Este método no acepta argumentos. Action - disable Esta acción desactiva todos los menús. No se tendrá en cuenta ningún clic. Este método no acepta argumentos. Syntax |
| 3 | habilitar Esta acción reactiva todos los menús. Los clics se vuelven a considerar. Este método no acepta argumentos. Action - enable Esta acción reactiva todos los menús. Los clics se vuelven a considerar. Este método no acepta argumentos. Syntax |
| 4 | opción (optionName) Esta acción obtiene el valor del elemento acordeón actualmente asociado con el optionName especificado . Esto toma un valor de cadena como argumento. Action - option( optionName ) Esta acción obtiene el valor del elemento acordeón actualmente asociado con el optionName especificado . Esto toma un valor de cadena como argumento. Syntax |
| 5 | opción Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de acordeón actual. Action - option Esta acción obtiene un objeto que contiene pares clave / valor que representan el hash de opciones de acordeón actual. Syntax |
| 6 | opción (optionName, valor) Esta acción establece el valor de la opción de acordeón asociada con el optionName especificado. Action - option( optionName, value ) Esta acción establece el valor de la opción de acordeón asociada con el optionName especificado. Syntax |
| 7 | opción (opciones) Esta acción establece una o más opciones para el acordeón. Action - option( options ) Esta acción establece una o más opciones para el acordeón. Donde opciones es un mapa de pares opción-valor para establecer. Syntax |
| 8 | actualizar Esta acción procesa los encabezados y paneles que se agregaron o eliminaron directamente en el DOM. Luego vuelve a calcular la altura de los paneles de acordeón. Los resultados dependen del contenido y de la opción heightStyle. Este método no acepta argumentos. Action - refresh Esta acción procesa los encabezados y paneles que se agregaron o eliminaron directamente en el DOM. Luego vuelve a calcular la altura de los paneles de acordeón. Los resultados dependen del contenido y de la opción heightStyle. Este método no acepta argumentos. Syntax |
| 9 | widget Esta acción devuelve el elemento del widget de acordeón; el anotado con el nombre de la clase ui-accordion . Action - widget Esta acción devuelve el elemento del widget de acordeón; el anotado con el nombre de la clase ui-accordion . Syntax |
Ejemplo
Ahora veamos un ejemplo usando las acciones de la tabla anterior. El siguiente ejemplo demuestra el uso del método option (optionName, value) .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-5" ).accordion({
disabled: false
});
$("input").each(function () {
$(this).change(function () {
if ($(this).attr("id") == "disableaccordion") {
$("#accordion-5").accordion("option", "disabled", true);
} else {
$("#accordion-5").accordion("option", "disabled", false);
}
});
});
});
</script>
<style>
#accordion-5{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-5">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div style = "margin-top:30px">
<input type = "radio" name = "disable" id = "disableaccordion"
value = "disable">Disable accordion
<input type = "radio" name = "disable" id = "enableaccordion" checked
value = "enable">Enable accordion
</div>
</body>
</html>Guardemos el código anterior en un archivo HTML. accordionexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:
Aquí demostramos la activación y desactivación de los acordeones. Seleccione los respectivos botones de radio para comprobar cada acción.
Gestión de eventos sobre elementos de acordeón
Además del método de acordeón (opciones) que vimos en las secciones anteriores, JqueryUI proporciona métodos de eventos que se activan para un evento en particular. Estos métodos de eventos se enumeran a continuación:
| No Señor. | Método y descripción del evento |
|---|---|
| 1 | activar (evento, ui) Este evento se activa cuando se activa un menú. Este evento solo se dispara en la activación del panel, no se dispara para el panel inicial cuando se crea el widget de acordeón. Event - activate(event, ui) Este evento se activa cuando se activa un menú. Este evento solo se dispara en la activación del panel, no se dispara para el panel inicial cuando se crea el widget de acordeón. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:
Syntax |
| 2 | beforeActivate (evento, ui) Este evento se activa antes de que se active un panel. Este evento se puede cancelar para evitar que el panel se active. Event - beforeActivate(event, ui) Este evento se activa antes de que se active un panel. Este evento se puede cancelar para evitar que el panel se active. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:
Syntax |
| 3 | crear (evento, ui) Este evento se activa cuando se crea el acordeón. Event - create(event, ui) Este evento se activa cuando se crea el acordeón. Donde evento es de tipo Evento y ui es de tipo Objeto . Los posibles valores de ui son:
Syntax |
Ejemplo
El siguiente ejemplo demuestra el uso del método de eventos en los widgets de acordeón. Este ejemplo demuestra el uso de eventos create , beforeActive y active .
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-6" ).accordion({
create: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>Created</b><br>");
},
beforeActivate : function (event, ui) {
$("span#result").html ($("span#result").html () +
", <b>beforeActivate</b><br>");
},
activate: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>activate</b><br>");
}
});
});
</script>
<style>
#accordion-6{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>Guardemos el código anterior en un archivo HTML. accordionexample.htm y ábralo en un navegador estándar que admita javascript, también debe ver el siguiente resultado:
Aquí mostramos un texto en la parte inferior, basado en eventos.