JavaScript

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

Individuale o compilato

I plugin possono essere inclusi singolarmente (sebbene alcuni abbiano delle dipendenze richieste) o tutti in una volta. Sia bootstrap.js che bootstrap.min.js contengono tutti i plugin in un unico file.

Attributi dei dati

Puoi utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API di markup senza scrivere una singola riga di JavaScript. Questa è l'API di prima classe di Bootstrap e dovrebbe essere la tua prima considerazione quando usi un plugin.

Detto questo, in alcune situazioni potrebbe essere desiderabile disattivare questa funzionalità. Pertanto, forniamo anche la possibilità di disabilitare l'API degli attributi dei dati svincolando tutti gli eventi sullo spazio dei nomi del corpo con `'data-api'`. Questo assomiglia a questo:

  1. $ ( "corpo" ). spento ( '.data-api' )

In alternativa, per indirizzare un plug-in specifico, includi semplicemente il nome del plug-in come spazio dei nomi insieme allo spazio dei nomi data-api in questo modo:

  1. $ ( "corpo" ). disattivato ( '.alert.data-api' )

API programmatica

Riteniamo inoltre che dovresti essere in grado di utilizzare tutti i plug-in Bootstrap esclusivamente tramite l'API JavaScript. Tutte le API pubbliche sono metodi singoli, concatenabili e restituiscono la raccolta su cui si è agito.

  1. $ ( ".btn.pericolo" ). pulsante ( "commuta" ). addClass ( "grasso" )

Tutti i metodi dovrebbero accettare un oggetto opzioni opzionale, una stringa che ha come target un metodo particolare o niente (che avvia un plug-in con un comportamento predefinito):

  1. $ ( "#myModal" ). modal () // inizializzato con i valori predefiniti
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // inizializzato senza tastiera
  3. $ ( "#myModal" ). modal ( 'show' ) // inizializza e richiama show immediatamente

Ogni plugin espone anche il suo costruttore grezzo su una proprietà `Constructor`: $.fn.popover.Constructor. Se desideri ottenere una particolare istanza di plugin, recuperala direttamente da un elemento: $('[rel=popover]').data('popover').

Nessun conflitto

A volte è necessario utilizzare i plug-in Bootstrap con altri framework dell'interfaccia utente. In queste circostanze, possono verificarsi occasionalmente collisioni nello spazio dei nomi. Se ciò accade, puoi richiamare .noConflictil plugin di cui desideri ripristinare il valore.

  1. var bootstrapButton = $ . fn . pulsante . noConflict () // restituisce $.fn.button al valore assegnato in precedenza
  2. $ . fn . bootstrapBtn = bootstrapButton // fornisce a $().bootstrapBtn la funzionalità bootstrap

Eventi

Bootstrap fornisce eventi personalizzati per la maggior parte delle azioni uniche del plugin. Generalmente, questi si presentano in una forma di participio passato e infinito, in cui l'infinito (es. show) viene attivato all'inizio di un evento e la sua forma participio passato (es. shown) viene attivato al completamento di un'azione.

Tutti gli eventi infiniti forniscono la funzionalità preventDefault. Ciò fornisce la possibilità di interrompere l'esecuzione di un'azione prima che inizi.

  1. $ ( '#myModal' ). on ( 'mostra' , funzione ( e ) {
  2. se (! data ) restituisce e . preventDefault () // interrompe la visualizzazione del modale
  3. })

A proposito di transizioni

Per effetti di transizione semplici, includi bootstrap-transition.js insieme agli altri file JS. Se stai usando bootstrap.js compilato (o minimizzato) , non è necessario includerlo: è già lì.

Casi d'uso

Alcuni esempi del plugin di transizione:

  • Scorrimento o dissolvenza in modali
  • Schede in dissolvenza
  • Avvisi in dissolvenza
  • Riquadri a carosello scorrevole

Esempi

I modali sono prompt di dialogo semplificati, ma flessibili, con la funzionalità minima richiesta e impostazioni predefinite intelligenti.

Esempio statico

Un rendering modale con intestazione, corpo e serie di azioni nel piè di pagina.

  1. < classe div = "dissolvenza nascosta modale" >
  2. < classe div = "intestazione modale" >
  3. < tipo di pulsante = "pulsante" class = "chiudi" data-dismiss = "modale" aria-hidden = "vero" > × </pulsante>
  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" > Chiudi </a>
  11. <a href = "#" class = "btn btn-primary" > Salva le modifiche </a>
  12. </div>
  13. </div>

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.

  1. <!-- Pulsante per attivare il modale -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Avvia demo modale </a>
  3.  
  4. <!-- Modale -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. < classe div = "intestazione modale" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Intestazione modale </h3>
  9. </div>
  10. < classe div = "corpo modale" >
  11. <p> Un bel corpo... </p>
  12. </div>
  13. < classe div = "piè di pagina modale" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Chiudi </button>
  15. <button class = "btn btn-primary" > Salva le modifiche </button>
  16. </div>
  17. </div>

Utilizzo

Tramite attributi di dati

Attiva un modale senza scrivere JavaScript. Impostato data-toggle="modal"su un elemento del controller, come un pulsante, insieme a data-target="#foo"o href="#foo"per scegliere come target una modale specifica da attivare.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Avvia modale </button>

Tramite JavaScript

Chiama un modale con id myModalcon una singola riga di JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-backdrop="".

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.
a distanza sentiero falso

Se viene fornito un URL remoto, il contenuto verrà caricato tramite il loadmetodo di jQuery e iniettato nel file .modal-body. Se stai utilizzando l'API dei dati, puoi in alternativa utilizzare il hreftag per specificare l'origine remota. Un esempio di questo è mostrato di seguito:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

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. })

Esempio nella barra di navigazione

Il plug-in ScrollSpy consente di aggiornare automaticamente i target di navigazione in base alla posizione di scorrimento. Scorri l'area sotto la barra di navigazione e osserva il cambio di classe attivo. Verranno evidenziati anche gli elementi secondari a discesa.

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


Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi semplicemente data-spy="scroll"l'elemento che vuoi spiare (in genere questo sarebbe il corpo) e data-target=".navbar"selezionare quale nav usare. Ti consigliamo di utilizzare scrollspy con un .navcomponente.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Tramite JavaScript

Chiama lo scrollspy tramite JavaScript:

  1. $ ( '#barra di navigazione' ). spia pergamena ()
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

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

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.

Schede di esempio

Aggiungi funzionalità di schede rapide e dinamiche per passare da un riquadro di contenuto locale all'altro, anche tramite 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.


Utilizzo

Abilita le schede tabb tramite JavaScript (ogni scheda deve essere attivata singolarmente):

  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 con tab o pill senza scrivere 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. })

Esempi

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

Per motivi di prestazioni, il tooltip e il popover data-apis sono attivati, il che significa che devi inizializzarli tu stesso .

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.

Quattro direzioni

Suggerimenti nei gruppi di input

Quando utilizzi descrizioni comandi e popover con i gruppi di input Bootstrap, dovrai impostare l' containeropzione (documentata di seguito) per evitare effetti collaterali indesiderati.


Utilizzo

Attiva il suggerimento tramite JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Nome genere predefinito descrizione
animazione booleano VERO applica una transizione di dissolvenza CSS al suggerimento
html booleano falso Inserisci l'html nel suggerimento. Se false, il textmetodo di jquery verrà utilizzato per inserire il contenuto nel dom. Usa il testo se sei preoccupato per gli attacchi XSS.
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 "messa a fuoco al passaggio del mouse" come viene attivata la descrizione comando - fare clic su | passa il mouse | messa a fuoco | Manuale. Nota che il caso passa trigger più tipi di trigger, separati da uno spazio.
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 }

contenitore stringa | falso falso

Aggiunge la descrizione comando a un elemento specificocontainer: 'body'

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

Marcatura

  1. <a href = "#" data-toggle = "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' )

.tooltip('distruggi')

Nasconde e distrugge il suggerimento di un elemento.

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

Esempi

Aggiungi piccole sovrapposizioni di contenuto, come quelle dell'iPad, a qualsiasi elemento per ospitare informazioni secondarie. Passa il mouse sopra il pulsante per attivare il popover. Richiede l'inclusione di una descrizione comando .

Popover statico

Sono disponibili quattro opzioni: allineato in alto, a destra, in basso e a sinistra.

Parte superiore a scomparsa

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulum.

Popover a destra

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulum.

Fondo a scomparsa

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulum.

Popover a sinistra

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesco ornare sem lacinia quam venenatis vestibulum.

Nessun markup mostrato poiché i popover vengono generati da JavaScript e dal contenuto all'interno di un dataattributo.

Dimostrazione dal vivo

Quattro direzioni


Utilizzo

Abilita i popover tramite JavaScript:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-animation="".

Nome genere predefinito descrizione
animazione booleano VERO applica una transizione di dissolvenza CSS al suggerimento
html booleano falso Inserisci html nel popover. Se false, il textmetodo di jquery verrà utilizzato per inserire il contenuto nel dom. Usa il testo se sei preoccupato per gli attacchi XSS.
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 'clic' come viene attivato il popover - fare clic su | 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 }

contenitore stringa | falso falso

Aggiunge il popover a un elemento specificocontainer: 'body'

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

.popover('distruggi')

Nasconde e distrugge il popover di un elemento.

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

Esempi di avvisi

Aggiungi la funzionalità di eliminazione a tutti i messaggi di avviso con questo plugin.

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


Utilizzo

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. })

Esempi di utilizzo

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

Stateful

Aggiungi data-loading-text="Loading..."per utilizzare uno stato di caricamento su un pulsante.

  1. < tipo di pulsante = "pulsante" class = "btn btn-primary" data-loading-text = "Caricamento in corso..." > Stato di caricamento </button>

Singolo interruttore

Aggiungi data-toggle="button"per attivare la commutazione su un singolo pulsante.

  1. < tipo di pulsante = "pulsante" class = "btn btn-primary" data-toggle = "pulsante" > Commutatore singolo </button>

Casella di controllo

Aggiungi data-toggle="buttons-checkbox"per attivare lo stile della casella di controllo su btn-group.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Sinistra </button>
  3. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Centrale </button>
  4. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Destra </button>
  5. </div>

Radio

Aggiungi data-toggle="buttons-radio"per attivare/disattivare lo stile radio su btn-group.

  1. <div class = "btn-group" data-toggle = "pulsanti-radio" >
  2. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Sinistra </button>
  3. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Centrale </button>
  4. < tipo di pulsante = "pulsante" class = "btn btn-primary" > Destra </button>
  5. </div>

Utilizzo

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.

Opzioni

Nessuno

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. < tipo di pulsante = "pulsante" class = "btn" data-toggle = "pulsante" > </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 type = "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. < tipo di pulsante = "pulsante" 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.

* 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.
  1. <div class = "fisarmonica" id = "fisarmonica2" >
  2. < classe div = "gruppo di fisarmoniche" >
  3. < classe div = "titolo a fisarmonica" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. Elemento pieghevole del gruppo n. 1
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "collasso corpo-fisarmonica in" >
  9. <div class = "fisarmonica interna" >
  10. Anim pariatur cliché...
  11. </div>
  12. </div>
  13. </div>
  14. < classe div = "gruppo di fisarmoniche" >
  15. < classe div = "titolo a fisarmonica" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. Elemento pieghevole del gruppo n. 2
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "collasso del corpo della fisarmonica" >
  21. <div class = "fisarmonica interna" >
  22. Anim pariatur cliché...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Puoi anche utilizzare il plugin senza il markup della fisarmonica. Crea un pulsante per alternare l'espansione e la compressione di un altro elemento.

  1. < tipo di pulsante = "pulsante" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. semplice pieghevole
  3. </pulsante>
  4.  
  5. <div id = "demo" class = "comprimi in" > </div>

Utilizzo

Tramite attributi di dati

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.

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.

Tramite JavaScript

Abilita manualmente con:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-parent="".

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

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. })

Esempio

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

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

Ti consigliamo di impostare autocomplete="off"per impedire la visualizzazione dei menu predefiniti del browser sul menu a discesa Bootstrap typeahead.


Utilizzo

Tramite attributi di dati

Aggiungi attributi di dati per registrare un elemento con funzionalità typeahead come mostrato nell'esempio sopra.

Tramite JavaScript

Chiama il typeahead manualmente con:

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

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-source="".

Nome genere predefinito descrizione
fonte matrice, funzione [ ] L'origine dati su cui eseguire query. Può essere una matrice di stringhe o una funzione. Alla funzione vengono passati due argomenti, il queryvalore nel campo di input e il processcallback. La funzione può essere utilizzata in modo sincrono restituendo l'origine dati direttamente o in modo asincrono tramite il processsingolo argomento del callback.
Oggetti numero 8 Il numero massimo di elementi da visualizzare nell'elenco a discesa.
minLength numero 1 La lunghezza minima dei caratteri necessaria prima di attivare i suggerimenti di completamento automatico
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.
aggiornatore funzione restituisce l'articolo selezionato Il metodo utilizzato per restituire l'articolo selezionato. Accetta un singolo argomento, iteme ha l'ambito dell'istanza typeahead.
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.

Metodi

.typeahead(opzioni)

Inizializza un input con un typeahead.

Esempio

La sottonavigazione a sinistra è una demo live del plug-in affix.


Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento dell'affisso a qualsiasi elemento, basta aggiungere data-spy="affix"all'elemento che vuoi spiare. Quindi usa gli offset per definire quando attivare e disattivare il blocco di un elemento.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Dritta! Devi gestire la posizione di un elemento bloccato e il comportamento del suo genitore immediato. La posizione è controllata da affix, affix-top, e affix-bottom. Ricorda di verificare la presenza di un genitore potenzialmente compresso quando l'affisso si attiva poiché rimuove il contenuto dal normale flusso della pagina.

Tramite JavaScript

Chiama il plug-in affix tramite JavaScript:

  1. $ ( '#barra di navigazione' ). apporre ()

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset-top="200".

Nome genere predefinito descrizione
compensare numero | funzione | oggetto 10 Pixel da scostare dallo schermo durante il calcolo della posizione di scorrimento. Se viene fornito un solo numero, l'offset verrà applicato in entrambe le direzioni in alto ea sinistra. Per ascoltare una singola direzione o più offset univoci, basta fornire un oggetto offset: { x: 10 }. Utilizzare una funzione quando è necessario fornire dinamicamente un offset (utile per alcuni progetti reattivi).