Pluginul nostru Modal este o interpretare super subțire a pluginului tradițional modal js, având o grijă deosebită să includă doar funcționalitatea strictă de care avem nevoie aici la Twitter.

Descarca

Folosind bootstrap-modal

$ ( '#modalul meu' ). modal ( opțiuni )

Opțiuni

Nume	tip	Mod implicit	Descriere
fundal	boolean	fals	Include un element modal de fundal
tastatură	boolean	fals	Închide modulul când este apăsată tasta Escape
spectacol	boolean	fals	Deschide modal la inițializarea clasei

Markup

Puteți activa cu ușurință modalele pe pagina dvs. fără a fi nevoie să scrieți o singură linie de javascript. Doar dați unui element un data-controls-modalatribut care corespunde unui id de element modal și, atunci când faceți clic, acesta va lansa modulul dvs. Pentru a adăuga opțiuni modale, includeți-le și ca atribute de date.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Lansați modal </a>    

Notă Dacă doriți ca modalul dvs. să se anime înăuntru și în afara, trebuie doar să adăugați o .fadeclasă la .modalelementul dvs. (consultați demonstrația pentru a vedea asta în acțiune).

Metode

.modal(opțiuni)

Activează conținutul dvs. ca modal. Acceptă opțiuni opționale object.

$ ( '#modalul meu' ). modal ({
  closeOnEscape : adevărat 
})

.modal('comutați')

Comută manual un modal.

$ ( '#modalul meu' ). modal ( „comutați” )

.modal('arată')

Deschide manual un modal.

$ ( '#modalul meu' ). modal ( 'arată' )

.modal('ascunde')

Ascunde manual un modal.

$ ( '#modalul meu' ). modal ( „ascunde” )

.modal(adevărat)

Returnează o instanță de clasă modală de elemente.

$ ( '#modalul meu' ). modal ( adevarat )

Notă În mod alternativ, aceasta poate fi preluată cu $().data('modal').

Evenimente

Clasa modală a Bootstrap expune câteva evenimente pentru conectarea la funcționalitatea modală.

Eveniment	Descriere
spectacol	Acest eveniment se declanșează imediat când showeste apelată metoda instanței.
afișate	Acest eveniment este declanșat atunci când modalul a fost făcut vizibil pentru utilizator (va aștepta finalizarea tranzițiilor CSS).
ascunde	Acest eveniment este declanșat imediat când hidemetoda instanței a fost apelată.
ascuns	Acest eveniment este declanșat când modalul a terminat de ascuns utilizatorului (va aștepta finalizarea tranzițiilor CSS).

$ ( '#modalul meu' ). bind ( 'ascuns' , function () {   
  // Fă ceva ...
})

Demo

Lansați Modal

Acest plugin este pentru adăugarea interacțiunii drop-down la bara de sus bootstrap sau la navigațiile cu file.

Descarca

Folosind boostrap-dropdown.js

$ ( '#bara de sus' ). meniu derulant ()

Markup

Pentru a adăuga rapid o funcționalitate drop-down oricărui element de navigare, utilizați data-dropdownatributul. Orice meniu derulant de bootstrap valid va fi activat automat.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Acasă </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Meniu derulant </a>  
    <ul class = "meniu derulant" > 
      <li><a href = "#" > Link secundar </a></li> 
      <li><a href = "#" > Altceva aici </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Un alt link </a></li> 
    </ul>
  </li>
</ul>

Observație Dacă interfața dvs. de utilizare are mai multe meniuri derulante, luați în considerare adăugarea data-dropdownatributului la un element container mai semnificativ, cum ar fi .tabssau .topbar.

Metode

$().dropdown()

O API programatică pentru activarea meniurilor pentru o anumită bară de sus sau navigare cu file.

Demo

Acest plugin este pentru adăugarea interacțiunii scrollspy (actualizare automată nav) la bara de sus a bootstrap.

Descarca

Folosind boostrap-scrollspy.js

$ ( '#bara de sus' ). meniu derulant ()

Markup

Pentru a adăuga cu ușurință comportamentul scrollspy la navigația dvs., trebuie doar să adăugați data-scrollspyatributul la .topbar.

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

Metode

$().scrollspy()

Activează automat butoanele de navigare în funcție de poziția de defilare a utilizatorilor.

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

Observați că etichetele de ancorare Topbar trebuie să aibă ținte de identificare rezolvabile. De exemplu, un <a href="#home">home</a>must corespunde cu ceva din dom precum <div id="home"></div>.

.scrollspy('refresh')

Scrollspy memorează în cache butoanele de navigare și coordonatele secțiunilor pentru performanță. Dacă trebuie să actualizați acest cache (probabil dacă aveți conținut dinamic), apelați această metodă de reîmprospătare. Dacă ați folosit atributul de date pentru a vă defini scrollspy, doar apelați refresh pe corp.

$ ( „corp” ). scrollspy ( „reîmprospătare” )

Demo

Verificați navigarea din bara de sus de pe această pagină.

Acest plugin adaugă o filă rapidă, dinamică și funcționalitate de pilule.

Descarca

Folosind boostrap-tabs.js

$ ( '.tabs' ). file ()

Markup

Puteți activa o navigare prin filă sau pilule fără a scrie niciun javascript, dându-le pur și simplu un atribut data-tabssau .data-pills

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

Metode

$().tabs sau $().pilulele

Activează funcționalitatea filă și pilule pentru un anumit recipient. Linkurile de filă ar trebui să facă referire la ID-urile din document.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Acasă </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Mesaje </a></li> 
  <li><a href = "#settings" > Setări </a></li> 
</ul>
 
<div class = "conținut de pilule" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "mesaje" > ... </div> 
  <div id = "settings" > ... </div> 
</ul>
 
<script>
  $ ( funcția () {  
    $ ( '.tabs' ). file ()
  })
</script>

Demo

• Acasă
• Profil
• Mesaje
• Setări

Bazat pe excelentul plugin jQuery.tipsy scris de Jason Frame; twipsy este o versiune actualizată, care nu se bazează pe imagini, folosește css3 pentru animații și atribute de date pentru stocarea titlurilor!

Descarca

Folosind bootstrap-twipsy.js

$ ( '#exemplu' ). twipsy ( opțiuni )

Opțiuni

Nume	tip	Mod implicit	Descriere
anima	boolean	Adevărat	aplicați o tranziție de estompare css la sfatul instrumentului
delayIn	număr	0	întârziere înainte de afișarea balonului explicativ (ms)
delayOut	număr	0	întârziere înainte de a ascunde balonul explicativ (ms)
da înapoi	şir	''	text de utilizat atunci când nu este prezent un titlu de indicație
plasare	şir	'de mai sus'	cum să poziționați tooltip - deasupra | mai jos | stânga | dreapta
html	boolean	fals	permite conținut html în tooltip
Trăi	boolean	fals	utilizați delegarea evenimentelor în loc de handlere de evenimente individuale
decalaj	număr	0	offset de pixeli a balonului explicativ față de elementul țintă
titlu	șir | funcţie	'titlu'	atribut sau metodă de preluare a textului titlului
declanșatorul	şir	'planare'	cum este declanșat tooltip - hover | focus | manual

Metode

$().twipsy(opțiuni)

Atașează un handler twipsy la o colecție de elemente.

.twipsy('arată')

Dezvăluie un element twipsy.

$ ( '#element' ). twipsy ( 'arată' )

.twipsy('ascunde')

Ascunde un element twipsy.

$ ( '#element' ). twipsy ( „ascunde” )

.twipsy (adevărat)

Returnează o instanță a clasei twipsy de elemente.

$ ( '#element' ). twipsy ( adevărat )

Notă În mod alternativ, aceasta poate fi preluată cu $().data('twipsy').

Demo

Pluginul popover oferă o interfață simplă pentru adăugarea de popover la aplicația dvs. Extinde pluginul boostrap-twipsy.js , așa că asigurați-vă că luați și acel fișier atunci când includeți popover-uri în proiectul dvs.!

Descarca

Folosind boostrap-popover.js

$ ( '#exemplu' ). popover ( opțiuni )

Opțiuni

Nume	tip	Mod implicit	Descriere
anima	boolean	Adevărat	aplicați o tranziție de estompare css la sfatul instrumentului
delayIn	număr	0	întârziere înainte de afișarea balonului explicativ (ms)
delayOut	număr	0	întârziere înainte de a ascunde balonul explicativ (ms)
da înapoi	şir	''	text de utilizat atunci când nu este prezent un titlu de indicație
plasare	şir	'dreapta'	cum să poziționați tooltip - deasupra | mai jos | stânga | dreapta
html	boolean	fals	permite conținut html în tooltip
Trăi	boolean	fals	utilizați delegarea evenimentelor în loc de handlere de evenimente individuale
decalaj	număr	0	offset de pixeli a balonului explicativ față de elementul țintă
titlu	șir | funcţie	'titlu'	atribut sau metodă de preluare a textului titlului
conţinut	șir | funcţie	„conținut de date”	atribut sau metodă de preluare a textului de conținut
declanșatorul	şir	'planare'	cum este declanșat tooltip - hover | focus | manual

Metode

$().popover(opțiuni)

Inițializează popover-urile pentru o colecție de elemente.

.popover('arată')

Dezvăluie un popover de elemente.

$ ( '#element' ). popover ( 'arată' )

.popover('ascunde')

Ascunde un popover de elemente.

$ ( '#element' ). popover ( „ascunde” )

Demo

hover pentru popover

Pluginul de alertă este o clasă foarte mică pentru adăugarea unei funcționalități apropiate alertelor.

Descarca

Folosind bootstrap-alerts.js

$ ( ".mesaj-alertă" ). alertă ()

Markup

Doar adăugați un data-alertatribut la mesajele dvs. de alertă pentru a le oferi automat o funcționalitate apropiată.

Metode

$().alert()

Include toate alertele cu o funcționalitate apropiată. Pentru ca alertele dvs. să fie animate când sunt închise, asigurați-vă că au aplicat deja clasa .fadeși ..in

.alert('închidere')

Închide o alertă.

$ ( ".mesaj-alertă" ). alertă ( „închidere” )

Demo