Creació pestanyes o tabs en JavaScript amb jQuery

Comparteix nostre contingut!

0shares
  • Twitter
  • Pinterest
  • LinkedIn
  • Correu electrònic
Fes clic per puntuar aquesta entrada!

(Vots: 0 Mitjana: 0)

Tot i que en una ocasió anterior vam aprendre a crear finestres de diàleg amb JavaScript, en aquesta ocasió crearem pestanyes o tabs usant el subconjunt de llibreries de jQuery conegut com jQueryUI. Aquesta llibreria ens ofereix l’avantatge de crear objectes típics d’interfície d’usuari com finestres, pestanyes o sliders amb poc codi.

Taula de Continguts

Preparem els elements a mostrar a les nostres pestanyes

En el nostre editor de codi preferit, iniciem un nou arxiu en format HTML, amb l’estructura següent base:

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

Després d’això, col·loquem un < div > amb un ID i dins una llista de tipus < ul > amb tres elements:

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

Posem 1 < div > amb la primera categoria:

<div> <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>

Després la segona categoria :

<div> <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>

I finalment, la tercera categoria:

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

I el resultat es veu així fins al moment.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

S’està baixant jQueryUI per al nostre treball

Necessitem descarregar jQueryUI, així que anirem directe cap a la seva pàgina oficial. A l’hora d’escriure aquest article, la versió disponible és la 1.12.1. Donem un clic a Custom download.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

la següent pantalla és cridada Download builder, el primer serà triar la versió de jQueryUI que volem, en aquest cas la 1.12.1. També podem treure alguns components que no necessitem.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Finalment, vam triar un tema per als components (el tema base està bé) i pressionem Download.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Guardem l’arxiu en la nostra carpeta de treball.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Localitzat el fitxer .zip que descarreguem, el següent és extreure el seu contingut (Això pot variar d’acord a l’programari que utilitzi en el seu ordinador)

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

després d’extreure tot el contingut, l’estructura de la carpeta que es va crear ha de ser similar a aquesta.

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Incloent jQueryUI al nostre codi

Dins de la carpeta external, aquesta el primer arxiu que necessitem incloure, que és la base de jQuery.

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

A fora, sobre l’arrel de la carpeta d’jQueryUI, es troba l’arxiu jquery-ui.min.js que és la versió de producció, farem servir aquest arxiu.

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

I cridarem al seu full d’estils en versió de producció.

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

a l’hora, el nostre codi es veu així:

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Posem les nostres pestanyes a funcionar

Inserim un fragment de codi JavaScript:

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

Hora de convertir el nostre < div > en pestanyes, inserim el shorthand de document.ready

$(function(){ });

Treballem dins d’aquesta funció, prenguem l’ID “categories” i el convertim amb la funció tabs:

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

I de moment, es veu així:

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

És temps de definir les seves propietats

Les pestanyes tipus tabs de jQueryUI tenen moltes propietats i alguns mètodes. En aquest cas, llistem algunes de les seves propietats més interessants:

collapsible Permet retreure (true) o no (false) el contingut de les pestanyes.
activi Estableix la pestanya activa, d’acord a la seva posició.
disabled Desactiva (true) o activa (false) les pestanyes
heightStyle Controla l’alt de l objecte d’acord amb els següents valors: a acte: Totes tenen el mateix alt a fill: Utilitza l’alt de l’objecte parent a content: Cada objecte farà servir l’alt d’acord al seu contingut.
event Permet aplicar un esdeveniment a la pestanya

Per exemple, fem que la pestanya activa sigui la número 2, que reaccioni a el típic esdeveniment mouseover i que totes les pestanyes tinguin el mateix alt .

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

El codi es queda així:

Creació pestanyes o tabs en JavaScript amb jQuery - CableNaranja

Provem l’exemple

el resultat queda de la següent manera:

T’ha resultat? Deixa’ns saber en els comentaris aquí baix, en el nostre compte de twitter @ cablenaranja7 oa la nostra pàgina de facebook.

avatar user 2 1518106013

Docent, IT Manager, Blogger & Developer. Escric per diversió, educo per passió. | Grandstanding is not my thing.

Comparteix nostre contingut!

0shares
  • Twitter
  • Pinterest
  • LinkedIn
  • Correu electrònic

Leave a Comment

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *