Hay muchas formas de realizar pestañas y acordeones pero definitivamente jQuery y su paquete de librerías jQuery UI nos brindan la manera más rápida y eficiente de implementar estos elementos.
Pestañas
Las pestañas nos permiten agrupar la información de nuestro sitio web por tópico, esto permitiéndole a los usuarios conseguir información relevante de manera rápida y sencilla solo con seleccionar la pestaña que deseen.
El método tabs()
El método tabs(options) declara que un elemento del HTML y su contenido debe desplegarse en pestañas, los parámetros de las opciones es un objeto que especifica la apariencia y el comportamiento de las pestañas.
El método tabs() se puede usar de dos formas:
• $(selector, context).tabs (options)
• $(selector, context).tabs ("action", params)
Veamos un ejemplo de la implementación del mismo:
<script src="http://code.jquery.c...1.js"></script>
<script src="http://code.jquery.c...i.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
$(function() {
$( "#tabs" ).tabs();
});
</script>
Aquí el código completo para que lo puedan probar:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.c.../jquery-ui.css" />
<script src="http://code.jquery.c...1.js"></script>
<script src="http://code.jquery.c...i.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab prueba 1.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Tab prueba 3.</p>
</div>
</div>
</body>
</html>
Acordeón
Al igual que las pestañas, el acordeón organiza la información con la particularidad que lo hace por bloques en el cual solo se desplegará la información del bloque que se haya seleccionado mientras los demás permanecen ocultos.
El método accordion()
El método accordion(options) especifica que un elemento del HTML y su contenido será gestionado como menús de tipo acordeón. Al igual que el método de tabs, las opciones nos especificaran el comportamiento y apariencia del mismo.
El método accordion() se puede usar de dos formas:
• $(selector, context).accordion (options)
• $(selector, context).accordion ("action", params)
Veamos un ejemplo de la implementación del mismo:
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
Pestañas
Las pestañas nos permiten agrupar la información de nuestro sitio web por tópico, esto permitiéndole a los usuarios conseguir información relevante de manera rápida y sencilla solo con seleccionar la pestaña que deseen.
El método tabs()
El método tabs(options) declara que un elemento del HTML y su contenido debe desplegarse en pestañas, los parámetros de las opciones es un objeto que especifica la apariencia y el comportamiento de las pestañas.
El método tabs() se puede usar de dos formas:
• $(selector, context).tabs (options)
• $(selector, context).tabs ("action", params)
Veamos un ejemplo de la implementación del mismo:
- Incluimos los archivos necesarios, las librerías de jQuery y los CSS:
<script src="http://code.jquery.c...1.js"></script>
<script src="http://code.jquery.c...i.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
- Creamos nuestra instancia del método tabs() y lo asociamos a un selector:
$(function() {
$( "#tabs" ).tabs();
});
</script>
- Por último en nuestro HTML creamos el contenido que será formateado en nuestras pestañas, es importante mencionar que debe cumplir con la estructura etiquetas <div> luego las etiquetas <ul> y por último etiquetas <div> para que el método identifique cada pestaña.
Veamos como queda este ejemplo en nuestro navegador:
Aquí el código completo para que lo puedan probar:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.c.../jquery-ui.css" />
<script src="http://code.jquery.c...1.js"></script>
<script src="http://code.jquery.c...i.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab prueba 1.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Tab prueba 3.</p>
</div>
</div>
</body>
</html>
Acordeón
Al igual que las pestañas, el acordeón organiza la información con la particularidad que lo hace por bloques en el cual solo se desplegará la información del bloque que se haya seleccionado mientras los demás permanecen ocultos.
El método accordion()
El método accordion(options) especifica que un elemento del HTML y su contenido será gestionado como menús de tipo acordeón. Al igual que el método de tabs, las opciones nos especificaran el comportamiento y apariencia del mismo.
El método accordion() se puede usar de dos formas:
• $(selector, context).accordion (options)
• $(selector, context).accordion ("action", params)
Veamos un ejemplo de la implementación del mismo:
- Incluimos los archivos necesarios, las librerías de jQuery y los CSS:
- Creamos nuestra instancia del método accordion() y lo asociamos a un selector:
<script>
$(function() {
$( "#accordion" ).accordion();
});
</script>
- Por último creamos nuestro HTML respetando la estructura de una etiqueta <div> general seguida de otra etiquetas <div> que servirán para identificar cada bloque.
Nuestro ejemplo se verá así en el navegador:
