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

Utilizà bootstrap-modal

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

Opzioni

Nome	tipu	predeterminatu	descrizzione
sfondate	booleanu	falsu	Include un elementu di fondu modale
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 = "true" > 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 ({
  closeOnEscape : veru 
})

.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 boostrap-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à parechje 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 data topbar o navigazione tabulata.

Demo

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

Scaricate

Utilizendu boostrap-scrollspy.js

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

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 aghjusta una tabulazione rapida è dinamica è funziunalità di pillola.

Scaricate

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

Demo

• A casa
• Prufilu
• Missaghji
• Settings

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 mustrà l'infobule (ms)
ritardu	numeru	0	ritardu prima di nascondere tooltip (ms)
fallback	stringa	''	testu da 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

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 boostrap-twipsy.js , dunque assicuratevi di catturà ancu quellu schedariu quandu include popovers in u vostru prughjettu!

Scaricate

Utilizendu boostrap-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 mustrà l'infobule (ms)
ritardu	numeru	0	ritardu prima di nascondere tooltip (ms)
fallback	stringa	''	testu da 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"	attributu o metudu per ricuperà u testu di cuntenutu
trigger	stringa	'passa'	cume tooltip hè attivatu - hover | focus | manuale

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

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

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