JavaScript

Oživite komponente Bootstrapa – zdaj s 13 vtičniki jQuery po meri.

Posamezno ali sestavljeno

Vtičnike je mogoče vključiti posamezno (čeprav imajo nekateri zahtevane odvisnosti) ali vse naenkrat. Tako bootstrap.js kot bootstrap.min.js vsebujeta vse vtičnike v eni datoteki.

Atributi podatkov

Vse vtičnike Bootstrap lahko uporabljate izključno prek API-ja za označevanje, ne da bi napisali eno vrstico JavaScripta. To je Bootstrapov API prvega razreda in bi ga morali najprej upoštevati pri uporabi vtičnika.

Kljub temu je v nekaterih situacijah morda zaželeno, da to funkcijo izklopite. Zato nudimo tudi možnost, da onemogočite API podatkovnega atributa tako, da razvežete vse dogodke v imenskem prostoru telesa z `'data-api'`. To izgleda takole:

  1. $ ( 'telo' ). izklopljen ( '.data-api' )

Druga možnost je, da ciljate na določen vtičnik, samo vključite ime vtičnika kot imenski prostor skupaj z imenskim prostorom data-api, kot je ta:

  1. $ ( 'telo' ). izklopljen ( '.alert.data-api' )

Programski API

Prav tako verjamemo, da bi morali imeti možnost uporabljati vse vtičnike Bootstrap zgolj prek JavaScript API-ja. Vsi javni API-ji so enojne metode, ki jih je mogoče verižiti, in vrnejo zbirko, po kateri je ukrepal.

  1. $ ( ".btn.nevarnost" ). gumb ( "preklop" ). addClass ( "debel" )

Vse metode bi morale sprejeti izbirni predmet možnosti, niz, ki cilja na določeno metodo, ali nič (kar sproži vtičnik s privzetim vedenjem):

  1. $ ( "#myModal" ). modal () // inicializiran s privzetimi vrednostmi
  2. $ ( "#myModal" ). modal ({ keyboard : false }) // inicializirano brez tipkovnice
  3. $ ( "#myModal" ). modal ( 'show' ) // inicializira in takoj prikliče show

Vsak vtičnik izpostavi tudi svoj neobdelani konstruktor v lastnosti `Konstruktor`: $.fn.popover.Constructor. Če želite dobiti določen primerek vtičnika, ga pridobite neposredno iz elementa: $('[rel=popover]').data('popover').

Brez konflikta

Včasih je treba uporabiti vtičnike Bootstrap z drugimi okviri uporabniškega vmesnika. V teh okoliščinah lahko občasno pride do kolizij imenskega prostora. Če se to zgodi, lahko pokličete .noConflictvtičnik, katerega vrednost želite razveljaviti.

  1. var bootstrapButton = $ . fn . gumb . noConflict () // vrne $.fn.button na predhodno dodeljeno vrednost
  2. $ . fn . bootstrapBtn = bootstrapButton // da $().bootstrapBtn funkcionalnost zagona

Dogodki

Bootstrap ponuja dogodke po meri za večino edinstvenih dejanj vtičnika. Na splošno so ti v obliki nedoločnika in preteklega deležnika – kjer se nedoločnik (npr. show) sproži na začetku dogodka, njegova oblika preteklega deležnika (npr. shown) pa se sproži ob zaključku dejanja.

Vsi nedoločni dogodki zagotavljajo funkcijo preventDefault. To omogoča, da ustavite izvajanje dejanja, preden se začne.

  1. $ ( '#myModal' ). on ( 'show' , function ( e ) {
  2. if (! data ) return e . preventDefault () // ustavi prikaz modalnega
  3. })

O prehodih

Za preproste učinke prehoda enkrat vključite bootstrap-transition.js skupaj z drugimi datotekami JS. Če uporabljate preveden (ali zmanjšan) bootstrap.js , tega ni treba vključiti – že je tam.

Primeri uporabe

Nekaj ​​primerov vtičnika za prehod:

  • Drsenje ali bledenje v modalih
  • Izginjanje zavihkov
  • Izginjanje opozoril
  • Drsna vrtiljaka

Primeri

Modali so poenostavljeni, a prilagodljivi pogovorni pozivi z minimalno zahtevano funkcionalnostjo in pametnimi privzetimi nastavitvami.

Statični primer

Upodobljen modal z glavo, telesom in nizom dejanj v nogi.

  1. <div class = "modal hide fade" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  4. <h3> Modalna glava </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Eno lepo telo ... </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" > Zapri </a>
  11. <a href = "#" class = "btn btn-primary" > Shrani spremembe </a>
  12. </div>
  13. </div>

Demo v živo

Preklopite modal prek JavaScripta s klikom na spodnji gumb. Zdrsel bo navzdol in zbledel z vrha strani.

  1. <!-- Gumb za sprožitev načina -->
  2. <a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Zaženi demo modal </a>
  3.  
  4. <!-- Modalno -->
  5. <div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
  6. <div class = "modal-header" >
  7. <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>
  8. <h3 id = "myModalLabel" > Modalna glava </h3>
  9. </div>
  10. <div class = "modal-body" >
  11. <p> Eno lepo telo ... </p>
  12. </div>
  13. <div class = "modal-footer" >
  14. <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Zapri </button>
  15. <button class = "btn btn-primary" > Shrani spremembe </button>
  16. </div>
  17. </div>

Uporaba

Preko podatkovnih atributov

Aktivirajte modal brez pisanja JavaScripta. Nastavite data-toggle="modal"na element krmilnika, kot je gumb, skupaj z data-target="#foo"ali href="#foo"za ciljanje določenega načina za preklop.

  1. <button type = "button" data-toggle = "modal" data-target = "#myModal" > Zaženi modal </button>

Prek JavaScripta

Pokličite modal z ID -jem myModalz eno vrstico JavaScripta:

  1. $ ( '#myModal' ). modalno ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-backdrop="".

Ime vrsta privzeto opis
ozadje logično prav Vključuje element modalne kulise. Druga možnost je, da določite staticza ozadje, ki ob kliku ne zapre modala.
tipkovnico logično prav Zapre modal, ko pritisnete tipko za izhod
pokazati logično prav Pri inicializaciji prikaže modal.
na daljavo pot lažno

Če je naveden oddaljeni url, bo vsebina naložena prek loadmetode jQuery in vstavljena v .modal-body. Če uporabljate podatkovni API, lahko namesto tega uporabite hrefoznako za določitev oddaljenega vira. Primer tega je prikazan spodaj:

  1. <a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Metode

.modal(možnosti)

Aktivira vašo vsebino kot modalno. Sprejema neobvezne možnosti object.

  1. $ ( '#myModal' ). modalno ({
  2. tipkovnica : false
  3. })

.modal('preklop')

Ročno preklopi modal.

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

.modal('pokaži')

Ročno odpre modal.

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

.modal('skrij')

Ročno skrije modal.

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

Dogodki

Modalni razred Bootstrapa izpostavlja nekaj dogodkov za priključitev na modalno funkcionalnost.

Dogodek Opis
pokazati Ta dogodek se sproži takoj, ko showse 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 hideje 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).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // naredi kaj…
  3. })

Primer v vrstici za krmarjenje

Vtičnik ScrollSpy je namenjen samodejnemu posodabljanju ciljev navigacije glede na položaj drsenja. Pomaknite se po območju pod vrstico za krmarjenje in opazujte spremembo aktivnega razreda. Označeni bodo tudi spustni podelementi.

@debela

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi preden so razprodali qui. Pravice za kolesa Tumblr od kmetije do mize. Jopica Anim keffiyeh carles. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby pulover lomo jean kratke hlače, williamsburg hoodie minim qui verjetno še niste slišali zanje in jopica skrbniški sklad culpa biodiesel wes anderson aesthetic. Nihil tetoviran akuzamus, cred ironija biodizel keffiyeh obrtnik ullamco consequat.

@mdo

Veniam marfa brki rolka, adipisicing fugiat velit vile brada. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tetoviran cosby pulover s hrano, mcsweeneyjev quis non freegan vinil. Lo-fi wes anderson +1 krojaško. Carles ne estetsko vajo quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

eno

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo kolesarske pravice 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, trajnostni 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 domnevno. Locavore sed helvetica kliše ironija, thundercats verjetno še niste slišali zanje consequat pulover s kapuco brez glutena lo-fi fap aliquip. Labore elit placeat preden so bili razprodani, terry richardson proident brunch nesciunt quis cosby pulover pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Uporaba

Preko podatkovnih atributov

Če želite preprosto dodati vohunsko vedenje v svojo zgornjo vrstico za krmarjenje, preprosto dodajte data-spy="scroll"elementu, za katerim želite vohuniti (najpogosteje je to telo), in data-target=".navbar"izberite, katero navigacijo želite uporabiti. Scrollspy boste želeli uporabiti s .navkomponento.

  1. <body data-spy = "scroll" data-target = ".navbar" > ... </body>

Prek JavaScripta

Pokličite Scrollspy prek JavaScripta:

  1. $ ( '#navbar' ). Scrollspy ()
Glavo pokonci! Povezave vrstice za krmarjenje 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>.

Metode

.scrollspy('osveži')

Ko uporabljate scrollspy v povezavi z dodajanjem ali odstranjevanjem elementov iz DOM, boste morali poklicati metodo osveževanja takole:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset="".

Ime vrsta privzeto opis
odmik število 10 Slikovne pike za zamik od vrha pri izračunu položaja drsenja.

Dogodki

Dogodek Opis
aktivirati Ta dogodek se sproži vsakič, ko scrollspy aktivira nov element.

Primeri zavihkov

Dodajte hitro, dinamično funkcijo zavihkov za prehod med podokni lokalne vsebine, tudi prek spustnih menijev.

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, 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.


Uporaba

Omogoči zavihke z možnostjo zavihkov prek JavaScripta (vsak zavihek je treba aktivirati posebej):

  1. $ ( '#myTab a' ). kliknite ( funkcija ( e ) {
  2. e . prepreči privzeto ();
  3. $ ( to ). zavihek ( 'pokaži' );
  4. })

Posamezne zavihke lahko aktivirate na več načinov:

  1. $ ( '#myTab a[href="#profile"]' ). zavihek ( 'pokaži' ); // Izberite zavihek po imenu
  2. $ ( '#myTab a:first' ). zavihek ( 'pokaži' ); // Izberite prvi zavihek
  3. $ ( '#myTab a:last' ). zavihek ( 'pokaži' ); // Izberi zadnji zavihek
  4. $ ( '#myTab li:eq(2) a' ). zavihek ( 'pokaži' ); // Izberite tretji zavihek (indeksirano 0)

Markup

Navigacijo po zavihku ali tabletki lahko aktivirate, ne da bi pisali JavaScript, tako da preprosto določite data-toggle="tab"ali data-toggle="pill"na elementu. Če na zavihek dodate razrede in, navboste uporabili slog zavihka Bootstrap.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "tab" > Domov </a></li>
  3. <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>
  4. <li><a href = "#messages" data-toggle = "tab" > Sporočila </a></li>
  5. <li><a href = "#settings" data-toggle = "tab" > Nastavitve </a></li>
  6. </ul>

Metode

$().tab

Aktivira element zavihka in vsebnik vsebine. Zavihek mora imeti bodisi data-targetali hrefciljno usmerjen na vozlišče vsebnika v DOM.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Domača stran </a></li>
  3. <li><a href = "#profile" > Profil </a></li>
  4. <li><a href = "#messages" > Sporočila </a></li>
  5. <li><a href = "#settings" > Nastavitve </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. <skript>
  16. $ ( funkcija () {
  17. $ ( '#myTab a:last' ). zavihek ( 'pokaži' );
  18. })
  19. </script>

Dogodki

Dogodek Opis
pokazati Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite event.targetin event.relatedTargetza ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
prikazano Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite event.targetin event.relatedTargetza ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'prikazano' , funkcija ( e ) {
  2. e . cilj // aktiviran zavihek
  3. e . relatedTarget // prejšnji zavihek
  4. })

Primeri

Navdih za odličen vtičnik jQuery.tipsy, ki ga je napisal Jason Frame; Namigi orodij so posodobljena različica, ki se ne zanaša na slike, uporablja CSS3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov.

Zaradi zmogljivosti sta namig za orodje in pojavni podatkovni apis omogočena, kar pomeni, da ju morate inicializirati sami .

Premaknite miškin kazalec nad spodnje povezave, da si ogledate opise orodij:

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čni rokodelec , karkoli keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin kava virusna.

Štiri smeri

Namigi orodij v vnosnih skupinah

Ko uporabljate namige orodij in pojavne elemente z vnosnimi skupinami Bootstrap, boste morali nastaviti možnost container(dokumentirano spodaj), da se izognete neželenim stranskim učinkom.


Uporaba

Sproži opis orodja prek JavaScripta:

  1. $ ( '#primer' ). opis orodja ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Ime vrsta privzeto opis
animacija logično prav uporabite css fade prehod za opis orodja
html logično lažno Vstavite html v opis orodja. textČe je nastavljeno na false, bo za vstavljanje vsebine v dom uporabljena metoda jquery . Če vas skrbijo napadi XSS, uporabite besedilo.
umestitev niz | funkcijo 'top' kako postaviti opis orodja - vrh | dno | levo | prav
selektor vrvica lažno Če je na voljo izbirnik, bodo predmeti namigov orodja dodeljeni navedenim ciljem.
naslov niz | funkcijo '' privzeta vrednost naslova, če oznaka `title` ni prisotna
sprožilec vrvica 'hover focus' kako se sproži opis orodja - kliknite | lebdi | fokus | priročnik. Upoštevajte, da podajate več prožilcev, ločenih s presledki, vrst sprožilcev.
zamuda številka | predmet 0

zakasnitev prikaza in skrivanja namiga orodja (ms) - ne velja za tip ročnega proženja

Če je navedena številka, se zakasnitev uporabi za skrij/prikaži

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

posoda niz | lažno lažno

Doda namig orodja določenemu elementucontainer: 'body'

Glavo pokonci! Možnosti za posamezne namige orodij je mogoče določiti tudi z uporabo podatkovnih atributov.

Markup

  1. <a href = "#" data-toggle = "tooltip" title = "first tooltip" > premaknite miško nad mano </a>

Metode

$().tooltip(možnosti)

Zbirki elementov priloži obravnavo namigov orodij.

.tooltip('show')

Razkrije namig elementa.

  1. $ ( '#element' ). opis orodja ( 'pokaži' )

.tooltip('skrij')

Skrije namig elementa.

  1. $ ( '#element' ). opis orodja ( 'skrij' )

.tooltip('preklop')

Preklopi opis orodja elementa.

  1. $ ( '#element' ). opis orodja ( 'preklop' )

.tooltip('destroy')

Skrije in uniči namig elementa.

  1. $ ( '#element' ). opis orodja ( 'uniči' )

Primeri

Dodajte majhne prekrivne vsebine, kot so tiste na iPadu, kateremu koli elementu za namestitev sekundarnih informacij. Premaknite miškin kazalec nad gumb, da sprožite pojavni pojav. Zahteva , da je vključen opis orodja .

Statični popover

Na voljo so štiri možnosti: zgoraj, desno, spodaj in levo poravnano.

Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover desno

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover dno

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Popover levo

Sed posuere consectetur est at lobortis. Aenean eu leo ​​quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Nobena oznaka ni prikazana, saj so pojavna okna ustvarjena iz JavaScripta in vsebine v dataatributu.

Demo v živo

Štiri smeri


Uporaba

Omogoči pojavna okna prek JavaScripta:

  1. $ ( '#primer' ). popover ( možnosti )

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-animation="".

Ime vrsta privzeto opis
animacija logično prav uporabite css fade prehod za opis orodja
html logično lažno V pojavno okno vstavite html. textČe je nastavljeno na false, bo za vstavljanje vsebine v dom uporabljena metoda jquery . Če vas skrbijo napadi XSS, uporabite besedilo.
umestitev niz | funkcijo 'prav' kako postaviti popover - zgoraj | dno | levo | prav
selektor vrvica lažno če je na voljo izbirnik, bodo predmeti orodnih namigov dodeljeni navedenim ciljem
sprožilec vrvica 'klik' kako se sproži popover - kliknite | lebdi | fokus | priročnik
naslov niz | funkcijo '' privzeta vrednost naslova, če atribut `naslov` ni prisoten
vsebino niz | funkcijo '' privzeta vrednost vsebine, če atribut `data-content` ni prisoten
zamuda številka | predmet 0

zakasnitev prikaza in skrivanja pojavnega pojava (ms) - ne velja za tip ročnega proženja

Če je navedena številka, se zakasnitev uporabi za skrij/prikaži

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

posoda niz | lažno lažno

Popover doda določenemu elementucontainer: 'body'

Glavo pokonci! Možnosti za posamezna pojavna okna se lahko določijo tudi z uporabo podatkovnih atributov.

Markup

Zaradi zmogljivosti sta omogočena vmesnika Tooltip in Popover data-apis. Če ju želite uporabiti, samo določite izbirno možnost.

Metode

$().popover(možnosti)

Inicializira pojavna okna za zbirko elementov.

.popover('pokaži')

Razkrije pojavni element elementov.

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

.popover('skrij')

Skrije pojavni pojav elementov.

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

.popover('preklop')

Preklopi pojavni pojav elementov.

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

.popover('uniči')

Skrije in uniči popover elementa.

  1. $ ( '#element' ). popover ( 'uniči' )

Primeri opozoril

S tem vtičnikom dodajte funkcijo opustitve vsem opozorilnim sporočilom.

Sveti guacamole! Najbolje, da preverite sami, ne izgledate preveč dobro.

Oh šment! Imate napako!

Spremenite to in ono in poskusite znova. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Sprejmite ta ukrep Ali pa naredi to


Uporaba

Omogoči opustitev opozorila prek JavaScripta:

  1. $ ( ".alert" ). opozorilo ()

Markup

Preprosto dodajte data-dismiss="alert"svojemu gumbu za zapiranje, da samodejno omogočite funkcijo zapiranja opozorila.

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

Metode

$().alert()

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 .fadein ..in

.alert('close')

Zapre opozorilo.

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

Dogodki

Bootstrapov razred opozoril razkrije nekaj dogodkov za vključitev v funkcijo opozorila.

Dogodek Opis
blizu Ta dogodek se sproži takoj, ko closese pokliče metoda primerka.
zaprto Ta dogodek se sproži, ko je bilo opozorilo zaprto (počakal bo, da se prehodi CSS zaključijo).
  1. $ ( '#my-alert' ). bind ( 'zaprto' , funkcija () {
  2. // naredi kaj…
  3. })

Primer uporabe

Naredite več z gumbi. Nadzorni gumb navaja ali ustvari skupine gumbov za več komponent, kot so orodne vrstice.

Stalni

Dodajte data-loading-text="Loading..."za uporabo stanja nalaganja na gumbu.

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Stanje nalaganja </button>

Enotni preklop

Dodajte data-toggle="button"za aktiviranje preklapljanja na enem gumbu.

  1. <button type = "button" class = "btn btn-primary" data-toggle = "button" > Enotni preklop </button>

Potrditveno polje

Dodaj data-toggle="buttons-checkbox"za preklop sloga potrditvenega polja v skupini btn.

  1. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  2. <button type = "button" class = "btn btn-primary" > Levo </button>
  3. <button type = "button" class = "btn btn-primary" > Srednji </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Radio

Dodaj data-toggle="buttons-radio"za preklop radijskega sloga v skupini btn.

  1. <div class = "btn-group" data-toggle = "buttons-radio" >
  2. <button type = "button" class = "btn btn-primary" > Levo </button>
  3. <button type = "button" class = "btn btn-primary" > Srednji </button>
  4. <button type = "button" class = "btn btn-primary" > Desno </button>
  5. </div>

Uporaba

Omogoči gumbe prek JavaScripta:

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

Markup

Podatkovni atributi so sestavni del vtičnika gumbov. Oglejte si spodnji primer kode za različne vrste oznak.

Opcije

Noben

Metode

$().button('preklop')

Preklopi potisno stanje. Gumb daje videz, kot da je bil aktiviran.

Glavo pokonci! data-toggleZ atributom lahko omogočite samodejno preklapljanje gumba .
  1. <button type = "button" class = "btn" data-toggle = "button" > </button>

$().button('nalaganje')

Nastavi stanje gumba na nalaganje - onemogoči gumb in zamenja besedilo z besedilom za nalaganje. Nalaganje besedila mora biti definirano na elementu gumba z uporabo atributa podatkov data-loading-text.

  1. <button type = "button" class = "btn" data-loading-text = "loading stuff..." > ... </button>
Glavo pokonci! Firefox med nalaganjem strani ohranja onemogočeno stanje . Rešitev za to je uporaba autocomplete="off".

$().button('reset')

Ponastavi stanje gumba - besedilo zamenja z izvirnim besedilom.

$().button(niz)

Ponastavi stanje gumba - zamenja besedilo v poljubno podatkovno definirano stanje besedila.

  1. <button type = "button" class = "btn" data-complete-text = "finished!" > ... </button>
  2. <skript>
  3. $ ( '.btn' ). gumb ( 'dokončano' )
  4. </script>

O tem

Zagotovite si osnovne sloge in prilagodljivo podporo za zložljive komponente, kot so harmonike in navigacija.

* Zahteva, da je vključen vtičnik Transitions.

Primer harmonike

Z uporabo vtičnika za strnitev smo zgradili preprost pripomoček v slogu harmonike:

Animacija pariatnega klišeja, ki ga je preprečevala, eiusmod high life obtožba terry richardson in lignji. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tovornjak s hrano kvinoja nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignji kava z enim poreklom nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Oglas veganski razen mesarja vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt verjetno še niste slišali zanje acusamus labore sustainable VHS.
Animacija pariatnega klišeja, ki ga je preprečevala, eiusmod high life obtožba terry richardson in lignji. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tovornjak s hrano kvinoja nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignji kava z enim poreklom nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Oglas veganski razen mesarja vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt verjetno še niste slišali zanje acusamus labore sustainable VHS.
Animacija pariatnega klišeja, ki ga je preprečevala, eiusmod high life obtožba terry richardson in lignji. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tovornjak s hrano kvinoja nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it lignji kava z enim poreklom nulla acceptenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Oglas veganski razen mesarja vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt verjetno še niste slišali zanje acusamus labore sustainable VHS.
  1. <div class = "accordion" id = "accordion2" >
  2. <div class = "accordion-group" >
  3. <div class = "accordion-heading" >
  4. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >
  5. 1. element zložljive skupine
  6. </a>
  7. </div>
  8. <div id = "collapseOne" class = "accordion-body collapse in" >
  9. <div class = "accordion-inner" >
  10. Anim pariatur kliše...
  11. </div>
  12. </div>
  13. </div>
  14. <div class = "accordion-group" >
  15. <div class = "accordion-heading" >
  16. <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >
  17. 2. element zložljive skupine
  18. </a>
  19. </div>
  20. <div id = "collapseTwo" class = "zrušitev telesa harmonike" >
  21. <div class = "accordion-inner" >
  22. Anim pariatur kliše...
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. ...

Vtičnik lahko uporabite tudi brez oznake harmonike. Naj gumb preklaplja med razširitvijo in strnitvijo drugega elementa.

  1. <button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. preprosto zložljivo
  3. </button>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>

Uporaba

Preko podatkovnih atributov

Preprosto dodajte data-toggle="collapse"in data-targetelementu za samodejno dodelitev nadzora nad zložljivim elementom. Atribut data-targetsprejme izbirnik css za uporabo strnjenja. Ne pozabite dodati razreda collapsezložljivemu elementu. Če želite, da se privzeto odpre, dodajte dodatni razred in.

Če želite zložljivemu nadzoru dodati upravljanje skupine, podobno harmoniki, dodajte atribut podatkov data-parent="#selector". Oglejte si predstavitev, da vidite to v akciji.

Prek JavaScripta

Omogoči ročno z:

  1. $ ( ".collapse" ). strni ()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-parent="".

Ime vrsta privzeto opis
starš selektor lažno Izbirnik If then bodo vsi zložljivi elementi pod navedenim nadrejenim elementom zaprti, ko bo prikazan ta zložljivi element. (podobno obnašanju tradicionalne harmonike)
preklop logično prav Ob klicu preklopi zložljivi element

Metode

.collapse(možnosti)

Aktivira vašo vsebino kot zložljiv element. Sprejema neobvezne možnosti object.

  1. $ ( '#myCollapsible' ). strni ({
  2. preklop : napačno
  3. })

.collapse('preklop')

Preklopi zložljiv element med prikazanim ali skritim.

.collapse('show')

Prikazuje zložljiv element.

.collapse('skrij')

Skrije zložljiv element.

Dogodki

Bootstrapov razred kolapsa razkrije nekaj dogodkov za priključitev na funkcionalnost kolapsa.

Dogodek Opis
pokazati Ta dogodek se sproži takoj, ko showse pokliče metoda primerka.
prikazano Ta dogodek se sproži, ko je element strnjenja viden uporabniku (počakal bo, da se prehodi css dokončajo).
skriti Ta dogodek se sproži takoj, ko hideje bila metoda poklicana.
skrit Ta dogodek se sproži, ko je bil strnjeni element skrit pred uporabnikom (počakal bo, da se prehodi css dokončajo).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // naredi kaj…
  3. })

Primer

Osnovni vtičnik, ki ga je enostavno razširiti, za hitro ustvarjanje elegantnih predpisov s poljubnim vnosom besedila.

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

Nastavite, autocomplete="off"da preprečite, da bi se privzeti meniji brskalnika prikazovali nad spustnim menijem Bootstrap typeahead.


Uporaba

Preko podatkovnih atributov

Dodajte atribute podatkov, da registrirate element s funkcijo vnaprejšnjega vpisovanja, kot je prikazano v zgornjem primeru.

Prek JavaScripta

Ročno pokličite tipkalo z:

  1. $ ( '.typeahead' ). tipkanje naprej ()

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-source="".

Ime vrsta privzeto opis
vir polje, funkcija [ ] Vir podatkov za poizvedbo. Lahko je niz nizov ali funkcija. Funkcija prejme dva argumenta, queryvrednost v vnosnem polju in processpovratni klic. Funkcijo je mogoče uporabiti sinhrono z vrnitvijo vira podatkov neposredno ali asinhrono prek processenega samega argumenta povratnega klica.
predmete število 8 Največje število elementov za prikaz v spustnem meniju.
minLength število 1 Najmanjša dolžina znakov, ki je potrebna pred sprožitvijo predlogov za samodokončanje
ujemalka funkcijo neobčutljivo na velike in male črke Metoda, ki se uporablja za ugotavljanje, ali se poizvedba ujema z elementom. Sprejme en sam argument, s itemkaterim preizkusite poizvedbo. Do trenutne poizvedbe dostopajte z this.query. Vrne logično vrednost, trueče se poizvedba ujema.
sortirnik funkcijo natančno ujemanje,
občutljivo na velike in
male črke
Metoda, ki se uporablja za razvrščanje rezultatov samodokončanja. Sprejme en argument itemsin ima obseg primerka vnaprejšnjega vpisovanja. Na trenutno poizvedbo se sklicujte z this.query.
posodobitev funkcijo vrne izbrani element Metoda, uporabljena za vrnitev izbranega elementa. Sprejme en sam argument, itemin ima obseg primerka vnaprejšnjega vpisovanja.
osvetljevalec funkcijo poudari vsa privzeta ujemanja Metoda, ki se uporablja za označevanje rezultatov samodokončanja. Sprejme en argument itemin ima obseg primerka vnaprejšnjega vpisovanja. Vrniti bi moral html.

Metode

.typeahead(možnosti)

Inicializira vnos s tipkanjem naprej.

Primer

Podnavigacija na levi je predstavitev vtičnika za pritrditev v živo.


Uporaba

Preko podatkovnih atributov

Če želite preprosto dodati vedenje pritrjevanja kateremu koli elementu, preprosto dodajte data-spy="affix"elementu, za katerim želite vohuniti. Nato uporabite odmike, da določite, kdaj vklopiti in izklopiti pripenjanje elementa.

  1. <div data-spy = "affix" data-offset-top = "200" > ... </div>
Glavo pokonci! Upravljati morate položaj pripetega elementa in vedenje njegovega neposrednega starša. Položaj nadzirajo affix, affix-topin affix-bottom. Ne pozabite preveriti morebitnega strnjenega nadrejenega elementa, ko se doda pripona, saj odstranjuje vsebino iz običajnega poteka strani.

Prek JavaScripta

Pokličite vtičnik za pritrditev prek JavaScripta:

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

Opcije

Možnosti je mogoče posredovati prek podatkovnih atributov ali JavaScripta. Za atribute podatkov pripnite ime možnosti v data-, kot v data-offset-top="200".

Ime vrsta privzeto opis
odmik številka | funkcija | predmet 10 Slikovne pike za odmik od zaslona pri izračunu položaja drsenja. Če je podana ena sama številka, bo odmik uporabljen v zgornji in levi smeri. Če želite poslušati eno samo smer ali več edinstvenih odmikov, samo vnesite predmet offset: { x: 10 }. Uporabite funkcijo, ko morate dinamično zagotoviti odmik (uporabno za nekatere odzivne dizajne).