Naš Modal dodatak je super tanka verzija tradicionalnog modal js dodatka, vodeći posebno računa da uključi samo golu funkcionalnost koja nam je potrebna ovdje na twitteru.
Skinuti
- $ ( '#my-modal' ). modalni ( opcije )
Ime | tip | default | opis |
---|---|---|---|
pozadina | boolean, string | false | Uključuje element modalne pozadine. Postavite pozadinu na "static" ako ne želite da se modal zatvori kada se klikne na pozadinu. |
tastatura | boolean | false | Zatvara modal kada se pritisne tipka za izlaz |
show | boolean | false | Otvara modalno pri inicijalizaciji klase |
Možete jednostavno aktivirati modale na svojoj stranici bez potrebe da pišete ni jedan red javascripta. Samo dajte elementu data-controls-modal
atribut koji odgovara ID-u modalnog elementa, a kada se klikne, on će pokrenuti vaš modalni. Da biste dodali modalne opcije, samo ih uključite i kao atribute podataka.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Pokreni modalni </a>
Napomena Ako želite da vaš modal animira unutra i van, samo dodajte .fade
klasu svom .modal
elementu (pogledajte demo da vidite ovo u akciji).
Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object
.
- $ ( '#my-modal' ). modalni ({
- tastatura : istina
- })
Ručno prebacuje modal.
- $ ( '#my-modal' ). modalni ( 'prebaciti' )
Ručno otvara modalni.
- $ ( '#my-modal' ). modalni ( 'prikaži' )
Ručno skriva modal.
- $ ( '#my-modal' ). modalni ( 'sakrij' )
Vraća instancu modalne klase elemenata.
- $ ( '#my-modal' ). modalni ( tačno )
Napomena Alternativno, ovo se može preuzeti pomoću $().data('modal')
.
Bootstrap-ova modalna klasa izlaže nekoliko događaja za spajanje na modalnu funkcionalnost.
Događaj | Opis |
---|---|
show | Ovaj događaj se aktivira odmah kada show se pozove metoda instance. |
pokazano | Ovaj događaj se pokreće kada modal postane vidljiv korisniku (će pričekati da se css prijelazi dovrše). |
sakriti | Ovaj događaj se pokreće odmah kada se hide pozove metoda instance. |
skriveno | Ovaj događaj se pokreće kada modal završi sa sakrivanjem od korisnika (će pričekati da se css tranzicije dovrše). |
- $ ( '#my-modal' ). bind ( 'hidden' , function () {
- // radi nešto ...
- })
Ovaj dodatak služi za dodavanje interakcije padajućeg menija na gornju traku za pokretanje ili navigaciju sa karticama.
Skinuti
- $ ( '#topbar' ). padajući meni ()
Za brzo dodavanje funkcionalnosti padajućeg izbornika bilo kojem navigacijskom elementu, koristite data-dropdown
atribut. Svaki važeći padajući izbornik za pokretanje automatski će se aktivirati.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#" > Početna </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href = "#" class = "dropdown-toggle" > Padajući meni </a>
- <ul class = "padajući meni" >
- <li><a href = "#" > Sekundarni link </a></li>
- <li><a href = "#" > Nešto drugo ovdje </a></li>
- <li class = "razdjelnik" ></li>
- <li><a href = "#" > Još jedan link </a></li>
- </ul>
- </li>
- </ul>
Napomena Ako vaš korisnički interfejs ima nekoliko padajućih menija, razmislite o dodavanju data-dropdown
atributa značajnijem elementu kontejnera kao što je .tabs
ili .topbar
.
Programski API za aktiviranje menija za datu gornju traku ili navigaciju sa karticama.
Ovaj dodatak služi za dodavanje scrollspy (automatsko ažuriranje navigacije) interakcije na bootstrap gornju traku.
Skinuti
- $ ( '#topbar' ). scrollSpy ()
Za jednostavno dodavanje scrollspy ponašanja u svoju navigaciju, samo dodajte data-scrollspy
atribut u .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Automatski aktivira dugmad za navigaciju prema poziciji pomicanja korisnika.
- $ ( 'body > .topbar' ). scrollSpy ()
Napomena Topbar sidrene oznake moraju imati razlučive id ciljeve. Na primjer, <a href="#home">home</a>
mora odgovarati nečemu u domu kao što je <div id="home"></div>
.
Scrollspy kešira navigacijske dugmad i koordinate sekcija za performanse. Ako trebate ažurirati ovu keš memoriju (vjerovatno ako imate dinamički sadržaj), samo pozovite ovu metodu osvježavanja. Ako ste koristili data atribut da definišete svoj scrollspy, samo pozovite refresh na telu.
- $ ( 'tijelo' ). scrollSpy ( 'osvježi' )
Provjerite navigaciju gornje trake na ovoj stranici.
Ovaj dodatak dodaje brzu, dinamičnu funkcionalnost kartica i tableta.
Skinuti
- $ ( '.tabs' ). kartice ()
Možete aktivirati navigaciju po kartici ili tabletama bez pisanja bilo kakvog javascripta jednostavnim davanjem atributa data-tabs
ili .data-pills
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
Aktivira funkcionalnost kartice i tableta za dati spremnik. Veze kartica treba da upućuju na ID-ove u dokumentu.
- <ul class = "tabs" >
- <li class = "active" ><a href = "#home" > Početna </a></li>
- <li><a href = "#profile" > Profil </a></li>
- <li><a href = "#messages" > Poruke </a></li>
- <li><a href = "#settings" > Postavke </a></li>
- </ul>
- <div class = "sadržaj pilule" >
- <div class = "active" id = "home" > ... </div>
- <div id = "profil" > ... </div>
- <div id = "messages" > ... </div>
- <div id = "settings" > ... </div>
- </div>
- <script>
- $ ( funkcija () {
- $ ( '.tabs' ). kartice ()
- })
- </script>
Događaj | Opis |
---|---|
promijeniti | Ovaj događaj se pokreće prilikom promjene kartice. Koristite event.target i event.relatedTarget za ciljanje aktivne kartice, odnosno prethodne aktivne kartice. |
- $ ( '#.tabs' ). bind ( 'promjena' , funkcija ( e ) {
- e . cilj // aktivirana kartica
- e . relatedTarget // prethodna kartica
- })
Sirovi teksas za koji vjerovatno niste čuli za džins šorc Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Brkovi kliše tempor, williamsburg carles veganska helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby džemper eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis kardigan američka odjeća, mesar 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.
Zasnovan na odličnom dodatku jQuery.tipsy koji je napisao Jason Frame; twipsy je ažurirana verzija, koja se ne oslanja na slike, koristi css3 za animacije i data-atribute za pohranu naslova!
Skinuti
- $ ( '#primjer' ). twipsy ( opcije )
Ime | tip | default | opis |
---|---|---|---|
animirati | boolean | tačno | primijeniti css fade prijelaz na tooltip |
delayIn | broj | 0 | odgoda prije prikazivanja opisa alata (ms) |
delayOut | broj | 0 | odgoda prije skrivanja opisa alata (ms) |
povući se | string | '' | tekst koji se koristi kada nema naslova opisa alata |
plasman | string | 'iznad' | kako pozicionirati tooltip - iznad | ispod | lijevo | u pravu |
html | boolean | false | dozvoljava html sadržaj u opisu alata |
live | boolean | false | koristiti delegiranje događaja umjesto pojedinačnih rukovatelja događajima |
offset | broj | 0 | pixel offset opisa alata od ciljnog elementa |
naslov | niz, funkcija | 'titula' | atribut ili metod za dohvaćanje teksta naslova |
okidač | string | 'lebdjeti' | kako se tooltip pokreće - lebdjeti | fokus | priručnik |
šablon | string | [podrazumevana oznaka] | html šablon koji se koristi za renderiranje twipsyja. |
Napomena Pojedinačne opcije twipsy instance mogu se alternativno specificirati korištenjem atributa podataka.
- <a href = "#" data-placement = "ispod" rel = 'twipsy' title = 'Neki tekst naslova' > tekst </a>
Pripaja twipsy obrađivač kolekciji elemenata.
Otkriva zakrivljene elemente.
- $ ( '#element' ). twipsy ( 'prikaži' )
Sakriva elemente twipsy.
- $ ( '#element' ). twipsy ( 'sakrij' )
Vraća element twipsy instancu klase.
- $ ( '#element' ). twipsy ( tačno )
Napomena Alternativno, ovo se može preuzeti pomoću $().data('twipsy')
.
Uske pantalone sledećeg nivoa kefije za koje verovatno niste čuli. Foto štand za bradu od sirovog trapera za visoku štampu veganske torbe za glasnike stumptown. Seitan od farme do stola, mcsweeney's fixie održiva 8-bitna američka odjeća od kvinoje ima vinil chambray od terry richardsona. Brada stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, četiri loko mcsweeney's cleanse veganski chambray. Zaista ironičan majstor bez obzira na keytar , scenester od farme do stola Banksy Austin twitter obrađuje freegan cred sirovi traper izvorne kave jednog porijekla.
Popover dodatak pruža jednostavno sučelje za dodavanje popovera vašoj aplikaciji. Proširuje dodatak bootstrap-twipsy.js , tako da svakako zgrabite i tu datoteku kada uključujete iskačuće elemente u svoj projekat!
Napomena Morate uključiti datoteku bootstrap-twipsy.js prije bootstrap-popover.js.
Skinuti
- $ ( '#primjer' ). popover ( opcije )
Ime | tip | default | opis |
---|---|---|---|
animirati | boolean | tačno | primijeniti css fade prijelaz na tooltip |
delayIn | broj | 0 | odgoda prije prikazivanja opisa alata (ms) |
delayOut | broj | 0 | odgoda prije skrivanja opisa alata (ms) |
povući se | string | '' | tekst koji se koristi kada nema naslova opisa alata |
plasman | string | 'tačno' | kako pozicionirati tooltip - iznad | ispod | lijevo | u pravu |
html | boolean | false | dozvoljava html sadržaj u opisu alata |
live | boolean | false | koristiti delegiranje događaja umjesto pojedinačnih rukovatelja događajima |
offset | broj | 0 | pixel offset opisa alata od ciljnog elementa |
naslov | niz, funkcija | 'titula' | atribut ili metod za dohvaćanje teksta naslova |
sadržaj | niz, funkcija | 'data-content' | string ili metoda za preuzimanje teksta sadržaja. ako nijedan nije naveden, sadržaj će se dobiti iz atributa data-content. |
okidač | string | 'lebdjeti' | kako se tooltip pokreće - lebdjeti | fokus | priručnik |
šablon | string | [podrazumevana oznaka] | HTML predložak koji se koristi za prikazivanje skočnog prozora. |
Napomena Pojedinačne opcije instance skočnog prikaza mogu se alternativno specificirati korištenjem atributa podataka.
- <a data-placement = "ispod" href = "#" class = "btn danger" rel = "popover" > tekst </a>
Inicijalizira skočne prozore za kolekciju elemenata.
Otkriva iskačući element.
- $ ( '#element' ). popover ( 'prikaži' )
Sakriva skočni prozor elemenata.
- $ ( '#element' ). popover ( 'sakrij' )
Dodatak za upozorenje je super mala klasa za dodavanje bliske funkcionalnosti upozorenjima.
Skinuti
- $ ( ".alert-message" ). upozorenje ()
Samo dodajte data-alert
atribut svojim porukama upozorenja da biste im automatski dali funkciju zatvaranja.
Ime | tip | default | opis |
---|---|---|---|
selektor | string | '.close' | Koji selektor ciljati za zatvaranje upozorenja. |
Omotava sva upozorenja sa bliskom funkcionalnošću. Da bi se vaša upozorenja animirala kada su zatvorena, provjerite jesu li na njih već primijenjena klasa i .fade
..in
Zatvara upozorenje.
- $ ( ".alert-message" ). upozorenje ( 'zatvori' )