Come creare schede o schede in JavaScript con JQuery

Condividi il nostro contenuto!

0shares
  • twitter
  • Pinterest
  • linkedin

  • e-mail

clicca per votare questa voce!

(voti: 0 media: 0)

Sebbene in un’occasione precedente abbiamo imparato a creare finestre di dialogo con JavaScript, questa volta creeremo schede o schede utilizzando il sottoinsieme della biblioteca jquery noto come Jqueryui. Questa biblioteca ci offre il vantaggio di creare oggetti di interfaccia utente tipici come finestre, schede o cursori con piccolo codice.

Tabella del contenuto

Prepareremo gli elementi da visualizzare sulle nostre schede

nel nostro editor Codice preferito, avviare un nuovo file in formato HTML, con la seguente struttura di base:

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

Dopo di ciò, posizioniamo un < div > con un ID e all’interno di un elenco di tipo < UL > con tre elementi:

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

Posizionare un < Div > con la prima 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>

Quindi la seconda 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>

e infine, la terza 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>

e il risultato è così lontano finora.

Come creare schede o schede in JavaScript con JQuery - Cablilenja

Scaricando Jqueryui per il nostro lavoro

Dobbiamo scaricare Jqueryui, quindi andremo direttamente alla tua pagina ufficiale. Al momento della stesura di questo articolo, la versione disponibile è 1.12.1. Facciamo clic su Download personalizzato.

Come creare schede o schede in JavaScript con JQuery - CabbleNearnja

La seguente schermata è chiamata Download Builder, il primo sarà per scegliere la versione JQueryUI che vogliamo, in questo caso l’1.12.1. Possiamo anche rimuovere alcuni componenti di cui non abbiamo bisogno.

Come creare schede o schede in JavaScript con JQuery - cabineranja

Infine, scegliamo un tema per i componenti (il tema di base va bene) e premi il download.

Come creare schede o schede in JavaScript con JQuery - CabbleNearnja

Manteniamo il file nella nostra cartella di lavoro.

Come creare schede o schede in JavaScript con JQuery - CabbleNearnja

Situato il file .zip che abbiamo scaricato, quanto segue è quello di estrarre il suo contenuto (questo può variare in base al software che si utilizza sul computer)

Come creare schede o schede in JavaScript con jQuery - cabblenearnja

Dopo aver estratto tutto il contenuto, la struttura della cartella creata deve essere simile a questa.

Come creare schede o schede in JavaScript con JQuery - CabbleNearnja

incluso JQueryUI nel nostro codice

all’interno della cartella esterna, è il primo file che dobbiamo includere, che è la base di jQuery.

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

all’esterno, sulla radice della cartella JQueryUI, è il file jquery-ui.min.js che è la versione di produzione, utilizzeremo quel file.

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

e chiameremo il tuo foglio stili nella versione di produzione.

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

Al momento, il nostro codice è simile a questo:

Come creare schede o Schede in JavaScript con JQuery - Cabblenja

Metti le nostre schede per operare

Inserire un frammento di codice JavaScript:

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

tempo di Converti il nostro < div > sulle schede, inserire la stenografia del documento.Pronto

$(function(){ });

Lavoriamo all’interno di questa funzione, prendiamo le “categorie” ID e lo convertiamo con la funzione Tabs:

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

E per il momento, sembra questo:

Crea schede o schede in JavaScript con JQuery - Cabloney

è il momento di definire le sue proprietà

Le schede del tipo di tabella JQueryUI hanno molte proprietà e alcuni metodi. In questo caso, elenchiamo alcune delle sue proprietà più interessanti:


COLLAPSIBILE consente di ritrarre (true) o meno (falso) il contenuto delle schede.
attivo imposta la scheda attiva, in base alla sua posizione.
disabilitato disattiva (true) o attivo (falso) il
controlla l’alto L’oggetto secondo i seguenti valori:
AUTO: Tutti hanno lo stesso pieno
Riempire: Uso dell’oggetto Alto del genitore
Contenuto: ogni oggetto utilizzerà l’alto secondo il suo contenuto.
EVENTO Consente di applicare un evento alla scheda

Ad esempio, consentono la scheda attiva il numero 2, che reagire al tipico evento del mouseover e che tutte le schede hanno lo stesso.

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

Il codice rimane così:

Come creare schede o schede in JavaScript con JQuery - CabbleNearnja

Proviamo l’esempio

Il risultato è il risultato Come segue:

Sei stato? Facci sapere nei commenti qui sotto, sul nostro account Twitter @ Cablarenja7 o sulla nostra pagina Facebook.

Avatar Utente 2 1518106013

Teaching, IT Manager, Blogger & Sviluppatore. Scrivo per divertimento, educare per passione. | La grande non è la mia cosa.

Condividi il nostro contenuto!

0shares
  • Twitter
  • Pinterest
  • linkedin
  • Email

Leave a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *