Javascript za Bootstrap

Oživite komponente Bootstrapa—sada sa 12 prilagođenih jQuery dodataka.

Modals

Pojednostavljen, ali fleksibilan, preuzima tradicionalni javascript modalni dodatak sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Padajući meni

Dodajte padajuće menije gotovo svemu u Bootstrapu pomoću ovog jednostavnog dodatka. Bootstrap ima punu podršku za padajući meni na navigacijskoj traci, karticama i tabletama.

Scrollspy

Koristite scrollspy da automatski ažurirate veze u vašoj navigacijskoj traci kako biste prikazali trenutnu aktivnu vezu na osnovu položaja pomicanja.

Preklopne kartice

Koristite ovaj dodatak kako biste kartice i tablete učinili korisnijima tako što ćete im omogućiti da se kreću kroz okna lokalnog sadržaja s tabovima.

Alati

Novo shvaćanje dodatka jQuery Tipsy, Alati se ne oslanjaju na slike – oni koriste CSS3 za animacije i atribute podataka za lokalno skladištenje naslova.

Popovers *

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija.

* Zahtijeva da budu uključeni alati

Poruke upozorenja

Dodatak za upozorenje je mala klasa za dodavanje bliske funkcionalnosti upozorenjima.

Dugmad

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Kolaps

Nabavite osnovne stilove i fleksibilnu podršku za sklopive komponente kao što su harmonike i navigacija.

Carousel

Napravite vrtešku bilo kojeg sadržaja za koji želite da pružite interaktivnu prezentaciju sadržaja.

Typeahead

Osnovni, lako prošireni dodatak za brzo kreiranje elegantnih ispisa s bilo kojim unosom teksta.

Prijelazi *

Za jednostavne efekte prijelaza, uključite bootstrap-transition.js jednom da biste kliznuli u modali ili ugasili upozorenja.

* Obavezno za animaciju u dodacima

Glavu gore! Svi javascript dodaci zahtijevaju najnoviju verziju jQueryja.

O modalitetima

Pojednostavljen, ali fleksibilan, preuzima tradicionalni javascript modalni dodatak sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Preuzmite datoteku

Statički primjer

Ispod je statički prikazan modalni.

Demo uživo

Prebacite modal putem javascripta klikom na dugme ispod. Kliziće nadole i nestajati sa vrha stranice.

Pokrenite demo modal

Korištenje bootstrap-modal

Pozovite modalni putem javascripta:

  1. $ ( '#myModal' ). modalni ( opcije )

Opcije

Ime tip default opis
pozadina boolean tačno Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tastatura boolean tačno Zatvara modal kada se pritisne tipka za izlaz
show boolean tačno Prikazuje modalni kada se inicijalizira.

Markup

Možete jednostavno aktivirati modale na svojoj stranici bez potrebe da pišete ni jedan red javascripta. Samo postavite data-toggle="modal"na element kontrolera sa data-target="#foo"ili href="#foo"koji odgovara ID-u modalnog elementa, a kada se klikne, pokrenut će vaš modalni.

Također, da dodate opcije vašoj modalnoj instanci, samo ih uključite kao dodatne atribute podataka bilo na kontrolnom elementu ili na samu modalnu markaciju.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Pokreni modalni </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> Modalno zaglavlje </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Jedno fino tijelo... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Zatvori </a>
  11. <a href = "#" class = "btn btn-primary" > Sačuvaj promjene </a>
  12. </div>
  13. </div>
Glavu gore! Ako želite da vaš modal animira unutra i van, samo dodajte .fadeklasu .modalelementu (pogledajte demo da vidite ovo u akciji) i uključite bootstrap-transition.js.

Metode

.modal(opcije)

Aktivira vaš sadržaj kao modalni. Prihvata opcione opcije object.

  1. $ ( '#myModal' ). modalni ({
  2. tastatura : false
  3. })

.modal('toggle')

Ručno prebacuje modal.

  1. $ ( '#myModal' ). modalni ( 'prebaciti' )

.modal('show')

Ručno otvara modalni.

  1. $ ( '#myModal' ). modalni ( 'prikaži' )

.modal('sakrij')

Ručno skriva modal.

  1. $ ( '#myModal' ). modalni ( 'sakrij' )

Događaji

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 showse 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 hidepozove 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).
  1. $ ( '#myModal' ). on ( 'skriven' , funkcija () {
  2. // radi nešto…
  3. })

Dodatak ScrollSpy služi za automatsko ažuriranje navigacijskih ciljeva na osnovu položaja pomicanja.

Preuzmite datoteku

Primjer navigacijske trake sa scrollspy

Pomičite područje ispod i gledajte ažuriranje navigacije. Padajuće podstavke će također biti istaknute. Probaj!

@debeo

Oglas helanke keytar, brunch id art party dolor labore. Vile yr enim lo-fi prije nego što su rasprodali qui. Tumblr prava na bicikl od farme do stola. Anim keffiyeh carles kardigan. Foto štand Velit seitan mcsweeney 3 wolf moon irure. Cosby džemper lomo jean šorc, Williamsburg hoodie minimalno za koje vjerovatno niste čuli i kardigan trust fond culpa biodiesel wes anderson aesthetic. Nihil tetovirani akuzamus, cred ironija biodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa brkovi skateboard, adipisicing fugiat velit pitchfork brada. Freegan brada aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovirani cosby džemper kamion za hranu, mcsweeney's quis non freegan vinil. Lo-fi wes anderson +1 sartorial. Carlesova neestetska vježba quis gentrify. Brooklyn adipisicing craft pivo vice keytar deserunt.

jedan

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore kafa jednog porijekla u magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimalna torba. Cred ex in, održivi delectus consectetur fanny pack iphone.

dva

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id acceptnda. Locavore sed helvetica kliše ironija, thundercats za koje vjerovatno niste čuli kao lo-fi fap aliquip s kapuljačom bez glutena. Labore elit placeat prije nego što su se rasprodali, Terry richardson proident brunch nesciunt quis cosby džemper pariatur keffiyeh u helvetica artisan. Kardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Korištenje bootstrap-scrollspy.js

Pozovite scrollspy putem javascripta:

  1. $ ( '#navbar' ). scrollspy ()

Markup

Da biste lako dodali ponašanje skrolovanja vašoj navigaciji na gornjoj traci, samo dodajte data-spy="scroll"elementu koji želite da špijunirate (najčešće bi to bilo tijelo).

  1. <body data-spy = "scroll" > ... </body>
Glavu gore! Navbar veze moraju imati razlučive ciljeve ID-a. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu kao što je <div id="home"></div>.

Metode

.scrollspy('osvježi')

Kada koristite scrollspy u kombinaciji sa dodavanjem ili uklanjanjem elemenata iz DOM-a, morat ćete pozvati metodu osvježavanja na sljedeći način:

  1. $ ( '[data-spy="scroll"]' ). svaki ( funkcija () {
  2. var $spy = $ ( ovo ). scrollspy ( 'osvježi' )
  3. });

Opcije

Ime tip default opis
offset broj 10 Pikseli za pomicanje od vrha prilikom izračunavanja položaja pomicanja.

Događaji

Događaj Opis
aktivirati Ovaj događaj se pokreće svaki put kada se nova stavka aktivira scrollspy.

Ovaj dodatak dodaje brzu, dinamičnu funkcionalnost kartica i tableta za prelazak kroz lokalni sadržaj.

Preuzmite datoteku

Primjeri kartica

Kliknite na donje kartice za prebacivanje između skrivenih okna, čak i putem padajućih menija.

Sirovi teksas za koji vjerovatno niste čuli za džins šorceve 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.


Korištenje bootstrap-tab.js

Omogućite tabulatore putem javascripta (svaka kartica se mora aktivirati zasebno):

  1. $ ( '#myTab a' ). kliknite ( funkcija ( e ) {
  2. e . preventDefault ();
  3. $ ( ovo ). tab ( 'prikaži' );
  4. })

Pojedinačne kartice možete aktivirati na nekoliko načina:

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'prikaži' ); // Odaberite karticu po imenu
  2. $ ( '#myTab a:prvi' ). tab ( 'prikaži' ); // Odaberite prvu karticu
  3. $ ( '#myTab a:last' ). tab ( 'prikaži' ); // Odaberite zadnju karticu
  4. $ ( '#myTab li:eq(2) a' ). tab ( 'prikaži' ); // Odaberite treću karticu (indeksirano 0)

Markup

Možete aktivirati navigaciju po kartici ili tabletama bez pisanja bilo kakvog javascripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanje klasa navi nav-tabsna karticu ulće primijeniti stil bootstrap kartice.

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Početna </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Poruke </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Postavke </a></li>
  6. </ul>

Metode

$().tab

Aktivira element kartice i kontejner sadržaja. Tab bi trebao imati ili data-targetciljni hrefčvor kontejnera u DOM-u.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Početna </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Poruke </a></li>
  5. <li><a href = "#settings" > Postavke </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "messages" > ... </div>
  12. <div class = "tab-pane" id = "settings" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). tab ( 'prikaži' );
  18. })
  19. </script>

Događaji

Događaj Opis
show Ovaj događaj se pokreće u prikazu kartice, ali prije nego što se nova kartica prikaže. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
pokazano Ovaj događaj se pokreće u prikazu kartice nakon što je kartica prikazana. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {
  2. e . cilj // aktivirana kartica
  3. e . relatedTarget // prethodna kartica
  4. })

O Alatima

Inspirisan odličnim jQuery.tipsy dodatkom koji je napisao Jason Frame; Alati su ažurirana verzija, koja se ne oslanja na slike, koristi css3 za animacije i data-atribute za lokalno skladištenje naslova.

Preuzmite datoteku

Primjer korištenja Tooltipova

Zadržite pokazivač miša preko linkova ispod da vidite opise alata:

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.


Korištenje bootstrap-tooltip.js

Pokrenite opis alata putem javascripta:

  1. $ ( '#primjer' ). opis alata ( opcije )

Opcije

Ime tip default opis
animacija boolean tačno primijeniti css fade prijelaz na tooltip
plasman string|funkcija 'vrh' kako pozicionirati tooltip - vrh | dno | lijevo | u pravu
selektor string false Ako je osiguran selektor, objekti opisa alata će biti delegirani navedenim ciljevima.
naslov string | funkcija '' zadana vrijednost naslova ako oznaka `title` nije prisutna
okidač string 'lebdjeti' kako se tooltip pokreće - lebdjeti | fokus | priručnik
kašnjenje broj | objekt 0

odgoda prikazivanja i skrivanja opisa alata (ms) - ne odnosi se na tip ručnog okidača

Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži

Struktura objekta je:delay: { show: 500, hide: 100 }

Glavu gore! Opcije za pojedinačne opise alata mogu se alternativno specificirati korištenjem atributa podataka.

Markup

Iz razloga performansi, Tooltip i Popover data-apis su uključeni. Ako želite da ih koristite, samo navedite opciju selektora.

  1. <a href = "#" rel = "tooltip" title = "prvi opis" > zadržite pokazivač iznad mene </a>

Metode

$().tooltip(opcije)

Prilaže rukovao opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa.

  1. $ ( '#element' ). tooltip ( 'prikaži' )

.tooltip('sakrij')

Sakriva opis elementa.

  1. $ ( '#element' ). opis alata ( 'sakrij' )

.tooltip('toggle')

Prebacuje opis elementa.

  1. $ ( '#element' ). tooltip ( 'toggle' )

O popoverima

Dodajte male slojeve sadržaja, poput onih na iPadu, bilo kojem elementu za smještaj sekundarnih informacija.

* Zahtijeva Tooltip da bude uključen

Preuzmite datoteku

Primjer skočnog skočnog prikaza

Zadržite pokazivač miša iznad dugmeta da pokrenete iskačući prozor.


Korištenje bootstrap-popover.js

Omogućite popovers putem javascripta:

  1. $ ( '#primjer' ). popover ( opcije )

Opcije

Ime tip default opis
animacija boolean tačno primijeniti css fade prijelaz na tooltip
plasman string|funkcija 'tačno' kako pozicionirati popover - vrh | dno | lijevo | u pravu
selektor string false ako je osiguran selektor, objekti opisa alata će biti delegirani navedenim ciljevima
okidač string 'lebdjeti' kako se tooltip pokreće - lebdjeti | fokus | priručnik
naslov string | funkcija '' zadana vrijednost naslova ako atribut `title` nije prisutan
sadržaj string | funkcija '' zadana vrijednost sadržaja ako atribut `data-content` nije prisutan
kašnjenje broj | objekt 0

odgoda prikazivanja i skrivanja iskakanja (ms) - ne odnosi se na tip ručnog okidača

Ako je naveden broj, kašnjenje se primjenjuje i na sakrivanje/prikaži

Struktura objekta je:delay: { show: 500, hide: 100 }

Glavu gore! Opcije za pojedinačne iskačuće stranice mogu se alternativno specificirati korištenjem atributa podataka.

Markup

Iz razloga performansi, Tooltip i Popover data-apis su uključeni. Ako želite da ih koristite, samo navedite opciju selektora.

Metode

$().popover(opcije)

Inicijalizira skočne prozore za kolekciju elemenata.

.popover('show')

Otkriva iskačući element.

  1. $ ( '#element' ). popover ( 'prikaži' )

.popover('sakrij')

Sakriva skočni prozor elemenata.

  1. $ ( '#element' ). popover ( 'sakrij' )

.popover('toggle')

Prebacuje iskačući prozor elemenata.

  1. $ ( '#element' ). popover ( 'prebaciti' )

O upozorenjima

Dodatak za upozorenje je mala klasa za dodavanje bliske funkcionalnosti upozorenjima.

Skinuti

Primjer upozorenja

Dodatak za upozorenja radi na redovnim porukama upozorenja i blokiranim porukama.

Holy guacamole! Najbolje da se proveri, ne izgledaš baš dobro.

Oh snap! Imate grešku!

Promijenite ovo i to i pokušajte ponovo. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Preduzmi ovu akciju Ili uradi ovo


Korištenje bootstrap-alert.js

Omogućite odbacivanje upozorenja putem javascripta:

  1. $ ( ".upozorenje" ). upozorenje ()

Markup

Samo dodajte data-dismiss="alert"dugme za zatvaranje da biste automatski dali funkciju upozorenja za zatvaranje.

  1. <a class = "close" data-dismiss = "alert" href = "#" > × </a>

Metode

$().alert()

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

.alert('zatvori')

Zatvara upozorenje.

  1. $ ( ".upozorenje" ). upozorenje ( 'zatvori' )

Događaji

Bootstrapova klasa upozorenja izlaže nekoliko događaja za spajanje na funkcionalnost upozorenja.

Događaj Opis
zatvori Ovaj događaj se aktivira odmah kada closese pozove metoda instance.
zatvoreno Ovaj događaj se pokreće kada je upozorenje zatvoreno (čekaće da se css prijelazi dovrše).
  1. $ ( '#my-alert' ). bind ( 'zatvoreno' , funkcija () {
  2. // radi nešto…
  3. })

O

Uradite više sa dugmadima. Kontrolirajte stanja dugmadi ili kreirajte grupe dugmadi za više komponenti kao što su trake sa alatkama.

Preuzmite datoteku

Primjer upotrebe

Koristite dodatak dugmadi za stanja i prekidače.

Stateful
Pojedinačni prekidač
Polje za potvrdu
Radio

Korištenje bootstrap-button.js

Omogućite dugmad putem javascripta:

  1. $ ( '.nav-tabs' ). dugme ()

Markup

Atributi podataka su sastavni dio dodatka gumba. Pogledajte primjer koda u nastavku za različite tipove označavanja.

  1. <!-- Dodajte data-toggle="button" da aktivirate prebacivanje na jednom dugmetu -->
  2. <button class = "btn" data-toggle = "button" > Jednostruki prekidač </button>
  3.  
  4. <!-- Dodajte data-toggle="buttons-checkbox" za uključivanje stila potvrdnog okvira na btn-group -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Lijevo </button>
  7. <button class = "btn" > Srednja </button>
  8. <button class = "btn" > Desno </button>
  9. </div>
  10.  
  11. <!-- Dodaj data-toggle="buttons-radio" za uključivanje stila radija na btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Lijevo </button>
  14. <button class = "btn" > Srednja </button>
  15. <button class = "btn" > Desno </button>
  16. </div>

Metode

$().button('toggle')

Uključuje push stanje. Daje dugmetu izgled da je aktivirano.

Glavu gore! Možete omogućiti automatsko prebacivanje dugmeta pomoću data-toggleatributa.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('loading')

Postavlja stanje dugmeta na učitavanje - onemogućava dugme i menja tekst u tekst za učitavanje. Tekst za učitavanje treba definirati na elementu gumba pomoću atributa podataka data-loading-text.

  1. <button class = "btn" data-loading-text = "učitavanje stvari..." > ... </button>
Glavu gore! Firefox održava stanje onemogućeno tijekom učitavanja stranice . Zaobilazno rješenje za ovo je korištenje autocomplete="off".

$().button('reset')

Resetuje stanje dugmeta - menja tekst u originalni tekst.

$().button(string)

Resetuje stanje dugmeta - menja tekst u bilo koje stanje teksta definisano podacima.

  1. <button class = "btn" data-complete-text = "gotovo!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). dugme ( 'završeno' )
  4. </script>

O

Nabavite osnovne stilove i fleksibilnu podršku za sklopive komponente kao što su harmonike i navigacija.

Preuzmite datoteku

* Zahtijeva da se uključi dodatak Transitions.

Primjer harmonike

Koristeći dodatak za kolaps, napravili smo jednostavan widget u stilu harmonike:

Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life optužbe Terry richardson ad lignje. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Kamion za hranu quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua stavio pticu na to lignje kafa jednog porijekla nulla acceptnda shoreditch et. Nihil anim keffiyeh helvetica, craft pivo labore wes anderson cred nesciunt sapiente ea proident. Ad vegan osim mesar vice lomo. Tajice occaecat craft pivo od farme do stola, sirovi traper estetski sintisajzer nesciunt za koje vjerovatno niste čuli Accuzamus Labe sustainable VHS.

Korištenje bootstrap-collapse.js

Omogući putem javascripta:

  1. $ ( ".kolaps" ). kolaps ()

Opcije

Ime tip default opis
roditelj selektor false Ako je selektor tada će svi sklopivi elementi ispod navedenog roditelja biti zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike)
preklopiti boolean tačno Uključuje sklopivi element pri pozivanju

Markup

Samo dodajte data-toggle="collapse"i data-targetelementu da biste automatski dodijelili kontrolu nad sklopivim elementom. Atribut data-targetprihvaća css selektor za primjenu kolapsa na. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se zadano otvori, dodajte dodatnu klasu in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. jednostavno sklopivo
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Glavu gore! Da biste sklopivoj kontroli dodali upravljanje grupom nalik harmonici, dodajte atribut podataka data-parent="#selector". Pogledajte demo da vidite ovo na djelu.

Metode

.collapse(opcije)

Aktivira vaš sadržaj kao sklopivi element. Prihvata opcione opcije object.

  1. $ ( '#myCollapsible' ). kolaps ({
  2. prekidač : lažno
  3. })

.collapse('toggle')

Prebacuje sklopivi element na prikazan ili skriven.

.collapse('prikaži')

Prikazuje sklopivi element.

.collapse('sakrij')

Sakriva sklopivi element.

Događaji

Bootstrapova klasa kolapsa izlaže nekoliko događaja za spajanje na funkcionalnost kolapsa.

Događaj Opis
show Ovaj događaj se aktivira odmah kada showse pozove metoda instance.
pokazano Ovaj događaj se pokreće kada se element sažimanja učini vidljivim korisniku (će čekati da se css prijelazi dovrše).
sakriti Ovaj događaj se pokreće odmah kada je hidemetoda pozvana.
skriveno Ovaj događaj se pokreće kada je element sažimanja skriven od korisnika (će čekati da se css prijelazi dovrše).
  1. $ ( '#myCollapsible' ). on ( 'skriven' , funkcija () {
  2. // radi nešto…
  3. })

O

Osnovni, lako prošireni dodatak za brzo kreiranje elegantnih ispisa s bilo kojim unosom teksta.

Preuzmite datoteku

Primjer

Počnite da kucate u polje ispod da biste prikazali rezultate unapred.


Korištenje bootstrap-typeahead.js

Pozovite tipka unaprijed putem javascripta:

  1. $ ( '.typeahead' ). ukucaj naprijed ()

Opcije

Ime tip default opis
izvor niz [ ] Izvor podataka za upit.
stavke broj 8 Maksimalan broj stavki za prikaz u padajućem izborniku.
matcher funkcija neosjetljivo na velika i mala slova Metoda koja se koristi za određivanje da li se upit podudara sa stavkom. Prihvata jedan argument, itemprotiv kojeg se testira upit. Pristupite trenutnom upitu pomoću this.query. Vrati logički trueako se upit podudara.
sorter funkcija potpuno podudaranje,
osjetljivo na velika i
mala slova
Metoda koja se koristi za sortiranje rezultata autodovršavanja. Prihvata jedan argument itemsi ima opseg instance ispred tipa. Referirajte trenutni upit sa this.query.
highlighter funkcija ističe sva zadana podudaranja Metoda koja se koristi za isticanje rezultata autodovršavanja. Prihvata jedan argument itemi ima opseg instance ispred tipa. Trebao bi vratiti html.

Markup

Dodajte atribute podataka za registraciju elementa s funkcijom unaprijed.

  1. <input type = "text" data- provide = "typeahead" >

Metode

.typeahead (opcije)

Inicijalizira unos sa tipom naprijed.