Il nostro plug-in modale è una versione super sottile del tradizionale plug-in js modale, prestando particolare attenzione a includere solo le funzionalità essenziali di cui abbiamo bisogno qui su Twitter.
Scarica
- $ ( '#mio-modale' ). modale ( opzioni )
Nome | genere | predefinito | descrizione |
---|---|---|---|
sfondo | booleano, stringa | falso | Include un elemento di sfondo modale. Impostare lo sfondo su "static" se non si desidera che il modale venga chiuso quando si fa clic sullo sfondo. |
tastiera del computer | booleano | falso | Chiude il modale quando viene premuto il tasto Esc |
mostrare | booleano | falso | Apre modale all'inizializzazione della classe |
Puoi attivare facilmente le modali sulla tua pagina senza dover scrivere una sola riga di javascript. Basta dare a un elemento un data-controls-modal
attributo che corrisponda a un ID elemento modale e, quando viene cliccato, avvierà il tuo modale. Per aggiungere opzioni modali, includile anche come attributi di dati.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Avvia modale </a>
Avviso Se vuoi che il tuo modale si anima dentro e fuori, aggiungi semplicemente una .fade
classe al tuo .modal
elemento (fai riferimento alla demo per vederlo in azione).
Attiva il tuo contenuto come modale. Accetta opzioni opzionali object
.
- $ ( '#mio-modale' ). modale ({
- tastiera : vero
- })
Alterna manualmente un modale.
- $ ( '#mio-modale' ). modale ( 'attiva/disattiva' )
Apre manualmente un modale.
- $ ( '#mio-modale' ). modale ( 'mostra' )
Nasconde manualmente un modale.
- $ ( '#mio-modale' ). modale ( 'nascondi' )
Restituisce un'istanza di classe modale degli elementi.
- $ ( '#mio-modale' ). modale ( vero )
Avviso In alternativa, questo può essere recuperato con $().data('modal')
.
La classe modale di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità modale.
Evento | Descrizione |
---|---|
mostrare | Questo evento viene attivato immediatamente quando show viene 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 hide viene 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). |
- $ ( '#mio-modale' ). bind ( 'nascosto' , funzione () {
- // fare qualcosa ...
- })
Questo plugin serve per aggiungere l'interazione a discesa alla barra in alto bootstrap o alle navigazioni a schede.
Scarica
- $ ( '#barra in alto' ). menu a discesa ()
Per aggiungere rapidamente funzionalità a discesa a qualsiasi elemento di navigazione, utilizza l' data-dropdown
attributo. Qualsiasi menu a discesa bootstrap valido verrà attivato automaticamente.
- <ul class = "schede" >
- <li class = "attivo" ><a href = "#" > Home </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" > Dropdown </a>
- <ul class = "menu a discesa" >
- <li><a href = "#" > Collegamento secondario </a></li>
- <li><a href = "#" > Qualcos'altro qui </a></li>
- <li classe = "divisore" ></li>
- <li><a href = "#" > Un altro collegamento </a></li>
- </ul>
- </li>
- </ul>
Avviso Se la tua interfaccia utente ha diversi menu a discesa, considera di aggiungere l' data-dropdown
attributo a un elemento contenitore più significativo come .tabs
o .topbar
.
Un'API programmatica per l'attivazione dei menu per una determinata barra in alto o per la navigazione a schede.
Questo plugin serve per aggiungere l'interazione scrollspy (aggiornamento automatico della navigazione) alla barra superiore del bootstrap.
Scarica
- $ ( '#barra in alto' ). scrollSpia ()
Per aggiungere facilmente il comportamento scrollspy al tuo nav, aggiungi semplicemente l' data-scrollspy
attributo al file .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Auto attiva i pulsanti di navigazione in base alla posizione di scorrimento degli utenti.
- $ ( 'corpo > .topbar' ). scrollSpia ()
Avviso I tag di ancoraggio della barra superiore devono avere target ID risolvibili. Ad esempio, un <a href="#home">home</a>
must corrisponde a qualcosa nel dom come <div id="home"></div>
.
Lo scrollspy memorizza nella cache i pulsanti di navigazione e le coordinate di sezione per le prestazioni. Se devi aggiornare questa cache (probabilmente se hai contenuto dinamico), chiama semplicemente questo metodo di aggiornamento. Se hai utilizzato l'attributo data per definire il tuo scrollspy, chiama semplicemente refresh sul corpo.
- $ ( 'corpo' ). scrollSpy ( 'aggiorna' )
Controlla la navigazione nella barra in alto in questa pagina.
Questo plugin aggiunge una scheda rapida e dinamica e funzionalità pillola.
Scarica
- $ ( '.schede' ). schede ()
Puoi attivare una navigazione tramite tab o pillola senza scrivere alcun javascript semplicemente dando loro un attributo data-tabs
o .data-pills
- <ul class = "schede" data-tabs = "schede" > ... </ul>
Attiva la funzionalità di tab e pillola per un determinato contenitore. I collegamenti alle schede dovrebbero fare riferimento agli ID nel documento.
- <ul class = "schede" >
- <li class = "attivo" ><a href = "#home" > Home </a></li>
- <li><a href = "#profile" > Profilo </a></li>
- <li><a href = "#messages" > Messaggi </a></li>
- <li><a href = "#impostazioni" > Impostazioni </a></li>
- </ul>
- < classe div = "contenuto della pillola" >
- <div class = "attivo" id = "casa" > ... </div>
- <div id = "profilo" > ... </div>
- <div id = "messaggi" > ... </div>
- <div id = "impostazioni" > ... </div>
- </div>
- <script>
- $ ( funzione () {
- $ ( '.schede' ). schede ()
- })
- </script>
Evento | Descrizione |
---|---|
modificare | Questo evento si attiva al cambio di scheda. Utilizzare event.target e event.relatedTarget per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente. |
- $ ( '#.schede' ). bind ( 'cambia' , funzione ( e ) {
- e . destinazione // scheda attivata
- e . relatedTarget // scheda precedente
- })
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.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Basato sull'eccellente plugin jQuery.tipsy scritto da Jason Frame; twipsy è una versione aggiornata, che non si basa sulle immagini, utilizza CSS3 per le animazioni e gli attributi dei dati per l'archiviazione dei titoli!
Scarica
- $ ( '#esempio' ). twipsy ( opzioni )
Nome | genere | predefinito | descrizione |
---|---|---|---|
animare | booleano | VERO | applica una transizione di dissolvenza CSS al suggerimento |
ritardoIn | numero | 0 | ritardo prima di mostrare la descrizione comando (ms) |
ritardo Fuori | numero | 0 | ritardo prima di nascondere la descrizione comando (ms) |
ricaderci | corda | '' | testo da utilizzare quando non è presente il titolo della descrizione comando |
posizionamento | corda | 'sopra' | come posizionare la descrizione comando - sopra | sotto | sinistra | Giusto |
html | booleano | falso | consente il contenuto html all'interno del suggerimento |
abitare | booleano | falso | utilizzare la delega di eventi invece dei singoli gestori di eventi |
compensare | numero | 0 | offset in pixel della descrizione comando dall'elemento di destinazione |
titolo | stringa, funzione | 'titolo' | attributo o metodo per recuperare il testo del titolo |
grilletto | corda | 'librarsi' | come viene attivato il suggerimento comando - passa il mouse | messa a fuoco | Manuale |
modello | corda | [marcatura predefinita] | Il modello html utilizzato per il rendering di un twipsy. |
Avviso Le opzioni di singole istanze twipsy possono essere specificate in alternativa tramite l'uso di attributi di dati.
- <a href = "#" data-placement = "below" rel = 'twipsy' title = 'Alcuni titoli di testo' > testo </a>
Allega un gestore twipsy a una raccolta di elementi.
Rivela un elemento twipsy.
- $ ( '#elemento' ). twipsy ( "mostra" )
Nasconde un elemento twipsy.
- $ ( '#elemento' ). twipsy ( "nascondi" )
Restituisce un'istanza della classe twipsy degli elementi.
- $ ( '#elemento' ). twipsy ( vero )
Avviso In alternativa, questo può essere recuperato con $().data('twipsy')
.
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, lo sceneggiatore banky Austin twitter da fattoria a tavola gestisce il virale del caffè single-origine freegan cred denim grezzo.
Il plugin popover fornisce una semplice interfaccia per aggiungere popover alla tua applicazione. Estende il plugin bootstrap-twipsy.js , quindi assicurati di prendere anche quel file quando includi i popover nel tuo progetto!
Avviso È necessario includere il file bootstrap-twipsy.js prima di bootstrap-popover.js.
Scarica
- $ ( '#esempio' ). popover ( opzioni )
Nome | genere | predefinito | descrizione |
---|---|---|---|
animare | booleano | VERO | applica una transizione di dissolvenza CSS al suggerimento |
ritardoIn | numero | 0 | ritardo prima di mostrare la descrizione comando (ms) |
ritardo Fuori | numero | 0 | ritardo prima di nascondere la descrizione comando (ms) |
ricaderci | corda | '' | testo da utilizzare quando non è presente il titolo della descrizione comando |
posizionamento | corda | 'Giusto' | come posizionare la descrizione comando - sopra | sotto | sinistra | Giusto |
html | booleano | falso | consente il contenuto html all'interno del suggerimento |
abitare | booleano | falso | utilizzare la delega di eventi invece dei singoli gestori di eventi |
compensare | numero | 0 | offset in pixel della descrizione comando dall'elemento di destinazione |
titolo | stringa, funzione | 'titolo' | attributo o metodo per recuperare il testo del titolo |
contenuto | stringa, funzione | 'contenuto di dati' | una stringa o un metodo per recuperare il testo del contenuto. se non ne viene fornito nessuno, il contenuto verrà originato da un attributo data-content. |
grilletto | corda | 'librarsi' | come viene attivato il suggerimento comando - passa il mouse | messa a fuoco | Manuale |
modello | corda | [marcatura predefinita] | Il modello html utilizzato per il rendering di un popover. |
Avviso Le opzioni di singole istanze popover possono essere specificate in alternativa tramite l'uso di attributi di dati.
- <a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > testo </a>
Inizializza i popover per una raccolta di elementi.
Rivela un popover di elementi.
- $ ( '#elemento' ). popover ( 'mostra' )
Nasconde un popover di elementi.
- $ ( '#elemento' ). popover ( "nascondi" )
Il plug-in di avviso è una classe molto piccola per aggiungere funzionalità di chiusura agli avvisi.
Scarica
- $ ( ".messaggio di avviso" ). avviso ()
Basta aggiungere un data-alert
attributo ai tuoi messaggi di avviso per dare loro automaticamente una funzionalità di chiusura.
Nome | genere | predefinito | descrizione |
---|---|---|---|
selettore | corda | '.chiudere' | Quale selettore scegliere come target per la chiusura di un 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 .fade
e sia .in
già applicata.
Chiude un avviso.
- $ ( ".messaggio di avviso" ). avviso ( "chiudi" )