Naš vtičnik Modal je super tanka različica tradicionalnega vtičnika modal js, pri čemer je posebna pozornost namenjena vključitvi le golih funkcij, ki jih potrebujemo tukaj na twitterju.
Prenesi
- $ ( '#my-modal' ). modalno ( možnosti )
Ime | vrsta | privzeto | opis |
---|---|---|---|
ozadje | logično | lažno | Vključuje element modalne kulise |
tipkovnico | logično | lažno | Zapre modal, ko pritisnete tipko za izhod |
pokazati | logično | lažno | Odpre modal ob inicializaciji razreda |
Modale na svoji strani lahko preprosto aktivirate, ne da bi morali napisati eno vrstico javascripta. Samo dajte elementu data-controls-modal
atribut, ki ustreza ID-ju modalnega elementa, in ko kliknete, bo zagnal vaš modal. Če želite dodati modalne možnosti, jih preprosto vključite tudi kot atribute podatkov.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Zaženi Modal </a>
Opomba Če želite, da se vaš modal animira noter in out, preprosto dodajte .fade
razred svojemu .modal
elementu (glejte predstavitev, da vidite to v akciji).
Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object
.
- $ ( '#my-modal' ). modalno ({
- closeOnEscape : res
- })
Ročno preklopi modal.
- $ ( '#my-modal' ). modalno ( 'preklop' )
Ročno odpre modal.
- $ ( '#my-modal' ). modalno ( 'pokaži' )
Ročno skrije modal.
- $ ( '#my-modal' ). modalno ( 'skrij' )
Vrne primerek modalnega razreda elementov.
- $ ( '#my-modal' ). modalno ( res )
Opomba To lahko prikličete tudi z $().data('modal')
.
Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.
Dogodek | Opis |
---|---|
pokazati | Ta dogodek se sproži takoj, ko show se pokliče metoda primerka. |
prikazano | Ta dogodek se sproži, ko je modal viden uporabniku (počakal bo, da se prehodi css dokončajo). |
skriti | Ta dogodek se sproži takoj, ko hide je bila poklicana metoda primerka. |
skrit | Ta dogodek se sproži, ko je modal prenehal biti skrit pred uporabnikom (počakal bo, da se zaključijo prehodi css). |
- $ ( '#my-modal' ). bind ( 'skrito' , funkcija () {
- // naredi kaj ...
- })
Ta vtičnik je namenjen dodajanju spustne interakcije v zgornjo vrstico zagonske vrstice ali navigacije z zavihki.
Prenesi
- $ ( '#topbar' ). spustni meni ()
Če želite kateremu koli elementu navigacije hitro dodati spustno funkcijo, uporabite data-dropdown
atribut. Vsak veljaven zagonski spustni meni bo samodejno aktiviran.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#" > Domača stran </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" > Spustni meni </a>
- <ul class = "dropdown-menu" >
- <li><a href = "#" > Sekundarna povezava </a></li>
- <li><a href = "#" > Tukaj je še nekaj </a></li>
- <li class = "divider" ></li>
- <li><a href = "#" > Druga povezava </a></li>
- </ul>
- </li>
- </ul>
Opomba Če ima vaš uporabniški vmesnik več spustnih menijev, razmislite o dodajanju data-dropdown
atributa pomembnejšemu elementu vsebnika, kot je .tabs
ali .topbar
.
Programski api za aktiviranje menijev za določeno zgornjo vrstico ali navigacijo z zavihki.
Ta vtičnik je namenjen dodajanju interakcije scrollspy (samodejno posodabljanje navigacije) v zgornjo vrstico zagona.
Prenesi
- $ ( '#topbar' ). spustni meni ()
Če želite svoji navigaciji preprosto dodati vedenje Scrollspy, samo dodajte data-scrollspy
atribut v .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Samodejno aktivira navigacijske gumbe glede na položaj drsenja uporabnika.
- $ ( 'body > .topbar' ). scrollSpy ()
Opozorilo : sidrne oznake zgornje vrstice morajo imeti razločljive cilje ID-ja. Na primer, <a href="#home">home</a>
mora ustrezati nečemu v domu, kot je <div id="home"></div>
.
Scrollspy predpomni navigacijske gumbe in koordinate odsekov za delovanje. Če morate posodobiti ta predpomnilnik (verjetno, če imate dinamično vsebino), preprosto pokličite to metodo osveževanja. Če ste uporabili atribut podatkov za definiranje vašega scrollspyja, preprosto pokličite osvežitev v telesu.
- $ ( 'telo' ). scrollspy ( 'osveži' )
Preverite navigacijo v zgornji vrstici na tej strani.
Ta vtičnik dodaja hitro, dinamično funkcijo zavihkov in tablet.
Prenesi
- $ ( '.tabs' ). zavihki ()
Navigacijo po zavihku ali tabletki lahko aktivirate brez pisanja javascripta, tako da jim preprosto dodelite atribut data-tabs
ali .data-pills
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
Aktivira funkcijo zavihkov in tabletk za določeno posodo. Povezave zavihkov se morajo sklicevati na ID-je v dokumentu.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#home" > Domača stran </a></li>
- <li><a href = "#profile" > Profil </a></li>
- <li><a href = "#messages" > Sporočila </a></li>
- <li><a href = "#settings" > Nastavitve </a></li>
- </ul>
- <div class = "pillu-content" >
- <div class = "active" id = "home" > ... </div>
- <div id = "profile" > ... </div>
- <div id = "messages" > ... </div>
- <div id = "settings" > ... </div>
- </ul>
- <skript>
- $ ( funkcija () {
- $ ( '.tabs' ). zavihki ()
- })
- </script>
Surov denim, za katere verjetno še niste slišali, jeans kratke hlače Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby pulover eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigan ameriška oblačila, 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.
Temelji na odličnem vtičniku jQuery.tipsy, ki ga je napisal Jason Frame; twipsy je posodobljena različica, ki se ne zanaša na slike, uporablja css3 za animacije in podatkovne atribute za shranjevanje naslovov!
Prenesi
- $ ( '#primer' ). twipsy ( možnosti )
Ime | vrsta | privzeto | opis |
---|---|---|---|
animirati | logično | prav | uporabite css fade prehod za opis orodja |
delayIn | število | 0 | zakasnitev pred prikazom orodja (ms) |
delayOut | število | 0 | zakasnitev pred skrivanjem opisa orodja (ms) |
pasti nazaj | vrvica | '' | besedilo za uporabo, ko ni naslova orodnega opisa |
umestitev | vrvica | 'zgoraj' | kako postaviti opis orodja - zgoraj | spodaj | levo | prav |
html | logično | lažno | dovoljuje vsebino html v opisu orodja |
v živo | logično | lažno | uporabite delegiranje dogodkov namesto posameznih obdelovalcev dogodkov |
odmik | število | 0 | odmik slikovnih pik namiga orodja od ciljnega elementa |
naslov | niz | funkcijo | 'naslov' | atribut ali metoda za pridobivanje besedila naslova |
sprožilec | vrvica | 'lebdeti' | kako se sproži opis orodja - lebdi | fokus | priročnik |
Zbirki elementov pripne obravnavo twipsy.
Razkriva elemente twipsy.
- $ ( '#element' ). twipsy ( 'pokaži' )
Skrije elemente twipsy.
- $ ( '#element' ). twipsy ( 'skrij' )
Vrne primerek razreda elementov twipsy.
- $ ( '#element' ). twipsy ( res )
Opomba To lahko prikličete tudi z $().data('twipsy')
.
Ozke hlače naslednje stopnje keffiyeh , za katere verjetno še niste slišali. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od kmetije do mize, 8-bitna ameriška oblačila mcsweeney's fixie trajnostna kvinoja imajo vinil chambray terryja richardsona. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, štiri loko mcsweeney's cleanse veganski chambray. Resnično ironičen obrtnik, ne glede na keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kava virusna.
Vtičnik popover ponuja preprost vmesnik za dodajanje pojavnih oken vaši aplikaciji. Razširja vtičnik boostrap-twipsy.js , zato se prepričajte, da zgrabite tudi to datoteko, ko v svoj projekt vključite popoverje!
Prenesi
- $ ( '#primer' ). popover ( možnosti )
Ime | vrsta | privzeto | opis |
---|---|---|---|
animirati | logično | prav | uporabite css fade prehod za opis orodja |
delayIn | število | 0 | zakasnitev pred prikazom orodja (ms) |
delayOut | število | 0 | zakasnitev pred skrivanjem opisa orodja (ms) |
pasti nazaj | vrvica | '' | besedilo za uporabo, ko ni naslova orodnega opisa |
umestitev | vrvica | 'prav' | kako postaviti opis orodja - zgoraj | spodaj | levo | prav |
html | logično | lažno | dovoljuje vsebino html v opisu orodja |
v živo | logično | lažno | uporabite delegiranje dogodkov namesto posameznih obdelovalcev dogodkov |
odmik | število | 0 | odmik slikovnih pik namiga orodja od ciljnega elementa |
naslov | niz | funkcijo | 'naslov' | atribut ali metoda za pridobivanje besedila naslova |
vsebino | niz | funkcijo | 'data-content' | atribut ali metoda za pridobivanje besedila vsebine |
sprožilec | vrvica | 'lebdeti' | kako se sproži opis orodja - lebdi | fokus | priročnik |
Inicializira pojavna okna za zbirko elementov.
Razkrije pojavni element elementov.
- $ ( '#element' ). popover ( 'pokaži' )
Skrije pojavni element elementov.
- $ ( '#element' ). popover ( 'skrij' )
Vtičnik za opozorila je zelo majhen razred za dodajanje tesne funkcionalnosti opozorilom.
Prenesi
- $ ( ".opozorilno-sporočilo" ). opozorilo ()
Preprosto dodajte data-alert
atribut svojim opozorilnim sporočilom, da jim samodejno zagotovite tesno funkcijo.
Zavije vsa opozorila s tesno funkcionalnostjo. Če želite, da se vaša opozorila animirajo, ko so zaprta, se prepričajte, da je zanje že uporabljen razred .fade
in ..in
Zapre opozorilo.
- $ ( ".opozorilno-sporočilo" ). opozorilo ( 'blizu' )