Sommario
Ci sono molti modi per creare tab e fisarmoniche ma sicuramente jQuery e il pacchetto della tua libreria jQuery UI fornirci il modo più rapido ed efficiente per implementare questi elementi.Ciglia
Le schede ci consentono di raggruppare le informazioni sul nostro sito Web per argomento, consentendo agli utenti di ottenere rapidamente e facilmente informazioni rilevanti semplicemente selezionando la scheda che desiderano.
Il metodo tabs()
Il metodo schede(opzioni) dichiara che un elemento dell'HTML e il suo contenuto devono essere visualizzati in schede, i parametri delle opzioni è un oggetto che specifica l'aspetto e il comportamento delle schede.
Il metodo schede () può essere utilizzato in due modi:
• $ (selettore, contesto) .tabs (opzioni)
• $ (selettore, contesto) .tabs ("azione", parametri)
Vediamo un esempio della sua implementazione:
- Includiamo i file necessari, le librerie di jQuery e il CSS:
- Creiamo la nostra istanza del metodo schede () e lo associamo ad un selettore:
- Infine nel nostro HTML creiamo il contenuto che verrà formattato nelle nostre schede, è importante ricordare che deve essere conforme alla struttura dei tagpoi le etichette
- e infine etichetteper il metodo per identificare ciascuna scheda.
- Nunc tincidunt
- Proin dolore
- Lacinia Enea
- Includiamo i file necessari, le librerie di jQuery e il CSS:
- Creiamo la nostra istanza del metodo fisarmonica () e lo associamo ad un selettore:
- Infine creiamo il nostro HTML rispettando la struttura di un taggenerale seguito da altri tagche servirà per identificare ogni blocco.
- Crea un accountIscriviti GRATIS per avere il tuo account SolveticRegistra un account
- IdentificareHai già un account? Accedi quiIdentificami nel mio Account
- Pubblicato 12 agosto 2013 00:54
- visite 3,7 K
- LivelloProfessionale
- Come aggiornare NPM con PowerShell in Windows 10
- Come trascinare e catturare immagini con l'interfaccia utente di JQuery
- Come creare uno Spinner o caricare un'icona con JQuery
- Come far tradurre un sito web in più lingue
Vediamo come appare questo esempio nel nostro browser:
Schede dell'interfaccia utente jQuery - Funzionalità predefinita
Prova della scheda 1.
Morbi tincidunt, dui sit amet facilisis feugiat, I hate metus gravida before, ut pharetra massa metus id nunc. Duis scelerisque infastidisce turpis. Sete fringilla, massa eget luctus malesuada, metus eros disagio lectus, ut tempus eros massa ut dolore. Enean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilita. Curabitur ornare consequat nunc. Enea vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Convallis pellentesco. Mecenate feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
Prova della scheda 3.
Fisarmonica
Come le schede, la fisarmonica organizza le informazioni con la particolarità che lo fa per blocchi in cui verranno visualizzate solo le informazioni del blocco selezionato mentre le altre rimangono nascoste.
Il metodo della fisarmonica()
Il metodo fisarmonica (opzioni) specifica che un elemento dell'HTML e il suo contenuto saranno gestiti come menu di tipo fisarmonica. Come il metodo delle schede, le opzioni ne specificheranno il comportamento e l'aspetto.
Il metodo fisarmonica () può essere utilizzato in due modi:
• $ (selettore, contesto) .fisarmonica (opzioni)
• $ (selettore, contesto) .fisarmonica ("azione", parametri)
Vediamo un esempio della sua implementazione:
Il nostro esempio sarà simile a questo nel browser:
Questo tutorial ti ha aiutato?
AltrimentiAIUTA A MIGLIORARE QUESTO TUTORIAL!
Pensi di poter correggere o migliorare questo tutorial? Puoi inviare la tua Edizione con le modifiche che ritieni utili.0 utenti hanno modificato questo tutorial. Modifica e diventa un esperto riconosciuto!
Modifica questo tutorial
TUTORIAL SIMILI
Come trascinare e catturare immagini con l'interfaccia utente di JQueryCome creare uno Spinner o caricare un'icona con JQueryPlugin e librerie JQuery per lo sviluppo webGriglia dinamica Flexigrid con JQuery e PHPEspressioni regolari con JqueryGestire le tabelle pivot con il plugin Jquery DatatablesComprendere AJAX con jQueryFiltri nei selettori con Jquery e CSS3 II
Nessun commento, sii il primo!
Non aspettare oltre ed entra in SolveticLascia i tuoi commenti e sfrutta l'account utente Unisciti a noi!Informazione
Ultimi tutorial JavaScript
