Javascript za Bootstrap

Oživite Bootstrapove komponente—sada s 12 prilagođenih jQuery dodataka.

Modali

Pojednostavljena, ali fleksibilna verzija tradicionalnog javascript modalnog dodatka sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

padajuće liste

Dodajte padajuće izbornike gotovo svemu u Bootstrapu pomoću ovog jednostavnog dodatka. Bootstrap ima punu podršku padajućeg izbornika na navigacijskoj traci, karticama i pilulama.

Scrollspy

Upotrijebite scrollspy za automatsko ažuriranje veza na navigacijskoj traci za prikaz trenutno aktivne veze na temelju položaja pomicanja.

Kartice koje se mogu mijenjati

Upotrijebite ovaj dodatak da kartice i pilule učinite korisnijima dopuštajući im da se prebacuju kroz okna s karticama lokalnog sadržaja.

Opisi alata

Novi pogled na dodatak jQuery Tipsy, Tooltips se ne oslanjaju na slike - oni koriste CSS3 za animacije i atribute podataka za lokalnu pohranu naslova.

Popovers *

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

* Zahtijeva uključivanje opisa alata

Poruke upozorenja

Dodatak upozorenja malena je klasa za dodavanje bliske funkcije upozorenjima.

Gumbi

Učinite više s gumbima. Stanja gumba za upravljanje ili stvaranje grupa gumba za više komponenti poput alatnih traka.

Kolaps

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

Karusel

Stvorite vrtuljak od bilo kojeg sadržaja koji želite pružiti interaktivnu dijaprojekciju sadržaja.

Tipkajte unaprijed

Osnovni, lako proširivi dodatak za brzo kreiranje elegantnih predznaka s bilo kojim oblikom unosa teksta.

Prijelazi *

Za jednostavne efekte prijelaza, jednom uključite bootstrap-transition.js za umetanje modala ili zatamnjenje upozorenja.

* Potrebno za animaciju u dodacima

Glavu gore! Svi javascript dodaci zahtijevaju najnoviju verziju jQueryja.

O načinima

Pojednostavljena, ali fleksibilna verzija tradicionalnog javascript modalnog dodatka sa samo minimalnom potrebnom funkcionalnošću i pametnim zadanim postavkama.

Preuzmi datoteku

Statički primjer

Ispod je statički prikazan modal.

Demo uživo

Uključite modal putem javascripta klikom na gumb ispod. Kliznit će prema dolje i izblijedjeti s vrha stranice.

Pokreni demo modal

Korištenje bootstrap-modala

Pozovite modal putem javascripta:

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

Mogućnosti

Ime tip zadano opis
pozadina Booleov pravi Uključuje element modalne pozadine. Alternativno, navedite staticza pozadinu koja ne zatvara modal na klik.
tipkovnica Booleov pravi Zatvara modal kada se pritisne tipka za izlaz
pokazati Booleov pravi Prikazuje modal kada se inicijalizira.

Markup

Modale na svojoj stranici možete jednostavno aktivirati bez potrebe da napišete i jedan redak javascripta. Samo postavite data-toggle="modal"na element kontrolera s data-target="#foo"ili href="#foo"koji odgovara ID-u modalnog elementa, a kada se klikne, pokrenut će vaš modal.

Također, da biste dodali opcije svojoj modalnoj instanci, jednostavno ih uključite kao dodatne atribute podataka na kontrolnom elementu ili samoj modalnoj oznaci.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Pokreni Modal </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" > Spremi promjene </a>
  12. </div>
  13. </div>
Glavu gore! Ako želite da se vaš modal animira unutra i van, samo dodajte .fadeklasu .modalelementu (pogledajte demo kako biste vidjeli ovo na djelu) i uključite bootstrap-transition.js.

Metode

.modal(opcije)

Aktivira vaš sadržaj kao modal. Prihvaća izborne opcije object.

  1. $ ( '#myModal' ). modalni ({
  2. tipkovnica : lažno
  3. })

.modal('prebaci')

Ručno mijenja modal.

  1. $ ( '#myModal' ). modalno ( 'prebacivanje' )

.modal('prikaži')

Ručno otvara modal.

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

.modal('sakrij')

Ručno skriva modal.

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

Događaji

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

Događaj Opis
pokazati Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano Ovaj se događaj pokreće kada je modal vidljiv korisniku (pričekat će se da se css prijelazi završe).
sakriti Ovaj se događaj aktivira odmah nakon hidepozivanja metode instance.
skriven Ovaj se događaj pokreće kada se modal više ne skriva od korisnika (pričekat će da se css prijelazi završe).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // učini nešto…
  3. })

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

Preuzmi datoteku

Primjer navigacijske trake sa scrollspyjem

Pomičite područje ispod i gledajte ažuriranje navigacije. Podstavke padajućeg izbornika također će biti istaknute. Probaj!

@mast

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi prije nego što su rasprodali qui. Tumblr prava za bicikle od farme do stola. Anim keffiyeh carles kardigan. Velit seitan mcsweeney's photo booth 3 vuk mjesec irure. Cosby pulover lomo jean kratke hlače, williamsburg hoodie minim qui vjerojatno niste čuli za njih i kardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tetovirani akuzamus, cred ironija biodizel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa brkovi skateboard, adipisicing fugiat velit vile brada. Freeganova brada aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetovirani cosby pulover s hranom, mcsweeneyjev quis non freegan vinil. Lo-fi wes anderson +1 krojački. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

jedan

Occaecat commodo aliqua delectus. Fap craft pivo deserunt skateboard ea. Lomo biciklistička prava adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinil, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minimalna kurirska 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 pretpostavlja se. Locavore sed helvetica kliše ironija, thundercats vjerojatno niste čuli za njih consequat hoodie bez glutena lo-fi fap aliquip. Labore elit placeat prije nego što su rasprodani, terry richardson proident brunch nesciunt quis cosby džemper pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan gotovi 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 jednostavno dodali scrollspy ponašanje svojoj navigaciji gornje trake, samo dodajte data-spy="scroll"elementu koji želite špijunirati (najčešće je to tijelo).

  1. <body data-spy = "scroll" > ... </body>
Glavu gore! Veze na navigacijskoj traci moraju imati razrješive ID ciljeve. Na primjer, <a href="#home">home</a>mora odgovarati nečemu u domu poput <div id="home"></div>.

Metode

.scrollspy('osvježi')

Kada koristite scrollspy u kombinaciji s 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. });

Mogućnosti

Ime tip zadano opis
pomaknuti broj 10 Pikseli za pomak od vrha pri izračunavanju položaja pomicanja.

Događaji

Događaj Opis
aktivirati Ovaj događaj se aktivira kad god se nova stavka aktivira od strane ScrollSpy.

Ovaj dodatak dodaje brzu, dinamičnu funkciju kartice i pilule za prijelaz kroz lokalni sadržaj.

Preuzmi datoteku

Primjeri kartica

Pritisnite donje kartice za prebacivanje između skrivenih okna, čak i putem padajućih izbornika.

Sirovi traper za koji vjerojatno niste čuli za jeans kratke hlače Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles veganska helvetica. Reprehenderit mesar 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 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ći tabbable kartice putem javascripta (svaku karticu treba zasebno aktivirati):

  1. $ ( '#myTab a' ). kliknite ( funkcija ( e ) {
  2. e . spriječiZadano ();
  3. $ ( ovo ). kartica ( 'prikaži' );
  4. })

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

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

Markup

Možete aktivirati karticu ili navigaciju pilulom bez pisanja javascripta jednostavnim navođenjem data-toggle="tab"ili data-toggle="pill"na elementu. Dodavanjem klasa navi nav-tabsna karticu ulprimijenit će se stil kartice za pokretanje.

  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 spremnik sadržaja. Kartica bi trebala imati data-targetili hrefciljanje čvora spremnika 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. <skripta>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). kartica ( 'prikaži' );
  18. })
  19. </script>

Događaji

Događaj Opis
pokazati Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite event.targeti event.relatedTargetza ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
prikazano Ovaj se događaj pokreće na 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 opisima alata

Nadahnut izvrsnim dodatkom jQuery.tipsy koji je napisao Jason Frame; Opisi alata su ažurirana verzija, koja se ne oslanja na slike, koristi css3 za animacije i atribute podataka za lokalnu pohranu naslova.

Preuzmi datoteku

Primjer upotrebe Tooltips-a

Zadržite pokazivač iznad donjih veza da biste vidjeli savjete:

Uske hlače sljedeće razine keffiyeh za koje vjerojatno niste čuli. Photo booth beard raw denim letterpress veganska kurirska torba stumptown. Seitan od farme do stola, mcsweeneyjeva fiksna održiva kvinoja 8-bitna američka odjeća ima frotir richardson vinil chambray. Beard stumptown, kardigani banh mi lomo thundercats. Tofu biodizel williamsburg marfa, four loko mcsweeney's cleanse veganski chambray. A stvarno ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Korištenje bootstrap-tooltip.js

Pokreni opis alata putem javascripta:

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

Mogućnosti

Ime tip zadano opis
animacija Booleov pravi primijenite css fade prijelaz na tooltip
plasman niz|funkcija 'vrh' kako postaviti opis alata - vrh | dno | lijevo | pravo
selektor niz lažno Ako je selektor naveden, objekti opisa alata bit će delegirani navedenim ciljevima.
titula niz | funkcija '' zadana vrijednost naslova ako oznaka `title` nije prisutna
okidač niz 'lebdjeti' kako se aktivira opis alata - lebdite | fokus | priručnik
odgoditi broj | objekt 0

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

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

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

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

Markup

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

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

Metode

$().tooltip(opcije)

Priključuje rukovatelj opisom alata kolekciji elemenata.

.tooltip('show')

Otkriva opis elementa.

  1. $ ( '#element' ). opis alata ( 'prikaži' )

.tooltip('sakrij')

Skriva opis elementa.

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

.tooltip('toggle')

Prebacuje opis elementa.

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

O popoverima

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

* Zahtijeva uključivanje Tooltip -a

Preuzmi datoteku

Primjer pojavljivanja pokazivača miša

Zadržite pokazivač iznad gumba da biste pokrenuli skočni prozor.


Korištenje bootstrap-popover.js

Omogući skočne prozore putem javascripta:

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

Mogućnosti

Ime tip zadano opis
animacija Booleov pravi primijenite css fade prijelaz na tooltip
plasman niz|funkcija 'pravo' kako postaviti popover - top | dno | lijevo | pravo
selektor niz lažno ako je osiguran selektor, objekti opisa alata bit će delegirani navedenim ciljevima
okidač niz 'lebdjeti' kako se aktivira opis alata - lebdite | fokus | priručnik
titula niz | funkcija '' zadana vrijednost naslova ako atribut `title` nije prisutan
sadržaj niz | funkcija '' zadana vrijednost sadržaja ako atribut `data-content` nije prisutan
odgoditi broj | objekt 0

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

Ako je naveden broj, odgoda se primjenjuje na skrivanje/prikazivanje

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

Glavu gore! Opcije za pojedinačne skočne prozore mogu se alternativno specificirati upotrebom atributa podataka.

Markup

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

Metode

$().popover(opcije)

Inicijalizira skočne prozore za zbirku elemenata.

.popover('prikaži')

Otkriva popover elemenata.

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

.popover('sakrij')

Skriva skočni prozor elemenata.

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

.popover('prebaci')

Isključuje skočni prozor elemenata.

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

O upozorenjima

Dodatak upozorenja malena je klasa za dodavanje bliske funkcije upozorenjima.

preuzimanje datoteka

Primjer upozorenja

Dodatak za upozorenja radi na uobičajenim porukama upozorenja i blok porukama.

Sveti guacamole! Najbolje provjeri, ne izgledaš baš dobro.

O jebote! Imate grešku!

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

Poduzmite ovu akciju Ili učini ovo


Korištenje bootstrap-alert.js

Omogući odbacivanje upozorenja putem javascripta:

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

Markup

Samo dodajte data-dismiss="alert"gumbu za zatvaranje kako biste automatski dali funkciju zatvaranja upozorenja.

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

Metode

$().alert()

Obuhvaća sva upozorenja bliskom funkcionalnošću. Da bi vaša upozorenja bila animirana kada se zatvore, provjerite imaju li već primijenjenu klasu i .fade..in

.alert('close')

Zatvara upozorenje.

  1. $ ( ". alert" ). upozorenje ( 'blizu' )

Događaji

Bootstrapova klasa upozorenja izlaže nekoliko događaja za povezivanje s funkcijom upozorenja.

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

Oko

Učinite više s gumbima. Stanja gumba za upravljanje ili stvaranje grupa gumba za više komponenti poput alatnih traka.

Preuzmi datoteku

Primjeri upotrebe

Koristite dodatak za gumbe za stanja i prekidače.

Državničko
Jednostruki prekidač
Potvrdni okvir
Radio

Korištenje bootstrap-button.js

Omogući gumbe putem javascripta:

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

Markup

Atributi podataka sastavni su dio dodatka gumba. U nastavku pogledajte primjer koda za različite vrste označavanja.

  1. <!-- Dodajte data-toggle="button" za aktiviranje prebacivanja na jednom gumbu -->
  2. <button class = "btn" data-toggle = "button" > Pojedinačni prekidač </button>
  3.  
  4. <!-- Dodajte data-toggle="buttons-checkbox" za promjenu 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" > Srednji </button>
  8. <button class = "btn" > Desno </button>
  9. </div>
  10.  
  11. <!-- Dodajte data-toggle="buttons-radio" za promjenu stila radija na btn-group -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Lijevo </button>
  14. <button class = "btn" > Srednji </button>
  15. <button class = "btn" > Desno </button>
  16. </div>

Metode

$().button('toggle')

Prebacuje stanje guranja. Daje gumbu izgled da je aktiviran.

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

$().button('učitavanje')

Postavlja stanje gumba na učitavanje - onemogućuje gumb i mijenja tekst u tekst za učitavanje. Učitavanje teksta treba biti definirano na elementu gumba pomoću atributa podataka data-loading-text.

  1. <button class = "btn" data-loading-text = "loading stuff..." > ... </button>
Glavu gore! Firefox ostaje u onemogućenom stanju tijekom učitavanja stranica . Zaobilazno rješenje za ovo je korištenje autocomplete="off".

$().button('reset')

Ponovno postavlja stanje gumba - mijenja tekst u izvorni tekst.

$().button(niz)

Poništava stanje gumba - mijenja tekst u bilo koje stanje definirano podacima.

  1. <button class = "btn" data-complete-text = "finished!" > ... </button>
  2. <skripta>
  3. $ ( '.btn' ). gumb ( 'dovršeno' )
  4. </script>

Oko

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

Preuzmi datoteku

* Zahtijeva uključivanje dodatka Transitions.

Primjer harmonike

Koristeći dodatak za sažimanje, napravili smo jednostavan widget u stilu harmonike:

Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, nim eiusmod high life optužbe terry richardson ad squid. 3 Wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignje single-origin kava nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad veganski osim mesar vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt vjerojatno niste čuli za njih acusamus labore sustainable VHS.

Korištenje bootstrap-collapse.js

Omogući putem javascripta:

  1. $ ( ".sažimanje" ). kolaps ()

Mogućnosti

Ime tip zadano opis
roditelj selektor lažno Birač If then svi sklopivi elementi pod navedenim roditeljem bit će zatvoreni kada se prikaže ova sklopiva stavka. (slično tradicionalnom ponašanju harmonike)
prebaciti Booleov pravi Prebacuje sklopivi element na poziv

Markup

Samo dodajte data-toggle="collapse"i data-targetelementu da biste automatski dodijelili kontrolu nad sklopivim elementom. Atribut data-targetprihvaća css selektor na koji se primjenjuje sažimanje. Obavezno dodajte klasu collapsesklopivom elementu. Ako želite da se prema zadanim postavkama 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 grupno upravljanje poput harmonike, dodajte atribut podataka data-parent="#selector". Pogledajte demo kako biste vidjeli ovo na djelu.

Metode

.sažmi(opcije)

Aktivira vaš sadržaj kao sklopivi element. Prihvaća izborne opcije object.

  1. $ ( '#myCollapsible' ). sažimanje ({
  2. prebacivanje : lažno
  3. })

.collapse('prebaci')

Prebacuje sklopivi element na prikazan ili skriven.

.collapse('show')

Prikazuje sklopivi element.

.collapse('sakrij')

Skriva sklopivi element.

Događaji

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

Događaj Opis
pokazati Ovaj događaj aktivira se odmah kada showse pozove metoda instance.
prikazano Ovaj se događaj pokreće kada je element sažimanja učinjen vidljivim korisniku (pričekat će da se css prijelazi završe).
sakriti Ovaj događaj se pokreće odmah nakon hidepoziva metode.
skriven Ovaj se događaj pokreće kada je element sažimanja skriven od korisnika (pričekat će da se css prijelazi završe).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // učini nešto…
  3. })

Oko

Osnovni, lako proširivi dodatak za brzo kreiranje elegantnih predznaka s bilo kojim oblikom unosa teksta.

Preuzmi datoteku

Primjer

Počnite upisivati ​​u donje polje kako biste prikazali rezultate s upisivanjem unaprijed.


Korištenje bootstrap-typeahead.js

Pozovite tipkanje unaprijed putem javascripta:

  1. $ ( '.typeahead' ). ispis unaprijed ()

Mogućnosti

Ime tip zadano opis
izvor niz [ ] Izvor podataka prema kojem se postavlja upit.
stavke broj 8 Najveći broj stavki za prikaz u padajućem izborniku.
šibica funkcija neosjetljivo na velika i mala slova Metoda koja se koristi za utvrđivanje podudara li se upit sa stavkom. Prihvaća jedan argument itemprema kojem se ispituje upit. Pristupite trenutnom upitu pomoću this.query. Vrati booleov trueako se upit podudara.
razvrstivač funkcija točno podudaranje,
osjetljivo na velika i mala slova,
neosjetljivo na velika i mala slova
Metoda koja se koristi za sortiranje rezultata automatskog dovršavanja. Prihvaća jedan argument itemsi ima opseg instance upisa unaprijed. Navedite trenutni upit pomoću this.query.
highlighter funkcija ističe sva zadana podudaranja Metoda koja se koristi za isticanje rezultata automatskog dovršavanja. Prihvaća jedan argument itemi ima opseg instance upisa unaprijed. Treba vratiti html.

Markup

Dodajte atribute podataka za registraciju elementa s funkcijom unaprijed upisivanja.

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

Metode

.typeahead(opcije)

Inicijalizira unos s upisivanjem unaprijed.