Pluginul nostru Modal este o interpretare super subțire a plugin-ului tradițional modal js, având o grijă deosebită să includă doar funcționalitatea strictă de care avem nevoie aici la Twitter.
Descarca
- $ ( '#modalul meu' ). modal ( opțiuni )
Nume | tip | Mod implicit | Descriere |
---|---|---|---|
fundal | boolean, șir | fals | Include un element modal de fundal. Setați fundalul la "static" dacă nu doriți ca modalul să fie închis atunci când se face clic pe fundal. |
tastatură | boolean | fals | Închide modulul când este apăsată tasta Escape |
spectacol | boolean | fals | Deschide modal la inițializarea clasei |
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-modal
atribut 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 = "static" > 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 .fade
clasă la .modal
elementul dvs. (consultați demonstrația pentru a vedea asta în acțiune).
Activează conținutul dvs. ca modal. Acceptă opțiuni opționale object
.
- $ ( '#modalul meu' ). modal ({
- tastatură : adevărat
- })
Comută manual un mod.
- $ ( '#modalul meu' ). modal ( „comutați” )
Deschide manual un modal.
- $ ( '#modalul meu' ). modal ( 'arată' )
Ascunde manual un modal.
- $ ( '#modalul meu' ). modal ( „ascunde” )
Returnează o instanță de clasă modală de elemente.
- $ ( '#modalul meu' ). modal ( adevarat )
Notă În mod alternativ, aceasta poate fi preluată cu $().data('modal')
.
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 show este 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 hide metoda 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 ...
- })
Acest plugin este pentru adăugarea interacțiunii drop-down la bara de sus bootstrap sau la navigațiile cu file.
Descarca
- $ ( '#bara de sus' ). meniu derulant ()
Pentru a adăuga rapid funcționalitate drop-down oricărui element de navigare, utilizați data-dropdown
atributul. 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-dropdown
atributului la un element container mai semnificativ, cum ar fi .tabs
sau .topbar
.
O API programatică pentru activarea meniurilor pentru o anumită bară de sus sau navigare cu file.
Acest plugin este pentru adăugarea interacțiunii scrollspy (actualizare automată nav) la bara de sus a bootstrap.
Descarca
- $ ( '#bara de sus' ). scrollSpy ()
Pentru a adăuga cu ușurință comportamentul scrollspy la navigația dvs., trebuie doar să adăugați data-scrollspy
atributul la .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
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 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” )
Verificați navigarea din bara de sus de pe această pagină.
Acest plugin adaugă o filă rapidă, dinamică și funcționalitate de pilule.
Descarca
- $ ( '.tabs' ). file ()
Puteți activa o navigare prin filă sau pilule fără a scrie niciun javascript, dându-le pur și simplu un atribut data-tabs
sau .data-pills
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
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>
- </div>
- <script>
- $ ( funcția () {
- $ ( '.tabs' ). file ()
- })
- </script>
Eveniment | Descriere |
---|---|
Schimbare | Acest eveniment se declanșează la schimbarea filei. Utilizați event.target și event.relatedTarget pentru a viza fila activă și, respectiv, fila activă anterioară. |
- $ ( '#.file' ). bind ( 'schimbare' , funcţia ( e ) {
- e . țintă // filă activată
- e . relatedTarget // fila anterioară
- })
Denim brut probabil că nu ați auzit de ei pantaloni scurți de blugi Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Pulover Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher 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.
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
- $ ( '#exemplu' ). twipsy ( 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 |
șablon | şir | [marcaj implicit] | Șablonul html folosit pentru redarea unui twipsy. |
Notă Opțiunile individuale ale instanțelor twipsy pot fi specificate alternativ prin utilizarea atributelor de date.
- <a href = "#" data-placement = "below" rel = 'twipsy' title = 'Un text de titlu' > text </a>
Atașează un handler twipsy la o colecție de elemente.
Dezvăluie un element twipsy.
- $ ( '#element' ). twipsy ( 'arată' )
Ascunde un element twipsy.
- $ ( '#element' ). twipsy ( „ascunde” )
Returnează o instanță a clasei twipsy de elemente.
- $ ( '#element' ). twipsy ( adevarat )
Notă În mod alternativ, aceasta poate fi preluată cu $().data('twipsy')
.
Pantaloni strâmți, keffiyeh , probabil că nu ați auzit de ei. Cabina foto barbă din denim brut tipografie geantă vegană stumptown. Seitanul de la fermă la masă, mcsweeney's fixie sustainable quinoa 8-bit american apparel au un terry richardson vinyl chambray. Beard Stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. Un artizan cu adevărat ironic indiferent de keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim cafea de origine unică virală.
Pluginul popover oferă o interfață simplă pentru adăugarea de popover la aplicația dvs. Extinde pluginul bootstrap-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.!
Notă Trebuie să includeți fișierul bootstrap-twipsy.js înainte de bootstrap-popover.js.
Descarca
- $ ( '#exemplu' ). popover ( 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” | un șir sau o metodă de preluare a textului de conținut. dacă nu sunt furnizate, conținutul va fi obținut dintr-un atribut de conținut de date. |
declanșatorul | şir | 'planare' | cum este declanșat tooltip - hover | focus | manual |
șablon | şir | [marcaj implicit] | Șablonul html folosit pentru redarea unui popover. |
Notă Opțiunile de instanță popover individuale pot fi specificate alternativ prin utilizarea atributelor de date.
- <a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>
Inițializează popover-urile pentru o colecție de elemente.
Dezvăluie un popover de elemente.
- $ ( '#element' ). popover ( 'arată' )
Ascunde un popover de elemente.
- $ ( '#element' ). popover ( „ascunde” )
Pluginul de alertă este o clasă foarte mică pentru adăugarea unei funcționalități apropiate alertelor.
Descarca
- $ ( ".mesaj-alertă" ). alertă ()
Doar adăugați un data-alert
atribut la mesajele dvs. de alertă pentru a le oferi automat o funcționalitate apropiată.
Nume | tip | Mod implicit | Descriere |
---|---|---|---|
selector | şir | '.închide' | Ce selector să vizați pentru închiderea unei alerte. |
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
Închide o alertă.
- $ ( ".mesaj-alertă" ). alertă ( „închidere” )