Modal-laajennuksemme on erittäin ohut perinteinen modaalinen js-laajennus, joka on erityisen huolellinen sisällyttämään vain ne paljaat toiminnot, joita tarvitsemme täällä Twitterissä.
ladata
- $ ( '#my-modal' ). modaali ( vaihtoehdot )
Nimi | tyyppi | oletuksena | kuvaus |
---|---|---|---|
taustalla | boolean | väärä | Sisältää modaalitaustaelementin |
näppäimistö | boolean | väärä | Sulkee modaalin, kun Esc-näppäintä painetaan |
näytä | boolean | väärä | Avaa modaalin luokan alustuksessa |
Voit aktivoida modaalit sivullasi helposti ilman, että sinun tarvitsee kirjoittaa yhtään JavaScript-riviä. Anna elementille data-controls-modal
attribuutti, joka vastaa modaalielementin tunnusta, ja kun sitä napsautetaan, se käynnistää modaalisi. Jos haluat lisätä modaalivaihtoehtoja, sisällytä ne myös tietomääritteiksi.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Käynnistä Modal </a>
Huomautus Jos haluat, että modaalisi animoituu sisään ja ulos, lisää vain .fade
luokka .modal
elementtiisi (katso esittely nähdäksesi tämän toiminnassa).
Aktivoi sisältösi modaalina. Hyväksyy valinnaiset vaihtoehdot object
.
- $ ( '#my-modal' ). modaalinen ({
- closeOnEscape : totta
- })
Vaihtaa modaalin manuaalisesti.
- $ ( '#my-modal' ). modaalinen ( 'toggle' )
Avaa modaalin manuaalisesti.
- $ ( '#my-modal' ). modaalinen ( 'show' )
Piilottaa modaalin manuaalisesti.
- $ ( '#my-modal' ). modaalinen ( 'piilota' )
Palauttaa elementtien modaaliluokan ilmentymän.
- $ ( '#my-modal' ). modaalinen ( tosi )
Huomautus Vaihtoehtoisesti voit hakea tämän komennolla $().data('modal')
.
Bootstrapin modaaliluokka paljastaa muutamia tapahtumia modaalitoimintoihin kytkeytymistä varten.
Tapahtuma | Kuvaus |
---|---|
näytä | Tämä tapahtuma käynnistyy välittömästi, kun show instanssimenetelmää 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 hide instanssimenetelmää on kutsuttu. |
piilotettu | Tämä tapahtuma käynnistyy, kun modaali on piilotettu käyttäjältä (odottaa css-siirtymien valmistumista). |
- $ ( '#my-modal' ). bind ( 'hidden' , function () {
- // tee jotain ...
- })
Tämä laajennus on tarkoitettu pudotusvalikon vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin tai välilehtien navigointiin.
ladata
- $ ( '#yläpalkki' ). pudotusvalikko ()
Voit lisätä nopeasti avattavan valikon toimintoja mihin tahansa nav-elementtiin käyttämällä data-dropdown
attribuuttia. Mikä tahansa kelvollinen bootstrap-pudotusvalikko aktivoituu automaattisesti.
- <ul class = "välilehdet" >
- <li class = "aktiivinen" ><a href = "#" > Etusivu </a></li>
- <li class = "dropdown" data-dropdown = "pudotusvalikko" >
- <a href = "#" class = "dropdown-toggle" > Avattava valikko </a>
- <ul class = "pudotusvalikko" >
- <li><a href = "#" > Toissijainen linkki </a></li>
- <li><a href = "#" > Jotain muuta tässä </a></li>
- <li class = "jakaja" ></li>
- <li><a href = "#" > Toinen linkki </a></li>
- </ul>
- </li>
- </ul>
Huomautus Jos käyttöliittymässäsi on useita avattavia valikoita, harkitse data-dropdown
attribuutin lisäämistä tärkeämpään säilöelementtiin, kuten .tabs
tai .topbar
.
Ohjelmoitu sovellusliittymä valikoiden aktivoimiseen tietylle yläpalkin tai välilehdillä varustetulle navigoinnille.
Tämä laajennus on tarkoitettu scrollspy (automaattinen päivitysnavigointi) -vuorovaikutuksen lisäämiseen bootstrapin yläpalkkiin.
ladata
- $ ( '#yläpalkki' ). pudotusvalikko ()
Voit helposti lisätä scrollspy-käyttäytymistä navigointiisi lisäämällä data-scrollspy
attribuutin .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Automaattinen aktivoi navigointipainikkeet käyttäjien vieritysasennon mukaan.
- $ ( 'body > .topbar' ). scrollSpy ()
Huomaa Topbar-ankkuritunnisteilla on oltava selvitettävät id-kohteet. Esimerkiksi, <a href="#home">home</a>
täytyy vastata jotain domissa, kuten <div id="home"></div>
.
Scrollspy-välimuistissa on navigointipainikkeet ja osiokoordinaatit suorituskykyä varten. Jos sinun on päivitettävä tämä välimuisti (todennäköisesti, jos sinulla on dynaamista sisältöä), kutsu tämä päivitysmenetelmä. Jos käytit data-attribuuttia scrollspyn määrittämiseen, kutsu vain runkoon refresh.
- $ ( 'body' ). scrollspy ( 'päivitä' )
Tutustu tämän sivun yläpalkin navigointiin.
Tämä laajennus lisää nopean, dynaamisen välilehden ja pilleritoiminnon.
ladata
- $ ( '.tabs' ). välilehdet ()
Voit aktivoida välilehden tai pillerinavigoinnin kirjoittamatta JavaScriptiä antamalla niille attribuutin data-tabs
tai data-pills
attribuutin.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
Aktivoi välilehti- ja pilleritoiminnot tietylle säiliölle. Välilehtilinkkien tulee viitata asiakirjan tunnuksiin.
- <ul class = "välilehdet" >
- <li class = "aktiivinen" ><a href = "#home" > Etusivu </a></li>
- <li><a href = "#profile" > Profiili </a></li>
- <li><a href = "#messages" > Viestit </a></li>
- <li><a href = "#settings" > Asetukset </a></li>
- </ul>
- <div class = "pillerin sisältö" >
- <div class = "active" id = "koti" > ... </div>
- <div id = "profiili" > ... </div>
- <div id = "viestit" > ... </div>
- <div id = "asetukset" > ... </div>
- </ul>
- <script>
- $ ( funktio () {
- $ ( '.tabs' ). välilehdet ()
- })
- </script>
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.
Banksy do proident, brooklyn photo booth delectus sunt artisan sed organic exercitation eiusmod four loko. Quis tattooed iphone esse aliqua. Master cleanse vero fixie mcsweeney's. Ethical portland aute, irony food truck pitchfork lomo eu anim. Aesthetic blog DIY, ethical beard leggings tofu consequat whatever cardigan nostrud. Helvetica you probably haven't heard of them carles, marfa veniam occaecat lomo before they sold out in shoreditch scenester sustainable thundercats. Consectetur tofu craft beer, mollit brunch fap echo park pitchfork mustache dolor.
Sunt qui biodiesel mollit officia, fanny pack put a bird on it thundercats seitan squid ad wolf bicycle rights blog. Et aute readymade farm-to-table carles 8-bit, nesciunt nulla etsy adipisicing organic ea. Master cleanse mollit high life, next level Austin nesciunt american apparel twee mustache adipisicing reprehenderit hoodie portland irony. Aliqua tofu quinoa +1 commodo eiusmod. High life williamsburg cupidatat twee homo leggings. Four loko vinyl DIY consectetur nisi, marfa retro keffiyeh vegan. Fanny pack viral retro consectetur gentrify fap.
Perustuu erinomaiseen jQuery.tipsy-laajennukseen, jonka on kirjoittanut Jason Frame; twipsy on päivitetty versio, joka ei ole riippuvainen kuvista, käyttää css3:a animaatioihin ja data-attribuutteja otsikon tallentamiseen!
ladata
- $ ( '#esimerkki' ). twipsy ( vaihtoehdot )
Nimi | tyyppi | oletuksena | kuvaus |
---|---|---|---|
animoida | boolean | totta | käytä css-häivytystä työkaluvihjeessä |
viive | määrä | 0 | viive ennen työkaluvihjeen näyttämistä (ms) |
viive Out | määrä | 0 | viive ennen työkaluvihjeen piilottamista (ms) |
perääntyä | merkkijono | '' | teksti, jota käytetään, kun työkaluvihjeen otsikkoa ei ole |
sijoitus | merkkijono | 'edellä' | työkaluvihjeen sijoittaminen - yläpuolelle | alla | vasemmalle | oikein |
html | boolean | väärä | sallii html-sisällön työkaluvihjeessä |
elää | boolean | väärä | käytä tapahtuman delegointia yksittäisten tapahtumakäsittelijöiden sijaan |
offset | määrä | 0 | työkaluvihjeen pikselipoikkeama kohdeelementistä |
otsikko | merkkijono | toiminto | 'titteli' | attribuutti tai menetelmä otsikkotekstin hakemiseen |
laukaista | merkkijono | 'hover' | miten työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen |
Kiinnittää twipsy-käsittelijän elementtikokoelmaan.
Paljastaa elementtejä twipsy.
- $ ( '#elementti' ). twipsy ( 'show' )
Piilottaa elementtejä twipsy.
- $ ( '#elementti' ). twipsy ( 'piilota' )
Palauttaa elementtien twipsy-luokan ilmentymän.
- $ ( '#elementti' ). twipsy ( tosi )
Huomautus Vaihtoehtoisesti voit hakea tämän komennolla $().data('twipsy')
.
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, olipa keytar mikä tahansa, maisema maalta pöytään pankkien Austin twitter-kahva freegan cred raaka denim yksialkuperäinen kahviviral.
Popover-laajennus tarjoaa yksinkertaisen käyttöliittymän ponnahdusikkunoiden lisäämiseen sovellukseesi. Se laajentaa boostrap-twipsy.js- laajennusta, joten muista napata myös tämä tiedosto, kun sisällytät ponnahdusikkunat projektiisi!
ladata
- $ ( '#esimerkki' ). ponnahdusikkuna ( vaihtoehdot )
Nimi | tyyppi | oletuksena | kuvaus |
---|---|---|---|
animoida | boolean | totta | käytä css-häivytystä työkaluvihjeessä |
viive | määrä | 0 | viive ennen työkaluvihjeen näyttämistä (ms) |
viive Out | määrä | 0 | viive ennen työkaluvihjeen piilottamista (ms) |
perääntyä | merkkijono | '' | teksti, jota käytetään, kun työkaluvihjeen otsikkoa ei ole |
sijoitus | merkkijono | 'oikein' | työkaluvihjeen sijoittaminen - yläpuolelle | alla | vasemmalle | oikein |
html | boolean | väärä | sallii html-sisällön työkaluvihjeessä |
elää | boolean | väärä | käytä tapahtuman delegointia yksittäisten tapahtumakäsittelijöiden sijaan |
offset | määrä | 0 | työkaluvihjeen pikselipoikkeama kohdeelementistä |
otsikko | merkkijono | toiminto | 'titteli' | attribuutti tai menetelmä otsikkotekstin hakemiseen |
sisältö | merkkijono | toiminto | 'data-sisältö' | attribuutti tai menetelmä sisältötekstin hakemiseen |
laukaista | merkkijono | 'hover' | miten työkaluvihje käynnistetään - vie hiiri | keskittyä | manuaalinen |
Alustaa elementtikokoelman ponnahdusikkunat.
Paljastaa elementtien popoverin.
- $ ( '#elementti' ). popover ( 'show' )
Piilottaa elementtien ponnahdusikkunan.
- $ ( '#elementti' ). popover ( 'piilota' )
Alert-laajennus on erittäin pieni luokka, joka lisää läheisiä toimintoja hälytyksiin.
ladata
- $ ( ".alert-message" ). hälytys ()
Lisää vain data-alert
attribuutti hälytysviesteihisi, jotta ne toimivat automaattisesti.
Kääri kaikki hälytykset läheisiin toimintoihin. Jos haluat, että hälytykset näkyvät suljettuina, varmista, että niihin on jo sovellettu - .fade
ja -luokka..in
Sulkee hälytyksen.
- $ ( ".alert-message" ). hälytys ( 'sulje' )