Javascript per Bootstrap

Dai vita ai componenti di Bootstrap, ora con 12 plugin jQuery personalizzati.

Modali

Una versione semplificata, ma flessibile, del tradizionale plug-in modale javascript con solo le funzionalità minime richieste e le impostazioni predefinite intelligenti.

Dropdown

Aggiungi menu a discesa a quasi tutto in Bootstrap con questo semplice plugin. Bootstrap offre il supporto completo del menu a discesa nella barra di navigazione, nelle schede e nelle pillole.

Spia pergamena

Usa scrollspy per aggiornare automaticamente i collegamenti nella barra di navigazione per mostrare il collegamento attivo corrente in base alla posizione di scorrimento.

Schede attivabili

Usa questo plugin per rendere le schede e le pillole più utili consentendo loro di scorrere i riquadri tabbable del contenuto locale.

Suggerimenti

Una nuova versione del plug-in jQuery Tipsy, Tooltips non si basa sulle immagini: usano CSS3 per le animazioni e gli attributi dei dati per l'archiviazione del titolo locale.

Popover *

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie.

* Richiede l'inclusione di descrizioni comandi

Messaggi di avviso

Il plug-in di avviso è una piccola classe per aggiungere funzionalità di chiusura agli avvisi.

Bottoni

Fai di più con i pulsanti. Controlla gli stati dei pulsanti o crea gruppi di pulsanti per più componenti come le barre degli strumenti.

Crollo

Ottieni stili di base e supporto flessibile per componenti pieghevoli come fisarmoniche e navigazione.

Giostra

Crea una giostra di qualsiasi contenuto desideri fornire una presentazione interattiva di contenuti.

Digitare in anticipo

Un plug-in di base facilmente estendibile per creare rapidamente eleganti intestazioni di testo con qualsiasi input di testo di moduli.

Transizioni *

Per effetti di transizione semplici, includi bootstrap-transition.js una volta per far scorrere le modalità o gli avvisi in dissolvenza.

* Richiesto per l'animazione nei plugin

Dritta! Tutti i plugin javascript richiedono l'ultima versione di jQuery.

A proposito di modali

Una versione semplificata, ma flessibile, del tradizionale plug-in modale javascript con solo le funzionalità minime richieste e le impostazioni predefinite intelligenti.

Download file

Esempio statico

Di seguito è riportato un modale renderizzato staticamente.

Dimostrazione dal vivo

Attiva o disattiva una modale tramite javascript facendo clic sul pulsante in basso. Scorrerà verso il basso e svanirà dalla parte superiore della pagina.

Avvia demo modale

Usando bootstrap-modal

Chiama il modale tramite javascript:

  1. $ ( '#myModal' ). modale ( opzioni )

Opzioni

Nome genere predefinito descrizione
sfondo booleano VERO Include un elemento di sfondo modale. In alternativa, specificare staticuno sfondo che non chiude il modale al clic.
tastiera del computer booleano VERO Chiude il modale quando viene premuto il tasto Esc
mostrare booleano VERO Mostra il modale quando inizializzato.

Marcatura

Puoi attivare facilmente le modali sulla tua pagina senza dover scrivere una sola riga di javascript. Basta impostare data-toggle="modal"un elemento del controller con un data-target="#foo"o href="#foo"che corrisponde a un ID elemento modale e, quando si fa clic, avvierà il modale.

Inoltre, per aggiungere opzioni alla tua istanza modale, includile semplicemente come attributi di dati aggiuntivi sull'elemento di controllo o sul markup modale stesso.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Avvia modale </a>
  1. <div class = "nascondi modale" id = "myModal" >
  2. < classe div = "intestazione modale" >
  3. < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "modale" > × </button>
  4. <h3> Intestazione modale </h3>
  5. </div>
  6. < classe div = "corpo modale" >
  7. <p> Un bel corpo... </p>
  8. </div>
  9. < classe div = "piè di pagina modale" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Chiudi </a>
  11. <a href = "#" class = "btn btn-primary" > Salva le modifiche </a>
  12. </div>
  13. </div>
Dritta! Se vuoi che il tuo modale si anima dentro e fuori, aggiungi semplicemente una .fadeclasse .modalall'elemento (fai riferimento alla demo per vederlo in azione) e includi bootstrap-transition.js.

Metodi

.modal(opzioni)

Attiva il tuo contenuto come modale. Accetta opzioni opzionali object.

  1. $ ( '#myModal' ). modale ({
  2. tastiera : falso
  3. })

.modal('toggle')

Alterna manualmente un modale.

  1. $ ( '#myModal' ). modale ( 'attiva/disattiva' )

.modal('mostra')

Apre manualmente un modale.

  1. $ ( '#myModal' ). modale ( 'mostra' )

.modal('nascondi')

Nasconde manualmente un modale.

  1. $ ( '#myModal' ). modale ( 'nascondi' )

Eventi

La classe modale di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità modale.

Evento Descrizione
mostrare Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
mostrato Questo evento viene generato quando il modale è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondere Questo evento viene generato immediatamente quando hideviene chiamato il metodo dell'istanza.
nascosto Questo evento viene generato quando il modale ha finito di essere nascosto all'utente (attenderà il completamento delle transizioni CSS).
  1. $ ( '#myModal' ). on ( 'nascosto' , funzione () {
  2. // fare qualcosa…
  3. })

Il plug-in ScrollSpy consente di aggiornare automaticamente i target di navigazione in base alla posizione di scorrimento.

Download file

Esempio di barra di navigazione con scrollspy

Scorri l'area sottostante e guarda l'aggiornamento della navigazione. Verranno evidenziati anche gli elementi secondari a discesa. Provalo!

@Grasso

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prima che si esaurissero qui. Tumblr diritto alla bicicletta da fattoria a tavola qualunque cosa. Cardigan Anim Kefiah Carles. Cabina fotografica di Velit seitan mcsweeney 3 wolf moon irure. Cosby maglione lomo jean pantaloncini, williamsburg felpa con cappuccio minimo qui probabilmente non ne hai sentito parlare et cardigan fondo fiduciario culpa biodiesel wes anderson estetica. Nihil tatuato accusamus, cred ironia biodiesel kefiah artigiano ullamco consequat.

@mdo

Veniam marfa baffi skateboard, adipisicing barba fugiat velit forcone. Freegan barba aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Camion di cibo in maglione cosby tatuato, vinile quis non freegan di mcsweeney. Lo-fi wes anderson +1 sartoriale. Esercitazione non estetica di Carles quis gentrify. Brooklyn adipisicing birra artigianale vice keytar deserunt.

uno

Occaecat commodo aliqua delectus. Fap birra artigianale deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore monorigine caffè in magna veniam. High life id vinile, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi Borsa messenger minimal fai da te. Cred ex in, marsupio sostenibile delectus consectetur iphone.

Due

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa qualunque delectus food truck. Sapiente synth id presupposto. Locavore sed helvetica cliché ironia, thundercats probabilmente non ne hai sentito parlare consequat hoodie senza glutine lo-fi fap aliquip. Labore elit placeat prima che si esaurissero, terry richardson proident brunch nesciunt quis cosby maglione pariatur kefiyeh ut helvetica artigiano. Cardigan birra artigianale seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minimo commodo ullamco thundercats.


Utilizzando bootstrap-scrollspy.js

Chiama lo scrollspy tramite javascript:

  1. $ ( '#barra di navigazione' ). spia pergamena ()

Marcatura

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi semplicemente data-spy="scroll"l'elemento che vuoi spiare (di solito questo sarebbe il corpo).

  1. <body data-spy = "scorri" > ... </body>
Dritta! I collegamenti Navbar devono avere destinazioni ID risolvibili. Ad esempio, un <a href="#home">home</a>must corrisponde a qualcosa nel dom come <div id="home"></div>.

Metodi

.scrollspy('aggiorna')

Quando usi scrollspy insieme all'aggiunta o alla rimozione di elementi dal DOM, dovrai chiamare il metodo di aggiornamento in questo modo:

  1. $ ( '[data-spy="scorri"]' ). ciascuno ( funzione () {
  2. var $spia = $ ( questo ). scrollspy ( 'aggiorna' )
  3. });

Opzioni

Nome genere predefinito descrizione
compensare numero 10 Pixel da compensare dall'alto durante il calcolo della posizione di scorrimento.

Eventi

Evento Descrizione
attivare Questo evento si attiva ogni volta che un nuovo oggetto viene attivato da Scrollspy.

Questo plug-in aggiunge una scheda rapida e dinamica e funzionalità pillola per la transizione attraverso i contenuti locali.

Download file

Schede di esempio

Fai clic sulle schede sottostanti per passare da un riquadro nascosto all'altro, anche tramite i menu a discesa.

Denim grezzo probabilmente non hai sentito parlare di quei pantaloncini di jeans Austin. Nesciunt tofu stumptown aliqua, purificatore di synth retrò. Baffi cliché tempor, williamsburg carles vegan helvetica. Reprehenderit macellaio sintetizzatore acchiappasogni retrò kefiah. Maglione Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, macellaio voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Utilizzando bootstrap-tab.js

Abilita le schede tabb tramite javascript (ogni scheda deve essere attivata individualmente):

  1. $ ( '#myTab a' ). fare clic su ( funzione ( e ) {
  2. e . preventDefault ();
  3. $ ( questo ). scheda ( "mostra" );
  4. })

Puoi attivare singole schede in diversi modi:

  1. $ ( '#myTab a[href="#profile"]' ). scheda ( "mostra" ); // Seleziona la scheda per nome
  2. $ ( '#myTab a:first' ). scheda ( "mostra" ); // Seleziona la prima scheda
  3. $ ( '#myTab a:last' ). scheda ( "mostra" ); // Seleziona l'ultima scheda
  4. $ ( '#myTab li:eq(2) a' ). scheda ( "mostra" ); // Seleziona la terza scheda (0-indicizzata)

Marcatura

Puoi attivare una navigazione in tab o pill senza scrivere alcun javascript semplicemente specificando data-toggle="tab"o data-toggle="pill"su un elemento. L'aggiunta delle classi nave nav-tabsalla scheda ulapplicherà lo stile della scheda bootstrap.

  1. <ul class = "nav nav-schede" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profilo </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Messaggi </a></li>
  5. <li><a href = "#impostazioni" data-toggle = "scheda" > Impostazioni </a></li>
  6. </ul>

Metodi

$().tab

Attiva un elemento scheda e un contenitore di contenuto. La scheda dovrebbe avere a data-targeto un hrefnodo di destinazione del contenitore nel DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "attivo" ><a href = "#home" > Home </a></li>
  3. <li><a href = "#profile" > Profilo </a></li>
  4. <li><a href = "#messages" > Messaggi </a></li>
  5. <li><a href = "#impostazioni" > Impostazioni </a></li>
  6. </ul>
  7.  
  8. < classe div = "contenuto della scheda" >
  9. <div class = "riquadro schede attivo" id = "home" > ... </div>
  10. <div class = "tab-pannello" id = "profilo" > ... </div>
  11. <div class = "tab-pannello" id = "messaggi" > ... </div>
  12. <div class = "riquadro schede" id = "impostazioni" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funzione () {
  17. $ ( '#myTab a:last' ). scheda ( "mostra" );
  18. })
  19. </script>

Eventi

Evento Descrizione
mostrare Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
mostrato Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare event.targete event.relatedTargetper indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'mostrato' , funzione ( e ) {
  2. e . destinazione // scheda attivata
  3. e . relatedTarget // scheda precedente
  4. })

Informazioni sulle descrizioni comandi

Ispirato all'eccellente plugin jQuery.tipsy scritto da Jason Frame; Le descrizioni comandi sono una versione aggiornata, che non si basa sulle immagini, usa CSS3 per le animazioni e gli attributi dei dati per l'archiviazione del titolo locale.

Download file

Esempio di utilizzo dei suggerimenti

Passa il mouse sui link sottostanti per vedere i suggerimenti:

Pantaloni attillati kefiah di livello successivo probabilmente non ne hai sentito parlare. Photo Booth barba denim grezzo letterpress borsa messenger vegana stumptown. Il seitan da fattoria a tavola, l'abbigliamento americano a 8 bit con quinoa sostenibile di mcsweeney's ha un chambray in vinile di spugna di richardson. Beard Stumptown, cardigan banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, quattro loko mcsweeney's cleanse vegan chambray. Un artigiano davvero ironico qualunque sia il keytar , il cinguettio di Banksy Austin, sceneggiatore da fattoria a tavola, gestisce il virale del caffè single-origine freegan cred denim grezzo.


Utilizzando bootstrap-tooltip.js

Attiva il suggerimento tramite javascript:

  1. $ ( '#esempio' ). descrizione comando ( opzioni )

Opzioni

Nome genere predefinito descrizione
animazione booleano VERO applica una transizione di dissolvenza CSS al suggerimento
posizionamento stringa|funzione 'superiore' come posizionare la descrizione comando - in alto | in basso | sinistra | Giusto
selettore corda falso Se viene fornito un selettore, gli oggetti tooltip verranno delegati alle destinazioni specificate.
titolo stringa | funzione '' valore predefinito del titolo se il tag `title` non è presente
grilletto corda 'librarsi' come viene attivato il suggerimento comando - passa il mouse | messa a fuoco | Manuale
ritardo numero | oggetto 0

ritardo che mostra e nasconde la descrizione comando (ms) - non si applica al tipo di trigger manuale

Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi/mostra

La struttura dell'oggetto è:delay: { show: 500, hide: 100 }

Dritta! Le opzioni per i singoli suggerimenti possono essere specificati in alternativa tramite l'uso degli attributi dei dati.

Marcatura

Per motivi di prestazioni, le API di dati Tooltip e Popover sono attivate. Se desideri utilizzarle, specifica un'opzione di selezione.

  1. <a href = "#" rel = "tooltip" title = "first tooltip" > passa il mouse sopra di me </a>

Metodi

$().tooltip(opzioni)

Allega un gestore di descrizione comando a una raccolta di elementi.

.tooltip('mostra')

Rivela il suggerimento di un elemento.

  1. $ ( '#elemento' ). descrizione comando ( 'mostra' )

.tooltip('nascondi')

Nasconde la descrizione comando di un elemento.

  1. $ ( '#elemento' ). descrizione comando ( 'nascondi' )

.tooltip('commuta')

Attiva o disattiva la descrizione comando di un elemento.

  1. $ ( '#elemento' ). descrizione comando ( 'attiva/disattiva' )

A proposito di popover

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie.

* Richiede l'inclusione di una descrizione comando

Download file

Esempio di popover al passaggio del mouse

Passa il mouse sopra il pulsante per attivare il popover.


Utilizzando bootstrap-popover.js

Abilita i popover tramite javascript:

  1. $ ( '#esempio' ). popover ( opzioni )

Opzioni

Nome genere predefinito descrizione
animazione booleano VERO applica una transizione di dissolvenza CSS al suggerimento
posizionamento stringa|funzione 'Giusto' come posizionare il popover - top | in basso | sinistra | Giusto
selettore corda falso se viene fornito un selettore, gli oggetti tooltip verranno delegati alle destinazioni specificate
grilletto corda 'librarsi' come viene attivato il suggerimento comando - passa il mouse | messa a fuoco | Manuale
titolo stringa | funzione '' valore del titolo predefinito se l'attributo `title` non è presente
contenuto stringa | funzione '' valore di contenuto predefinito se l'attributo `data-content` non è presente
ritardo numero | oggetto 0

ritardo che mostra e nasconde il popover (ms) - non si applica al tipo di trigger manuale

Se viene fornito un numero, il ritardo viene applicato a entrambi nascondi/mostra

La struttura dell'oggetto è:delay: { show: 500, hide: 100 }

Dritta! Le opzioni per i singoli popover possono essere specificate in alternativa tramite l'uso di attributi di dati.

Marcatura

Per motivi di prestazioni, le API di dati Tooltip e Popover sono attivate. Se desideri utilizzarle, specifica un'opzione di selezione.

Metodi

$().popover(opzioni)

Inizializza i popover per una raccolta di elementi.

.popover('mostra')

Rivela un popover di elementi.

  1. $ ( '#elemento' ). popover ( 'mostra' )

.popover('nascondi')

Nasconde un popover di elementi.

  1. $ ( '#elemento' ). popover ( "nascondi" )

.popover('commuta')

Attiva o disattiva un popover di elementi.

  1. $ ( '#elemento' ). popover ( 'attiva/disattiva' )

A proposito di avvisi

Il plug-in di avviso è una piccola classe per aggiungere funzionalità di chiusura agli avvisi.

Scarica

Esempi di avvisi

Il plug-in di avvisi funziona con messaggi di avviso regolari e blocca i messaggi.

Santo guacamole! Meglio controllarti, non stai molto bene.

Oh schiocco! Hai un errore!

Cambia questo e quello e riprova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Intraprendi questa azione Oppure fai questo


Utilizzando bootstrap-alert.js

Abilita l'eliminazione di un avviso tramite javascript:

  1. $ ( ".avviso" ). avviso ()

Marcatura

Basta aggiungere data-dismiss="alert"al pulsante di chiusura per fornire automaticamente una funzionalità di chiusura dell'avviso.

  1. <a class = "chiudi" data-dismiss = "alert" href = "#" > × </a>

Metodi

$().avviso()

Avvolge tutti gli avvisi con funzionalità di chiusura. Per fare in modo che i tuoi avvisi si attivino quando sono chiusi, assicurati che la classe .fadee sia .ingià applicata.

.alert('chiudi')

Chiude un avviso.

  1. $ ( ".avviso" ). avviso ( "chiudi" )

Eventi

La classe di avviso di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di avviso.

Evento Descrizione
chiudere Questo evento viene attivato immediatamente quando closeviene chiamato il metodo dell'istanza.
Chiuso Questo evento viene generato quando l'avviso è stato chiuso (attende il completamento delle transizioni CSS).
  1. $ ( '#mio-avviso' ). bind ( 'chiuso' , funzione () {
  2. // fare qualcosa…
  3. })

Di

Fai di più con i pulsanti. Controlla gli stati dei pulsanti o crea gruppi di pulsanti per più componenti come le barre degli strumenti.

Download file

Esempi di utilizzo

Usa il plugin dei pulsanti per gli stati e le commutazioni.

Stateful
Singolo interruttore
Casella di controllo
Radio

Utilizzando bootstrap-button.js

Abilita pulsanti tramite javascript:

  1. $ ( '.nav-schede' ). pulsante ()

Marcatura

Gli attributi dei dati sono parte integrante del plug-in del pulsante. Dai un'occhiata al codice di esempio seguente per i vari tipi di markup.

  1. <!-- Aggiungi data-toggle="button" per attivare la commutazione su un singolo pulsante -->
  2. <button class = "btn" data-toggle = "button" > Single Toggle </button>
  3.  
  4. <!-- Aggiungi data-toggle="buttons-checkbox" per attivare/disattivare lo stile della casella di controllo su btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Sinistra </button>
  7. <button class = "btn" > Medio </button>
  8. <button class = "btn" > Destra </button>
  9. </div>
  10.  
  11. <!-- Aggiungi data-toggle="buttons-radio" per attivare/disattivare lo stile radio su btn-group -->
  12. <div class = "btn-group" data-toggle = "pulsanti-radio" >
  13. <button class = "btn" > Sinistra </button>
  14. <button class = "btn" > Medio </button>
  15. <button class = "btn" > Destra </button>
  16. </div>

Metodi

$().button('toggle')

Commuta lo stato di spinta. Dà al pulsante l'aspetto che è stato attivato.

Dritta! È possibile abilitare la commutazione automatica di un pulsante utilizzando l' data-toggleattributo.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('caricamento')

Imposta lo stato del pulsante sul caricamento - disabilita il pulsante e scambia il testo per caricare il testo. Il testo di caricamento deve essere definito sull'elemento pulsante utilizzando l'attributo data data-loading-text.

  1. <button class = "btn" data-loading-text = "caricamento roba..." > ... </button>
Dritta! Firefox mantiene lo stato disabilitato durante il caricamento della pagina . Una soluzione alternativa è usare autocomplete="off".

$().button('reimposta')

Ripristina lo stato del pulsante: scambia il testo con il testo originale.

$().pulsante(stringa)

Ripristina lo stato del pulsante: scambia il testo in qualsiasi stato di testo definito dai dati.

  1. <button class = "btn" data-complete-text = "finito!" > ... </pulsante>
  2. <script>
  3. $ ( '.btn' ). pulsante ( 'completa' )
  4. </script>

Di

Ottieni stili di base e supporto flessibile per componenti pieghevoli come fisarmoniche e navigazione.

Download file

* Richiede l'inclusione del plug-in Transizioni.

Esempio di fisarmonica

Usando il plugin di compressione, abbiamo creato un semplice widget in stile fisarmonica:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua mettici sopra un uccellino calamari monorigine caffè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, birra artigianale labore wes anderson cred nesciunt sapiente ea proident. Ad vegan eccetto macellaio vice lomo. Leggings occaecat birra artigianale da fattoria a tavola, denim grezzo estetico synth nesciunt probabilmente non ne hai sentito parlare accusamus labore sostenibile VHS.

Utilizzando bootstrap-collapse.js

Abilita tramite javascript:

  1. $ ( ".comprimi" ). collassare ()

Opzioni

Nome genere predefinito descrizione
genitore selettore falso Se selettore, tutti gli elementi comprimibili sotto il genitore specificato verranno chiusi quando viene mostrato questo elemento comprimibile. (simile al comportamento della fisarmonica tradizionale)
alternare booleano VERO Attiva o disattiva l'elemento comprimibile durante l'invocazione

Marcatura

Basta aggiungere data-toggle="collapse"e un data-targetelemento per assegnare automaticamente il controllo di un elemento comprimibile. L' data-targetattributo accetta un selettore CSS a cui applicare la compressione. Assicurati di aggiungere la classe collapseall'elemento comprimibile. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva in.

  1. < classe pulsante = "btn btn-danger" data-toggle = "collasso" data-target = "#demo" >
  2. semplice pieghevole
  3. </pulsante>
  4.  
  5. <div id = "demo" class = "comprimi in" > </div>
Dritta! Per aggiungere la gestione dei gruppi a fisarmonica a un controllo comprimibile, aggiungi l'attributo data data-parent="#selector". Fare riferimento alla demo per vederlo in azione.

Metodi

.collapse(opzioni)

Attiva il tuo contenuto come elemento comprimibile. Accetta opzioni opzionali object.

  1. $ ( '#mioComprimibile' ). collasso ({
  2. alterna : falso
  3. })

.collapse('toggle')

Attiva o disattiva un elemento comprimibile in mostrato o nascosto.

.collapse('mostra')

Mostra un elemento comprimibile.

.collapse('nascondi')

Nasconde un elemento comprimibile.

Eventi

La classe di compressione di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità di compressione.

Evento Descrizione
mostrare Questo evento viene attivato immediatamente quando showviene chiamato il metodo dell'istanza.
mostrato Questo evento viene attivato quando un elemento di compressione è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
nascondere Questo evento viene generato immediatamente quando il hidemetodo è stato chiamato.
nascosto Questo evento viene generato quando un elemento di compressione è stato nascosto all'utente (attenderà il completamento delle transizioni CSS).
  1. $ ( '#mioComprimibile' ). on ( 'nascosto' , funzione () {
  2. // fare qualcosa…
  3. })

Di

Un plug-in di base facilmente estendibile per creare rapidamente eleganti intestazioni di testo con qualsiasi input di testo di moduli.

Download file

Esempio

Inizia a digitare nel campo sottostante per mostrare i risultati in anticipo.


Utilizzando bootstrap-typeahead.js

Chiama il typeahead tramite javascript:

  1. $ ( '.typeahead' ). dattilografare ()

Opzioni

Nome genere predefinito descrizione
fonte Vettore [ ] L'origine dati su cui eseguire query.
Oggetti numero 8 Il numero massimo di elementi da visualizzare nell'elenco a discesa.
abbinatore funzione senza distinzione tra maiuscole e minuscole Il metodo utilizzato per determinare se una query corrisponde a un elemento. Accetta un singolo argomento, itemrispetto al quale testare la query. Accedi alla query corrente con this.query. Restituisce un valore booleano truese la query è una corrispondenza.
selezionatore funzione corrispondenza esatta,
distinzione tra maiuscole e minuscole, senza distinzione
tra maiuscole e minuscole
Metodo utilizzato per ordinare i risultati del completamento automatico. Accetta un singolo argomento itemse ha l'ambito dell'istanza typeahead. Fare riferimento alla query corrente con this.query.
evidenziatore funzione evidenzia tutte le corrispondenze predefinite Metodo utilizzato per evidenziare i risultati del completamento automatico. Accetta un singolo argomento iteme ha l'ambito dell'istanza typeahead. Dovrebbe restituire html.

Marcatura

Aggiungi attributi di dati per registrare un elemento con funzionalità typeahead.

  1. < tipo di input = "testo" data-fornite = "typeahead" >

Metodi

.typeahead(opzioni)

Inizializza un input con un typeahead.