Como crear pestañas o tabs en JavaScript con jQuery

¡Comparte nuestro contenido!

Aunque en una ocasión anterior aprendimos a crear ventanas de diálogo con JavaScript, en esta ocasión crearemos pestañas o tabs usando el subconjunto de librerías de jQuery conocido como jQueryUI. Esta librería nos ofrece la ventaja de crear objetos típicos de interfaz de usuario como ventanas, pestañas o sliders con poco código.

Preparemos los elementos a mostrar en nuestras pestañas

En nuestro editor de código preferido, iniciemos un nuevo archivo en formato HTML, con la siguiente estructura base:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Prueba de Tabs en jQueryUI</title>
    </head>
    <body>
    </body>
</html>

Después de eso, coloquemos un <div> con un ID y dentro una lista de tipo <ul> con tres elementos:

<div id="categorias">
   <ul>
      <li><a href="#cat1">Frutas</a></li>
      <li><a href="#cat2">Verduras</a></li>
      <li><a href="#cat3">Legumbres</a></li>
   </ul>
</div>

Coloquemos un <div> con la primera categoría:

<div id="cat1">
   <p>Se denomina fruta a aquellos frutos comestibles obtenidos de plantas cultivadas o silvestres que, por su sabor generalmente dulce-acidulado, su aroma intenso y agradable y sus propiedades nutritivas</p>
</div>

Luego la segunda categoría:

<div id="cat2">
   <p>Las verduras son hortalizas cuyo color predominante es el verde. Sin embargo, el uso popular suele extender su significado a otras partes comestibles de las plantas, como hojas, inflorescencias y tallos</p>
</div>

Y por último, la tercera categoría:

<div id="cat3">
   <p>Se denomina legumbre (del latín legumen) a la semilla contenida en las plantas de la familia de las Leguminosas.</p>
</div>

Y el resultado se ve así hasta el momento.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Descargando jQueryUI para nuestro trabajo

Necesitamos descargar jQueryUI, así que iremos directo hacia su página oficial. Al momento de escribir este artículo, la versión disponible es la 1.12.1. Demos un clic en Custom download.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

La siguiente pantalla es llamada Download builder, lo primero será elegir la versión de jQueryUI que queremos, en este caso la 1.12.1. También podemos quitar algunos componentes que no necesitemos.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Finalmente, elegimos un tema para los componentes (el tema base está bien) y presionamos Download.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Guardemos el archivo en nuestra carpeta de trabajo.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Localizado el archivo .zip que descargamos, lo siguiente es extraer su contenido (Esto puede variar de acuerdo al software que utilice en su computadora)

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Después de extraer todo el contenido, la estructura de la carpeta que se creo debe ser similar a esta.

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Incluyendo jQueryUI en nuestro código

Dentro de la carpeta external, esta el primer archivo que necesitamos incluir, que es la base de jQuery.

<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>

Afuera, sobre la raíz de la carpeta de jQueryUI, se encuentra el archivo jquery-ui.min.js que es la versión de producción, usaremos ese archivo.

<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>

Y llamaremos a su hoja de estilos en versión de producción.

<link href="jquery-ui-1.12.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css" />

Al momento, nuestro código se ve así:

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Pongamos nuestras pestañas a funcionar

Insertamos un fragmento de código JavaScript:

<script type="text/javascript"></script>

Hora de convertir nuestro <div> en pestañas, insertemos el shorthand de document.ready

$(function(){                
});

Trabajemos dentro de esta función, tomemos el ID “categorías” y lo convertimos con la función tabs:

$("#categorias").tabs();

Y por el momento, se ve así:

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Es tiempo de definir sus propiedades

Las pestañas tipo tabs de jQueryUI tienen muchas propiedades y algunos métodos. En este caso, listemos algunas de sus propiedades más interesantes:

collapsible Permite retraer (true) o no (false) el contenido de las pestañas.
activeEstablece la pestaña activa, de acuerdo a su posición.
disabledDesactiva (true) o activa (false) las pestañas
heightStyleControla el alto del objeto de acuerdo a los siguientes valores:
auto: Todas tienen el mismo alto
fill: Usar el alto del objeto parent
content: Cada objeto usará el alto de acuerdo a su contenido.
eventPermite aplicar un evento a la pestaña

Por ejemplo, hagamos que la pestaña activa sea la número 2, que reaccione al típico evento mouseover y que todas las pestañas tengan el mismo alto.

$("#categorias").tabs({
   active: 1,
   event: "mouseover",
   heightStyle: "auto"
});

El código se queda así:

Como crear pestañas o tabs en JavaScript con jQuery - CableNaranja

Probemos el ejemplo

El resultado queda de la siguiente manera:

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

Podría también gustarte...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares