Javascript Bootstrapille

Herätä Bootstrapin komponentit henkiin – nyt 12 mukautetulla jQuery - laajennuksella.

Modaalit

Virtaviivainen, mutta joustava, perinteinen javascript-modaalilaajennus, jossa on vain vaaditut vähimmäistoiminnot ja älykkäät oletusasetukset.

Pudotusvalikosta

Lisää avattavia valikoita lähes mihin tahansa Bootstrapissa tällä yksinkertaisella laajennuksella. Bootstrap tarjoaa täyden pudotusvalikon tuen navigointipalkissa, välilehdissä ja pillereissä.

Scrollspy

Käytä scrollspyä päivittääksesi navigointipalkin linkit automaattisesti näyttämään nykyisen aktiivisen linkin vierityksen sijainnin perusteella.

Vaihtelevat välilehdet

Tämän laajennuksen avulla voit tehdä välilehdistä ja pillereistä hyödyllisempiä antamalla niiden selata paikallisen sisällön välilehtiruutuja.

Työkaluvinkit

Uusi versio jQuery Tipsy -laajennuksesta, työkaluvihjeet eivät ole riippuvaisia ​​kuvista – ne käyttävät CSS3:a animaatioihin ja dataattribuutteja paikalliseen otsikon tallentamiseen.

Popovers *

Lisää pieniä peittokuvia sisällöstä, kuten iPadissa, mihin tahansa elementtiin toissijaisten tietojen tallentamiseksi.

* Edellyttää työkaluvihjeiden sisällyttämistä

Varoitusviestit

Alert-laajennus on pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.

Painikkeet

Tee enemmän painikkeilla. Ohjaa painikkeen tiloja tai luo painikeryhmiä muita osia, kuten työkalurivejä, varten.

Romahdus

Hanki perustyylejä ja joustava tuki kokoontaitetuille komponenteille, kuten haitarille ja navigoinnille.

Karuselli

Luo karuselli mistä tahansa sisällöstä, josta haluat tarjota interaktiivisen diaesityksen sisällöstä.

Kirjoita eteenpäin

Helppokäyttöinen peruslaajennus, jolla voit luoda nopeasti tyylikkäitä kirjasintyyppejä minkä tahansa muodon tekstinsyötöllä.

Siirtymät *

Jos haluat yksinkertaisia ​​siirtymätehosteita, sisällytä bootstrap-transition.js kerran lisätäksesi modaaleja tai häivyttääksesi hälytyksiä.

* Vaaditaan liitännäisten animaatioita varten

Varoitus! Kaikki javascript-laajennukset vaativat jQueryn uusimman version.

Tietoja modaaleista

Virtaviivainen, mutta joustava, perinteinen javascript-modaalilaajennus, jossa on vain vaaditut vähimmäistoiminnot ja älykkäät oletusasetukset.

Lataa tiedosto

Staattinen esimerkki

Alla on staattisesti renderöity modaali.

Live-demo

Vaihda modaali javascriptin kautta napsauttamalla alla olevaa painiketta. Se liukuu alas ja häivyttää sivun yläreunasta.

Käynnistä demomodaali

Bootstrap-modalin käyttö

Soita modaalille javascriptin kautta:

  1. $ ( '#myModal' ). modaali ( vaihtoehdot )

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
taustalla boolean totta Sisältää modaalitaustaelementin. Vaihtoehtoisesti voit määrittää statictaustalle, joka ei sulje modaalia napsautettaessa.
näppäimistö boolean totta Sulkee modaalin, kun Esc-näppäintä painetaan
näytä boolean totta Näyttää modaalin alustuksen yhteydessä.

Merkintä

Voit aktivoida modaalit sivullasi helposti ilman, että sinun tarvitsee kirjoittaa yhtään JavaScript-riviä. Aseta data-toggle="modal"vain ohjainelementti, jossa on data-target="#foo"tai href="#foo"joka vastaa modaalielementin tunnusta, ja kun napsautat, se käynnistää modaalisi.

Voit myös lisätä vaihtoehtoja modaaliinstanssiisi lisäämällä ne lisätietomääritteiksi joko ohjauselementtiin tai itse modaalimerkintään.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Käynnistä Modal </a>
  1. <div class = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "sulje" data-dismiss = "modaalinen" > × </button>
  4. <h3> Modaalinen otsikko </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Yksi hieno ruumis… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Sulje </a>
  11. <a href = "#" class = "btn btn-primary" > Tallenna muutokset </a>
  12. </div>
  13. </div>
Varoitus! Jos haluat, että modaalisi animoituu sisään ja ulos, lisää vain .fadeluokka .modalelementtiin (katso esittely nähdäksesi tämän toiminnassa) ja sisällytä bootstrap-transition.js.

menetelmät

.modal(optiot)

Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object.

  1. $ ( '#myModal' ). modaalinen ({
  2. näppäimistö : false
  3. })

.modal('toggle')

Vaihtaa modaalin manuaalisesti.

  1. $ ( '#myModal' ). modaalinen ( 'toggle' )

.modal('show')

Avaa modaalin manuaalisesti.

  1. $ ( '#myModal' ). modaalinen ( 'show' )

.modal('piilota')

Piilottaa modaalin manuaalisesti.

  1. $ ( '#myModal' ). modaalinen ( 'piilota' )

Tapahtumat

Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
esitetty Tämä tapahtuma käynnistyy, kun modaali on asetettu käyttäjän näkyväksi (odottaa css-siirtymien valmistumista).
piilottaa Tämä tapahtuma käynnistyy välittömästi, kun hideinstanssimenetelmää on kutsuttu.
piilotettu Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista).
  1. $ ( '#myModal' ). on ( 'hidden' , function () {
  2. // tee jotain…
  3. })

ScrollSpy-laajennus on tarkoitettu navigointikohteiden automaattiseen päivittämiseen vierityksen sijainnin perusteella.

Lataa tiedosto

Esimerkki navigointipalkin kanssa scrollspy

Vieritä alla olevaa aluetta ja katso navigointipäivitys. Myös pudotusvalikon alakohdat korostetaan. Kokeile!

@rasva

Mainos leggingsit keytar, brunssi id art party dolor labore. Pitchfork yr enim lo-fi ennen kuin ne myytiin loppuun. Tumblr maalta pöytään polkupyörän oikeudet mitä tahansa. Anim keffiyeh carles neuletakki. Velit seitan mcsweeney's Photo Booth 3 wolf moon irure. Cosby villapaita lomo jean shortsit, williamsburg huppari minim qui et luultavasti ole kuullut niistä ja neuletakainen rahasto culpa biodiesel wes anderson esteettinen. Nihil tatuoitu accusamus, cred ironia biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa viikset rullalauta, fugiat velit pitchfork -parta. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat neljä loko nisi, ea helvetica nulla carles. Tatuoitu cosby-villapusero food truck, mcsweeney's quis non freegan vinyyli. Lo-fi wes anderson +1 sartorial. Carles ei esteettinen harjoittelu quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

yksi

Occaecat commodo aliqua delectus. Fap craft beer deserunt rullalauta ea. Lomo polkupyörän oikeudet adipisicing banh mi, velit ea sunt next level locavore yhden alkuperän kahvia magna veniamissa. High life ID -vinyyli, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY mini-mesenger laukku. Cred ex in, kestävä delectus consectetur fanny pack iphone.

kaksi

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 blogi, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id oletus. Locavore sed helvetica kliseeironiaa, ukkoskissoja, joista et todennäköisesti ole kuullutkaan consequat huppari gluteeniton lo-fi fap aliquip. Labore elit placeat ennen kuin ne myytiin loppuun, Terry richardson proident brunssi nesciunt quis cosby villapaita pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Bootstrap-scrollspy.js:n käyttö

Soita scrollspylle javascriptin kautta:

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

Merkintä

Voit helposti lisätä scrollspy-käyttäytymistä yläpalkin navigointiin lisäämällä data-spy="scroll"vain elementtiin, jota haluat vakoilla (yleensä tämä on runko).

  1. <body data-spy = "scroll" > ... </body>
Varoitus! Navigointipalkin linkeillä on oltava selvitettävät tunnistekohteet. Esimerkiksi, <a href="#home">home</a>täytyy vastata jotain domissa, kuten <div id="home"></div>.

menetelmät

.scrollspy('refresh')

Kun käytät scrollspyä yhdessä elementtien lisäämisen tai poistamisen kanssa DOM:sta, sinun on kutsuttava päivitysmenetelmä seuraavasti:

  1. $ ( '[data-spy="scroll"]' ). jokainen ( funktio () {
  2. var $spy = $ ( tämä ). scrollspy ( 'päivitä' )
  3. });

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
offset määrä 10 Pikselit siirtymään ylhäältä, kun lasketaan vierityskohtaa.

Tapahtumat

Tapahtuma Kuvaus
aktivoida Tämä tapahtuma käynnistyy aina, kun scrollspy aktivoi uuden kohteen.

Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon paikallisen sisällön siirtymiseen.

Lataa tiedosto

Esimerkki välilehdistä

Napsauta alla olevia välilehtiä vaihtaaksesi piilotettuja ruutuja jopa pudotusvalikoiden kautta.

Raaka denim et luultavasti ole kuullut niistä farkkushortseja Austin. Nesciunt tofu stumptown aliqua, retro syntetisaattorin puhdistusaine. Viikset klisee tempor, williamsburg carles vegaani helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby villapaita eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis neuletakki amerikkalaiset vaatteet, teurastaja 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.


Bootstrap-tab.js:n käyttö

Ota välilehdet käyttöön javascriptin kautta (jokainen välilehti on aktivoitava erikseen):

  1. $ ( '#myTab a' ). napsauta ( toiminto ( e ) {
  2. e . estääDefault ();
  3. $ ( tämä ). välilehti ( 'näytä' );
  4. })

Voit aktivoida yksittäisiä välilehtiä useilla tavoilla:

  1. $ ( '#myTab a[href="#profile"]' ). välilehti ( 'näytä' ); // Valitse välilehti nimen mukaan
  2. $ ( '#myTab a:first' ). välilehti ( 'näytä' ); // Valitse ensimmäinen välilehti
  3. $ ( '#myTab a:last' ). välilehti ( 'näytä' ); // Valitse viimeinen välilehti
  4. $ ( '#myTab li:eq(2) a' ). välilehti ( 'näytä' ); // Valitse kolmas välilehti (0-indeksoitu)

Merkintä

Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-toggle="tab"tai data-toggle="pill"elementin päälle. Luokkien ja lisääminen välilehdelle navottaa käyttöön bootstrap-välilehden tyylin.nav-tabsul

  1. <ul class = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "välilehti" > Etusivu </a></li>
  3. <li><a href = "#profile" data-toggle = "välilehti" > Profiili </a></li>
  4. <li><a href = "#messages" data-toggle = "välilehti" > Viestit </a></li>
  5. <li><a href = "#settings" data-toggle = "välilehti" > Asetukset </a></li>
  6. </ul>

menetelmät

$().tab

Aktivoi välilehtielementin ja sisältösäiliön. Välilehdellä tulee olla joko a data-targettai hrefkohdistava säilön solmu DOM:ssa.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "aktiivinen" ><a href = "#home" > Etusivu </a></li>
  3. <li><a href = "#profile" > Profiili </a></li>
  4. <li><a href = "#messages" > Viestit </a></li>
  5. <li><a href = "#settings" > Asetukset </a></li>
  6. </ul>
  7.  
  8. <div class = "tab-content" >
  9. <div class = "tab-pane active" id = "koti" > ... </div>
  10. <div class = "tab-pane" id = "profiili" > ... </div>
  11. <div class = "tab-pane" id = "viestit" > ... </div>
  12. <div class = "tab-pane" id = "asetukset" > ... </div>
  13. </div>
  14.  
  15. <script>
  16. $ ( funktio () {
  17. $ ( '#myTab a:last' ). välilehti ( 'näytä' );
  18. })
  19. </script>

Tapahtumat

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välilehtien näyttämisen yhteydessä, mutta ennen kuin uusi välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
esitetty Tämä tapahtuma käynnistyy välilehden näyttämisen yhteydessä, kun välilehti on näytetty. Käytä event.targetja event.relatedTargetkohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
  1. $ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {
  2. e . kohde // aktivoitu välilehti
  3. e . relatedTarget // edellinen välilehti
  4. })

Tietoja työkaluvihjeistä

Inspiroitunut erinomaisesta jQuery.tipsy-laajennuksesta, jonka on kirjoittanut Jason Frame; Työkaluvinkit ovat päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja paikalliseen otsikon tallentamiseen.

Lataa tiedosto

Esimerkki työkaluvihjeiden käytöstä

Vie hiiri alla olevien linkkien päälle nähdäksesi työkaluvinkit:

Tiukat housut seuraavan tason keffiyeh et luultavasti ole kuullut niistä. Photo Booth parta raaka denim kohopaino vegaaninen messenger bag stumptown. Maatilasta pöytään seitan, mcsweeneyn fixie kestävä quinoa 8-bittinen amerikkalainen vaatteet on Terry richardson vinyyli chambray. Beard stumptown, neuletakit banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, neljä loko mcsweeneyn puhdistavaa vegaani chambraya. Todella ironinen käsityöläinen , mitä tahansa keytar , scenester farm-to-table banksy Austin twitter kahva freegan cred raaka denim yksialkuperäinen kahvi virus.


Bootstrap-tooltip.js:n käyttö

Käynnistä työkaluvihje javascriptin kautta:

  1. $ ( '#esimerkki' ). työkaluvinkki ( vaihtoehdot )

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
animaatio boolean totta käytä css-häivytystä työkaluvihjeessä
sijoitus merkkijono|funktio 'huippu' työkaluvihjeen sijoittaminen - top | pohja | vasemmalle | oikein
valitsin merkkijono väärä Jos valitsin on käytössä, työkaluvihjeobjektit delegoidaan määritetyille kohteille.
otsikko merkkijono | toiminto '' oletusotsikon arvo, jos "title"-tunnistetta ei ole
laukaista merkkijono 'hover' miten työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen
viive numero | esine 0

työkaluvihjeen näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista liipaisintyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { show: 500, hide: 100 }

Varoitus! Vaihtoehtoisesti yksittäisten työkaluvihjeiden asetukset voidaan määrittää käyttämällä dataattribuutteja.

Merkintä

Suorituskykysyistä Tooltip ja Popover data-apis ovat käytössä. Jos haluat käyttää niitä, määritä vain valintavaihtoehto.

  1. <a href = "#" rel = "tooltip" title = "ensimmäinen työkaluvinkki" > vie hiiri päälleni </a>

menetelmät

$().työkaluvinkki(vaihtoehdot)

Kiinnittää työkaluvihjeiden käsittelijän elementtikokoelmaan.

.tooltip('show')

Näyttää elementin työkaluvihjeen.

  1. $ ( '#elementti' ). työkaluvihje ( 'näytä' )

.tooltip('piilota')

Piilottaa elementin työkaluvihjeen.

  1. $ ( '#elementti' ). työkaluvihje ( 'piilota' )

.tooltip('toggle')

Vaihtaa elementin työkaluvihjeen päälle/pois.

  1. $ ( '#elementti' ). työkaluvihje ( 'toggle' )

Tietoja popovereista

Lisää pieniä peittokuvia sisällöstä, kuten iPadissa, mihin tahansa elementtiin toissijaisten tietojen tallentamiseksi.

* Edellyttää työkaluvihjeen sisällyttämistä

Lataa tiedosto

Esimerkki hover popoverista

Vie hiiri painikkeen päälle käynnistääksesi ponnahdusikkunan.


Bootstrap-popover.js:n käyttö

Ota ponnahdusikkunat käyttöön javascriptin kautta:

  1. $ ( '#esimerkki' ). ponnahdusikkuna ( vaihtoehdot )

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
animaatio boolean totta käytä css-häivytystä työkaluvihjeessä
sijoitus merkkijono|funktio 'oikein' miten ponnahdusikkuna sijoitetaan - top | pohja | vasemmalle | oikein
valitsin merkkijono väärä jos valitsin tarjotaan, työkaluvihjeobjektit delegoidaan määritetyille kohteille
laukaista merkkijono 'hover' miten työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen
otsikko merkkijono | toiminto '' otsikon oletusarvo, jos attribuutti "title" ei ole olemassa
sisältö merkkijono | toiminto '' oletussisältöarvo, jos data-content-attribuuttia ei ole
viive numero | esine 0

ponnahdusikkunan näyttämisen ja piilottamisen viive (ms) - ei koske manuaalista laukaisutyyppiä

Jos numero annetaan, viivettä käytetään molempiin piilottamiseen/näyttöön

Objektin rakenne on:delay: { show: 500, hide: 100 }

Varoitus! Vaihtoehtoisesti yksittäisten ponnahdusikkunoiden asetukset voidaan määrittää käyttämällä dataattribuutteja.

Merkintä

Suorituskykysyistä Tooltip ja Popover data-apis ovat käytössä. Jos haluat käyttää niitä, määritä vain valintavaihtoehto.

menetelmät

$().popover(vaihtoehdot)

Alustaa elementtikokoelman ponnahdusikkunat.

.popover('show')

Paljastaa elementtien popoverin.

  1. $ ( '#elementti' ). popover ( 'show' )

.popover('piilota')

Piilottaa elementtien ponnahdusikkunan.

  1. $ ( '#elementti' ). popover ( 'piilota' )

.popover('toggle')

Vaihtaa elementtien ponnahdusikkunan.

  1. $ ( '#elementti' ). ponnahdusikkuna ( 'toggle' )

Tietoja hälytyksistä

Alert-laajennus on pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.

ladata

Esimerkki hälytyksistä

Hälytyslaajennus toimii tavallisissa hälytysviesteissä ja estoviesteissä.

Pyhä guacamole! Parasta tarkistaa itsesi, et näytä liian hyvältä.

Voi pahus! Sinulla on virhe!

Vaihda tämä ja se ja yritä uudelleen. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tee tämä toimenpide Tai tee tämä


Bootstrap-alert.js:n käyttö

Ota hälytyksen hylkääminen käyttöön javascriptin kautta:

  1. $ ( ".alert" ). hälytys ()

Merkintä

Lisää data-dismiss="alert"vain sulkemispainike, niin saat automaattisesti hälytyssulkemistoiminnon.

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

menetelmät

$().alert()

Kääri kaikki hälytykset läheisiin toimintoihin. Jos haluat, että hälytykset näkyvät suljettuina, varmista, että niihin on jo sovellettu - .fadeja -luokka..in

.alert('close')

Sulkee hälytyksen.

  1. $ ( ".alert" ). hälytys ( 'sulje' )

Tapahtumat

Bootstrapin hälytysluokka paljastaa muutamia tapahtumia hälytystoimintoihin kytkeytymistä varten.

Tapahtuma Kuvaus
kiinni Tämä tapahtuma käynnistyy välittömästi, kun closeinstanssimenetelmää kutsutaan.
suljettu Tämä tapahtuma käynnistyy, kun hälytys on suljettu (odottaa css-siirtymien valmistumista).
  1. $ ( '#my-hälytys' ). bind ( 'suljettu' , function () {
  2. // tee jotain…
  3. })

Noin

Tee enemmän painikkeilla. Ohjaa painikkeen tiloja tai luo painikeryhmiä muita osia, kuten työkalurivejä, varten.

Lataa tiedosto

Käyttöesimerkkejä

Käytä painikelaajennusta tiloihin ja vaihtoihin.

valtiollinen
Yksi kytkin
Valintaruutu
Radio

Bootstrap-button.js:n käyttö

Ota painikkeet käyttöön javascriptin kautta:

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

Merkintä

Dataattribuutit ovat olennainen osa painikelaajennusta. Katso alla oleva esimerkkikoodi eri merkintätyypeille.

  1. <!-- Lisää data-toggle="button" aktivoidaksesi yhden painikkeen vaihtamisen -->
  2. <button class = "btn" data-toggle = "button" > Yksittäinen vaihtopainike </button>
  3.  
  4. <!-- Lisää data-toggle="buttons-checkbox" valintaruudun tyylin vaihtamiseen btn-groupissa -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >
  6. <button class = "btn" > Vasen </button>
  7. <button class = "btn" > Keskimmäinen </button>
  8. <button class = "btn" > Oikea </button>
  9. </div>
  10.  
  11. <!-- Lisää data-toggle="buttons-radio" radiotyylin vaihtamiseksi btn-groupissa -->
  12. <div class = "btn-group" data-toggle = "buttons-radio" >
  13. <button class = "btn" > Vasen </button>
  14. <button class = "btn" > Keskimmäinen </button>
  15. <button class = "btn" > Oikea </button>
  16. </div>

menetelmät

$().button('toggle')

Vaihtaa työntötilan. Antaa painikkeelle vaikutelman, että se on aktivoitu.

Varoitus! Voit ottaa painikkeen automaattisen vaihtamisen käyttöön data-togglemääritteen avulla.
  1. <button class = "btn" data-toggle = "button" > </button>

$().button('lataus')

Asettaa painikkeen tilan lataustilaan - poistaa painikkeen käytöstä ja vaihtaa tekstin lataustekstiin. Ladattava teksti tulee määrittää painikeelementissä data-attribuutin avulla data-loading-text.

  1. <button class = "btn" data-loading-text = "ladataan tavaraa..." > ... </button>
Varoitus! Firefox pysyy poissa käytöstä koko sivulatauksen ajan . Kiertotapa tähän on käyttää autocomplete="off".

$().button('reset')

Palauttaa painikkeen tilan - vaihtaa tekstin alkuperäiseksi.

$().painike(merkkijono)

Nollaa painikkeen tilan - vaihtaa tekstin mihin tahansa datamääritelmään tekstitilaan.

  1. <button class = "btn" data-complete-text = "valmis!" > ... </button>
  2. <script>
  3. $ ( '.btn' ). painike ( 'valmis' )
  4. </script>

Noin

Hanki perustyylejä ja joustava tuki kokoontaitetuille komponenteille, kuten haitarille ja navigoinnille.

Lataa tiedosto

* Edellyttää Transitions-laajennuksen sisällyttämistä.

Esimerkki harmonikka

Rakensimme yksinkertaisen haitarityylisen widgetin tiivistyslaajennuksen avulla:

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunssi. Food truck quinoa nesciunt laborum eiusmod. Brunssi 3 wolf moon tempor, sunt aliqua laita lintu sen päälle kalmari yksialkuperäinen kahvi nulla guessnda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegaani, paitsi teurastaja varapääjohtaja. Leggingsit occaecat käsityöolut maatilasta pöytään, raaka denim esteettinen syntetisaattori, et luultavasti ole kuullut niistä accusamus labore kestävää VHS:tä.

Bootstrap-collapse.js:n käyttö

Ota käyttöön javascriptin kautta:

  1. $ ( ".collapse" ). romahtaa ()

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
vanhempi valitsin väärä Jos valitsin, kaikki kutistettavat elementit määritetyn ylätason alapuolella suljetaan, kun tämä kokoontaitettava kohde näytetään. (samanlainen kuin perinteinen harmonikka)
vaihtaa boolean totta Vaihtaa kokoontaitettavan elementin kutsun yhteydessä

Merkintä

Lisää vain elementtiin data-toggle="collapse"ja a data-target, jos haluat määrittää automaattisesti kokoontaitettavan elementin hallinnan. Attribuutti data-targethyväksyy css-valitsimen, johon tiivistys sovelletaan. Muista lisätä luokka collapsekokoontaitettavaan elementtiin. Jos haluat sen avautuvan oletusarvoisesti, lisää ylimääräinen luokka in.

  1. <button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >
  2. yksinkertainen kokoontaitettava
  3. </button>
  4.  
  5. <div id = "demo" class = "kutista sisään" > </div>
Varoitus! Lisää haitarimainen ryhmähallinta kokoontaitettavaan ohjausobjektiin lisäämällä data-attribuutti data-parent="#selector". Katso demo nähdäksesi tämän toiminnassa.

menetelmät

.collapse(optiot)

Aktivoi sisältösi kokoontaitettavana elementtinä. Hyväksyy valinnaiset vaihtoehdot object.

  1. $ ( '#myCollapsible' ). tiivistää ({
  2. vaihtaa : false
  3. })

.collapse('toggle')

Vaihtaa kokoontaitettavan elementin näytettäväksi tai piilotetuksi.

.collapse('show')

Näyttää kokoontaitettavan elementin.

.collapse('piilota')

Piilottaa kokoontaitettavan elementin.

Tapahtumat

Bootstrapin tiivistysluokka paljastaa muutamia tapahtumia, jotka liittyvät tiivistystoimintoon.

Tapahtuma Kuvaus
näytä Tämä tapahtuma käynnistyy välittömästi, kun showinstanssimenetelmää kutsutaan.
esitetty Tämä tapahtuma käynnistyy, kun tiivistyselementti on tehty näkyväksi käyttäjälle (odottaa css-siirtymien valmistumista).
piilottaa Tämä tapahtuma käynnistyy välittömästi, kun hidemenetelmä on kutsuttu.
piilotettu Tämä tapahtuma käynnistyy, kun tiivistyselementti on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista).
  1. $ ( '#myCollapsible' ). on ( 'hidden' , function () {
  2. // tee jotain…
  3. })

Noin

Helppokäyttöinen peruslaajennus, jolla voit luoda nopeasti tyylikkäitä kirjasintyyppejä minkä tahansa muodon tekstinsyötöllä.

Lataa tiedosto

Esimerkki

Aloita kirjoittaminen alla olevaan kenttään nähdäksesi etukirjoitustulokset.


Bootstrap-typeahead.js:n käyttö

Soita typeahead javascriptin kautta:

  1. $ ( '.typeahead' ). kirjoittamalla eteenpäin ()

Vaihtoehdot

Nimi tyyppi oletuksena kuvaus
lähde joukko [ ] Tietolähde, jota vastaan ​​haetaan.
kohteita määrä 8 Avattavassa valikossa näytettävien kohteiden enimmäismäärä.
sovittaja toiminto kirjainkoosta riippumaton Menetelmä, jolla määritetään, vastaako kysely kohdetta. Hyväksyy yhden argumentin, jota itemvastaan ​​kyselyä testataan. Siirry nykyiseen kyselyyn käyttämällä this.query. Palauttaa loogisen arvon true, jos kysely vastaa.
lajittelija toiminto tarkka vastaavuus,
kirjainkoolla on merkitystä,
kirjainkoolla ei merkitystä
Automaattisen täydennyksen tulosten lajittelussa käytetty menetelmä. Hyväksyy yhden argumentin itemsja sillä on typeahead-ilmentymän laajuus. Viittaa nykyiseen kyselyyn käyttämällä this.query.
korostuskynä toiminto korostaa kaikki oletusosumat Automaattisen täydennyksen tulosten korostamiseen käytetty menetelmä. Hyväksyy yhden argumentin itemja sillä on typeahead-ilmentymän laajuus. Pitäisi palauttaa html.

Merkintä

Lisää tietoattribuutteja rekisteröidäksesi elementin, jossa on etukirjoitustoiminto.

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

menetelmät

.typeahead(optiot)

Alustaa syötteen etumerkillä.