U nostru plugin Modale hè una versione super slim nantu à u plugin modal js tradiziunale, tenendu cura speciale per include solu a funziunalità nuda chì avemu bisognu quì in Twitter.

Scaricate

Utilizendu bootstrap-modal

$ ( '#my-modal' ). modale ( opzioni )

Opzioni

Nome	tipu	predeterminatu	descrizzione
sfondate	booleanu, stringa	falsu	Include un elementu di fondu modale. Pone u fondu à "static"se ùn vulete micca u modale chjusu quandu u fondu hè clicatu.
tastiera	booleanu	falsu	Chiude u modale quandu si preme a chjave di escape
mostra	booleanu	falsu	Apertura modale nantu à l'inizializazione di classi

Marcatura

Pudete attivà i modali nantu à a vostra pagina facilmente senza avè da scrive una sola linea di javascript. Basta à dà à un elementu un data-controls-modalattributu chì currisponde à un id di l'elementu modale, è quandu cliccate, lanciarà u vostru modale. Per aghjunghje l'opzioni modali, basta includeli cum'è attributi di dati.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Launch Modal </a>    

Avvisu Se vulete chì u vostru modale animi in è fora, basta aghjunghje una .fadeclassa à u vostru .modalelementu (riferite à a demo per vede questu in azione).

I metudi

.modale (opzioni)

Attiva u vostru cuntenutu cum'è modale. Accetta opzioni opzionali object.

$ ( '#my-modal' ). modale ({
  tastiera : vera 
})

.modal('toggle')

Cambia manualmente un modale.

$ ( '#my-modal' ). modale ( 'basculà' )

.modal('mostra')

Apertura manualmente un modale.

$ ( '#my-modal' ). modale ( 'mostra' )

.modal('hide')

Oculta manualmente un modale.

$ ( '#my-modal' ). modale ( 'hide' )

.modale (veru)

Ritorna un'istanza di classa modale di elementi.

$ ( '#my-modal' ). modale ( veru )

Avvisu In alternativa, questu pò esse recuperatu cù $().data('modal').

Avvenimenti

A classa modale di Bootstrap espone uni pochi di avvenimenti per attaccà à a funziunalità modale.

Avvenimentu	Descrizzione
mostra	Questu avvenimentu spara immediatamente quandu u showmetudu di istanza hè chjamatu.
mostratu	Questu avvenimentu hè sparatu quandu u modale hè statu resu visibile à l'utilizatore (aspetterà chì e transizioni css finiscinu).
ammuccià	Questu avvenimentu hè sparatu immediatamente quandu u hidemetudu di istanza hè statu chjamatu.
ammucciatu	Questu avvenimentu hè sparatu quandu u modale hà finitu di esse oculatu da l'utilizatore (aspetterà chì e transizioni css finiscinu).

$ ( '#my-modal' ). bind ( 'hidden' , function () {   
  // fà qualcosa...
})

Demo

Lanciate Modal

Stu plugin hè per aghjunghje l'interazione dropdown à a barra superiore di bootstrap o navigazioni tabulati.

Scaricate

Utilizendu bootstrap-dropdown.js

$ ( '#topbar' ). menu a tendina ()

Marcatura

Per aghjunghje rapidamente a funziunalità dropdown à qualsiasi elementu di navigazione, utilizate l' data-dropdownattributu. Qualchese dropdown di bootstrap validu serà attivatu automaticamente.

<ul class = "tabs" > 
  <li class = "active" ><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 = "#" > Ligame secundariu </a></li> 
      <li><a href = "#" > Qualcosa altru quì </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Un altru ligame </a></li> 
    </ul>
  </li>
</ul>

Avvisu Se u vostru ui hà parechji menu dropdowns, cunzidira à aghjunghje l' data-dropdownattributu à un elementu di cuntainer più significativu cum'è .tabso .topbar.

I metudi

$().dropdown()

Una api programatica per attivà i menu per una determinata barra superiore o navigazione a tabulazione.

Demo

Stu plugin hè per aghjunghje l'interazzione scrollspy (auto aghjurnamentu nav) à a barra superiore di bootstrap.

Scaricate

Utilizendu bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Marcatura

Per aghjunghje facilmente u cumpurtamentu scrollspy à u vostru navigatore, aghjunghje solu l' data-scrollspyattributu à u .topbar.

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

I metudi

$().scrollSpy()

Attiva automaticamente i buttoni di navigazione da a pusizione di scorrimentu di l'utilizatori.

$ ( 'corpu > .topbar' ). scrollSpy ()

Avvisu chì i tag d'ancora di Topbar deve avè target id risolvibili. Per esempiu, un <a href="#home">home</a>must currisponde à qualcosa in u dom cum'è <div id="home"></div>.

.scrollSpy('refresh')

U scrollspy cache i buttoni di navigazione è e coordinate di sezione per u rendiment. Sè avete bisognu di aghjurnà sta cache (probabilmente s'ellu avete cuntenutu dinamicu) chjamate solu stu metudu di rinfrescante. Sè avete utilizatu l'attributu di dati per definisce u vostru scrollspy, solu chjamate rinfrescante nantu à u corpu.

$ ( "corpu" ). scrollSpy ( 'refresh' )

Demo

Verificate a navigazione superiore in questa pagina.

Stu plugin offre funziunalità supplementari per a gestione di u statu di u buttone.

Scaricate

Utilizà bootstrap-buttons.js

$ ( '.tabs' ). buttone ()

I metudi

$().button('toggle')

Toggles push state. Dà à btn l'aspettu chì hè statu attivatu.

Avvisu Pudete attivà a commutazione automatica di un buttone usendu l' data-toggleattributu.

<button class = "btn" data-toggle = "toggle" > ... </button>   

$().button('caricamentu')

Imposta u statu di u buttone à carica - disattiva u buttone è scambia u testu à u testu di carica. U testu di caricamentu deve esse definitu nantu à l'elementu buttone cù l'attributu di dati data-loading-text.

<button class = "btn" data-loading-text = "carricamentu di cose..." > ... </button>   

$().button('reset')

Resetta u statu di u buttone - scambia u testu à u testu originale.

$().button(string)

Resetta u statu di u buttone - scambia u testu à qualsiasi statu di testu definitu di dati.

<button class = "btn" data-complete-text = "finitu!" > ... </button>   
<script>
  $('.btn').button('complete')
</scrip>

Demo

Carica Demo Toggle Demo

Stu plugin aghjusta una tabulazione rapida è dinamica è funziunalità di pillola.

Scaricate

Utilizendu bootstrap-tabs.js

$ ( '.tabs' ). tabs ()

Marcatura

Pudete attivà una tabulazione o una navigazione di pillola senza scrivite alcuna javascript semplicemente dendu un data-tabso data-pillsattributu.

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

I metudi

$().tabs o $().pills

Attiva a funziunalità di tabulazione è pillola per un cuntainer datu. I ligami di tabulazione duveranu riferite l'ID in u documentu.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profile </a></li> 
  <li><a href = "#messages" > Missaghji </a></li> 
  <li><a href = "#settings" > Settings </a></li> 
</ul>
 
<div class = "contenu di pillola" > 
  <div class = "active" id = "casa" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "parametri" > ... </div> 
</div>
 
<script>
  $ ( funzione () {  
    $ ( '.tabs' ). tabs ()
  })
</script>

Avvenimenti

Avvenimentu	Descrizzione
cambià	Questu avvenimentu spara nantu à u cambiamentu di tabulazione. Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva è a tabulazione attiva precedente rispettivamente.

$ ( '#.tabs' ). bind ( 'cambià' , funzione ( e ) {   
  e . target // tab attivata
  e . relatedTarget // tab precedente
})

Demo

• A casa
• Prufilu
• Missaghji
• Settings
• Dropdown
  • @grassu
  • @mdo

Basatu nantu à l'excellente plugin jQuery.tipsy scrittu da Jason Frame; twipsy hè una versione aghjurnata, chì ùn si basa micca nantu à l'imaghjini, usa css3 per animazioni, è attributi di dati per u almacenamentu di u titulu!

Scaricate

Utilizendu bootstrap-twipsy.js

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

Opzioni

Nome	tipu	predeterminatu	descrizzione
animate	booleanu	veru	applicà una transizione di fade css à u tooltip
ritardu In	numeru	0	ritardu prima di mostra l'infobule (ms)
ritardu	numeru	0	ritardu prima di nascondere tooltip (ms)
fallback	stringa	''	testu à aduprà quandu ùn ci hè micca un titulu di tooltip
piazzamentu	stringa	'sopra'	quantu à pusà u tooltip - sopra | sottu | manca | diritta
html	booleanu	falsu	permette u cuntenutu html in tooltip
vivu	booleanu	falsu	Aduprate a delegazione di l'avvenimentu invece di i gestori di l'avvenimenti individuali
offset	numeru	0	offset di pixel di tooltip da l'elementu di destinazione
titulu	stringa, funzione	'titulu'	attributu o metudu per ricuperà u testu di u titulu
trigger	stringa	'passa'	cume tooltip hè attivatu - hover | focus | manuale
mudellu	stringa	[marcatura predefinita]	U mudellu html utilizatu per rende un twipsy.

Avvisu Opzioni individuali di l'istanza di twipsy ponu alternativamente esse specificate attraversu l'usu di l'attributi di dati.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Un pocu di testu di titulu' > testu </a>    

I metudi

$().twipsy(opzioni)

Attacca un gestore twipsy à una cullizzioni di elementi.

.twipsy('mostra')

Revela un elementi twipsy.

$ ( '#elementu' ). twipsy ( 'mostra' )

.twipsy('hide')

Nasconde un elementi twipsy.

$ ( '#elementu' ). twipsy ( 'hide' )

.twipsy (veru)

Ritorna un'istanza di classe di elementi twipsy.

$ ( '#elementu' ). twipsy ( veru )

Avvisu In alternativa, questu pò esse recuperatu cù $().data('twipsy').

Demo

U plugin popover furnisce una interfaccia simplice per aghjunghje popovers à a vostra applicazione. Estende u plugin bootstrap-twipsy.js , dunque assicuratevi di catturà ancu quellu schedariu quandu include popovers in u vostru prughjettu!

Avvisu Duvete include u schedariu bootstrap-twipsy.js prima di bootstrap-popover.js.

Scaricate

Utilizendu bootstrap-popover.js

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

Opzioni

Nome	tipu	predeterminatu	descrizzione
animate	booleanu	veru	applicà una transizione di fade css à u tooltip
ritardu In	numeru	0	ritardu prima di mostra l'infobule (ms)
ritardu	numeru	0	ritardu prima di nascondere tooltip (ms)
fallback	stringa	''	testu à aduprà quandu ùn ci hè micca un titulu di tooltip
piazzamentu	stringa	'diritta'	quantu à pusà u tooltip - sopra | sottu | manca | diritta
html	booleanu	falsu	permette u cuntenutu html in tooltip
vivu	booleanu	falsu	Aduprate a delegazione di l'avvenimentu invece di i gestori di l'avvenimenti individuali
offset	numeru	0	offset di pixel di tooltip da l'elementu di destinazione
titulu	stringa, funzione	'titulu'	attributu o metudu per ricuperà u testu di u titulu
cuntenutu	stringa, funzione	"cuntenutu di dati"	una stringa o un metudu per ricuperà u testu di cuntenutu. se nimu sò furniti, u cuntenutu serà acquistatu da un attributu di cuntenutu di dati.
trigger	stringa	'passa'	cume tooltip hè attivatu - hover | focus | manuale
mudellu	stringa	[marcatura predefinita]	U mudellu html utilizatu per rende un popover.

Avvisu Opzioni individuali d'istanza popover ponu esse specificate alternativamente attraversu l'usu di l'attributi di dati.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > testu </a>    

I metudi

$().popover(opzioni)

Inizializza popovers per una cullizzioni di elementi.

.popover('mostra')

Revela un popover di elementi.

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

.popover('hide')

Nasconde un popover di elementi.

$ ( '#elementu' ). popover ( 'hide' )

Demo

passa per popover

U plugin d'alerta hè una classa super minuscula per aghjunghje funziunalità vicinu à l'alerte.

Scaricate

Utilizà bootstrap-alerts.js

$ ( ".alert-message" ). alerta ()

Marcatura

Solu aghjunghje un data-alertattributu à i vostri messagi d'alerta per dà automaticamente una funziunalità vicinu.

Opzioni

Nome	tipu	predeterminatu	descrizzione
selettore	stringa	'.close'	Quale selettore di destinazione per chjude una alerta.

I metudi

$().alert()

Avvolge tutte l'alerte cù una funziunalità stretta. Per avè i vostri alerti animati quandu sò chjusi, assicuratevi di avè a classe .fadeè .indigià applicata à elli.

.alert('close')

Chiude una alerta.

$ ( ".alert-message" ). alerta ( 'close' )

Demo