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

Usando bootstrap-modal

$ ( '#mio-modale' ). modale ( opzioni )

Opzioni

Nome	genere	predefinito	descrizione
sfondo	booleano	falso	Include un elemento di sfondo modale
tastiera del computer	booleano	falso	Chiude il modale quando viene premuto il tasto Esc
mostrare	booleano	falso	Apre modale all'inizializzazione della classe

Marcatura

Puoi attivare facilmente le modali sulla tua pagina senza dover scrivere una sola riga di javascript. Basta dare a un elemento un data-controls-modalattributo 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 = "true" > Avvia modale </a>    

Avviso Se vuoi che il tuo modale si anima dentro e fuori, aggiungi semplicemente una .fadeclasse al tuo .modalelemento (fai riferimento alla demo per vederlo in azione).

Metodi

.modal(opzioni)

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

$ ( '#mio-modale' ). modale ({
  closeOnEscape : vero 
})

.modal('toggle')

Alterna manualmente un modale.

$ ( '#mio-modale' ). modale ( 'attiva/disattiva' )

.modal('mostra')

Apre manualmente un modale.

$ ( '#mio-modale' ). modale ( 'mostra' )

.modal('nascondi')

Nasconde manualmente un modale.

$ ( '#mio-modale' ). modale ( 'nascondi' )

.modal(true)

Restituisce un'istanza di classe modale degli elementi.

$ ( '#mio-modale' ). modale ( vero )

Avviso In alternativa, questo può essere recuperato con $().data('modal').

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

$ ( '#mio-modale' ). bind ( 'nascosto' , funzione () {   
  // fare qualcosa ...
})

Demo

Lancio modale

Questo plugin serve per aggiungere l'interazione a discesa alla barra in alto bootstrap o alle navigazioni a schede.

Scarica

Utilizzando boostrap-dropdown.js

$ ( '#barra in alto' ). menu a discesa ()

Marcatura

Per aggiungere rapidamente funzionalità a discesa a qualsiasi elemento di navigazione, utilizza l' data-dropdownattributo. 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-dropdownattributo a un elemento contenitore più significativo come .tabso .topbar.

Metodi

$().dropdown()

Un'API programmatica per l'attivazione dei menu per una determinata barra in alto o per la navigazione a schede.

Demo

Questo plugin serve per aggiungere l'interazione scrollspy (aggiornamento automatico della navigazione) alla barra superiore del bootstrap.

Scarica

Utilizzando boostrap-scrollspy.js

$ ( '#barra in alto' ). menu a discesa ()

Marcatura

Per aggiungere facilmente il comportamento scrollspy al tuo nav, aggiungi semplicemente l' data-scrollspyattributo al file .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Metodi

$().scorrimento()

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

.scrollspy('aggiorna')

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

Demo

Controlla la navigazione nella barra in alto in questa pagina.

Questo plugin aggiunge una scheda rapida e dinamica e funzionalità pillola.

Scarica

Utilizzando boostrap-tabs.js

$ ( '.schede' ). schede ()

Marcatura

Puoi attivare una navigazione tramite tab o pillola senza scrivere alcun javascript semplicemente dando loro un attributo data-tabso .data-pills

 <ul class = "schede" data-tabs = "schede" > ... </ul>   

Metodi

$().tabs o $().pillole

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> 
</ul>
 
<script>
  $ ( funzione () {  
    $ ( '.schede' ). schede ()
  })
</script>

Demo

• Casa
• Profilo
• Messaggi
• Impostazioni

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

Utilizzando bootstrap-twipsy.js

$ ( '#esempio' ). twipsy ( opzioni )

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

Metodi

$().twipsy(opzioni)

Allega un gestore twipsy a una raccolta di elementi.

.twipsy('mostra')

Rivela un elemento twipsy.

$ ( '#elemento' ). twipsy ( "mostra" )

.twipsy('nascondi')

Nasconde un elemento twipsy.

$ ( '#elemento' ). twipsy ( "nascondi" )

.twipsy (vero)

Restituisce un'istanza della classe twipsy degli elementi.

$ ( '#elemento' ). twipsy ( vero )

Avviso In alternativa, questo può essere recuperato con $().data('twipsy').

Demo

Il plugin popover fornisce una semplice interfaccia per aggiungere popover alla tua applicazione. Estende il plug-in boostrap-twipsy.js , quindi assicurati di prendere anche quel file quando includi i popover nel tuo progetto!

Scarica

Utilizzando boostrap-popover.js

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

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'	attributo o metodo per recuperare il testo del contenuto
grilletto	corda	'librarsi'	come viene attivato il suggerimento comando - passa il mouse | messa a fuoco | Manuale

Metodi

$().popover(opzioni)

Inizializza i popover per una raccolta di elementi.

.popover('mostra')

Rivela un popover di elementi.

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

.popover('nascondi')

Nasconde un popover di elementi.

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

Demo

passa il mouse per il popover

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

Scarica

Utilizzando bootstrap-alerts.js

$ ( ".messaggio di avviso" ). avviso ()

Marcatura

Basta aggiungere un data-alertattributo ai tuoi messaggi di avviso per dare loro automaticamente una funzionalità di chiusura.

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.

$ ( ".messaggio di avviso" ). avviso ( "chiudi" )

Demo