Meie Modal-plugin on üliõhuke traditsioonilise modaalse js-i pistikprogrammi jaoks, pöörates erilist tähelepanu sellele, et see hõlmaks ainult neid palja funktsioone, mida siin Twitteris vajame.
Lae alla
- $ ( '#minu-modal' ). modaalne ( valikud )
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
taustaks | tõeväärtus, string | vale | Sisaldab modaalset taustaelementi. "static" Kui te ei soovi, et modaal taustal klõpsamisel suletaks, määrake taust . |
klaviatuur | tõeväärtus | vale | Sulgeb modaali, kui vajutada paoklahvi |
näidata | tõeväärtus | vale | Avab klassi initsialiseerimisel modaali |
Saate modaale oma lehel hõlpsalt aktiveerida, ilma et peaksite kirjutama ühtegi JavaScripti rida. Lihtsalt andke elemendile data-controls-modal
atribuut, mis vastab modaalsele elemendi ID-le ja klõpsamisel käivitatakse teie modaal. Modaalsete valikute lisamiseks lisage need ka andmeatribuutidena.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Käivita Modal </a>
Märkus . Kui soovite, et teie modaal animeeriks sisse ja välja, lisage lihtsalt .fade
oma .modal
elemendile klass (selle toimimise nägemiseks vaadake demo).
Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object
.
- $ ( '#minu-modal' ). modaalne ({
- klaviatuur : tõsi
- })
Lülitab modaali käsitsi ümber.
- $ ( '#minu-modal' ). modaalne ( 'lülitus' )
Avab modaali käsitsi.
- $ ( '#minu-modal' ). modaalne ( 'show' )
Peidab modaali käsitsi.
- $ ( '#minu-modal' ). modaalne ( 'peida' )
Tagastab elementide modaalklassi eksemplari.
- $ ( '#minu-modal' ). modaalne ( tõene )
Märkus . Teise võimalusena saab selle alla laadida $().data('modal')
.
Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.
Sündmus | Kirjeldus |
---|---|
näidata | See sündmus käivitub kohe, kui show eksemplari meetod kutsutakse. |
näidatud | See sündmus käivitatakse, kui modaal on kasutajale nähtavaks tehtud (ootab css-i üleminekut). |
peita | See sündmus käivitatakse kohe, kui hide eksemplari meetod on välja kutsutud. |
peidetud | See sündmus käivitatakse, kui modaal on kasutaja eest peitmise lõpetanud (ootab, kuni css-i üleminekud lõppevad). |
- $ ( '#minu-modal' ). bind ( 'peidetud' , funktsioon () {
- // tee midagi ...
- })
See pistikprogramm on mõeldud ripploendi interaktsiooni lisamiseks alglaadimisribale või vahekaartidega navigeerimisvõimalustele.
Lae alla
- $ ( '#topbar' ). rippmenüü ()
Mis tahes navigeerimiselemendile rippmenüü funktsioonide kiireks lisamiseks kasutage data-dropdown
atribuuti. Kõik kehtivad alglaadimismenüüd aktiveeritakse automaatselt.
- <ul class = "tabs" >
- <li class = "aktiivne" ><a href = "#" > Avaleht </a></li>
- <li class = "dropdown" data-dropdown = "rippmenüü" >
- <a href = "#" class = "dropdown-toggle" > Rippmenüü </a>
- <ul class = "rippmenüü" >
- <li><a href = "#" > Teisene link </a></li>
- <li><a href = "#" > Midagi muud siin </a></li>
- <li klass = "jagaja" ></li>
- <li><a href = "#" > Veel üks link </a></li>
- </ul>
- </li>
- </ul>
Märkus . Kui teie kasutajaliideses on mitu rippmenüüd, kaaluge data-dropdown
atribuudi lisamist mõnele olulisemale konteinerielemendile, näiteks .tabs
või .topbar
.
Programmiline api antud ülariba või vahekaartidega navigeerimise menüüde aktiveerimiseks.
See pistikprogramm on mõeldud scrollspy (automaatse värskendamise navi) interaktsiooni lisamiseks alglaadimisribale.
Lae alla
- $ ( '#topbar' ). scrollSpy ()
Scrollspy käitumise hõlpsaks lisamiseks navigeerimisseadmele lisage lihtsalt data-scrollspy
atribuut .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Automaatne aktiveerib navigeerimisnupud kasutajate kerimisasendi järgi.
- $ ( 'keha > .topbar' ). scrollSpy ()
Märkus . Topbari ankrumärgenditel peavad olema lahendatavad ID-sihtmärgid. Näiteks <a href="#home">home</a>
peab vastama millelegi domeenis nagu <div id="home"></div>
.
Scrollspy vahemällu navigeerimisnupud ja sektsioonide koordinaadid jõudluse tagamiseks. Kui teil on vaja seda vahemälu värskendada (tõenäoliselt, kui teil on dünaamiline sisu), helistage lihtsalt sellele värskendusmeetodile. Kui kasutasite scrollspy määratlemiseks andmeatribuuti, helistage lihtsalt kehale refresh.
- $ ( 'keha' ). scrollSpy ( 'värskenda' )
Vaadake selle lehe ülemise riba navigeerimist.
See pistikprogramm lisab kiire, dünaamilise vahekaardi ja pillifunktsiooni.
Lae alla
- $ ( '.tabs' ). vahelehed ()
Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, andes neile lihtsalt atribuudi data-tabs
või data-pills
atribuudi.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
Aktiveerib vahekaardi ja pilli funktsiooni antud konteineri jaoks. Vahelehtede lingid peaksid viitama dokumendis olevatele ID-dele.
- <ul class = "tabs" >
- <li class = "aktiivne" ><a href = "#home" > Avaleht </a></li>
- <li><a href = "#profile" > Profiil </a></li>
- <li><a href = "#messages" > Sõnumid </a></li>
- <li><a href = "#settings" > Seaded </a></li>
- </ul>
- <div class = "pill-content" >
- <div class = "active" id = "kodu" > ... </div>
- <div id = "profiil" > ... </div>
- <div id = "sõnumid" > ... </div>
- <div id = "seaded" > ... </div>
- </div>
- <script>
- $ ( funktsioon () {
- $ ( '.tabs' ). vahelehed ()
- })
- </script>
Sündmus | Kirjeldus |
---|---|
muuta | See sündmus käivitub vahekaardi muutmisel. Kasutage event.target ja event.relatedTarget , et sihtida vastavalt aktiivset ja eelmist aktiivset vahekaarti. |
- $ ( '#.tabs' ). bind ( 'muuda' , funktsioon ( e ) {
- e . sihtmärk // aktiveeritud vahekaart
- e . relatedTarget // eelmine vahekaart
- })
Toores teksapüksid, Austin, te pole neist ilmselt kuulnud. Nesciunt tofu stumptown aliqua, retro süntekameistri puhastus. Vuntside kliše tempor, williamsburg carles vegan helvetica. Rerehenderit butcher retro keffiyeh Dreamcatcher sünt. Cosby kampsun eu banh mi, qui irure terry richardson ex squid. Aliquip placeat Salvia cillum iphone. Seitan aliquip quis kardigan Ameerika rõivad, lihunik 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.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.
Põhineb suurepärasel jQuery.tipsy pistikprogrammil, mille on kirjutanud Jason Frame; twipsy on uuendatud versioon, mis ei tugine piltidele, kasutab animatsioonide jaoks css3 ja pealkirjade salvestamiseks andmeatribuute!
Lae alla
- $ ( '#example' ). twipsy ( valikud )
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
animeerima | tõeväärtus | tõsi | rakendage tööriistaspikrile css-i tuhmumise üleminek |
viivitus | number | 0 | viivitus enne kohtspikri näitamist (ms) |
delayOut | number | 0 | viivitus enne kohtspikri peitmist (ms) |
tagavara | string | '' | tekst, mida kasutada, kui kohtspikri pealkirja pole |
paigutus | string | 'üleval' | kuidas asetada kohtspikker - ülal | allpool | vasakule | õige |
html | tõeväärtus | vale | lubab HTML-sisu kohtspikris |
elada | tõeväärtus | vale | kasutage sündmuste delegeerimist üksikute sündmuste töötlejate asemel |
nihe | number | 0 | kohtspikri nihe sihtelemendist pikslitega |
pealkiri | string, funktsioon | "tiitel" | atribuut või meetod pealkirja teksti toomiseks |
päästik | string | 'hõljuma' | kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal |
malli | string | [vaikemärgistus] | Twipsy renderdamiseks kasutatav html-mall. |
Märkus . Individuaalseid twipsy eksemplari valikuid saab alternatiivselt määrata andmeatribuutide abil.
- <a href = "#" data-placement = "below" rel = 'twipsy' title = 'Mõni pealkirja tekst' > tekst </a>
Kinnitab elemendikogu külge twipsy-käitleja.
Näitab elementide twipsy.
- $ ( '#element' ). twipsy ( 'show' )
Peidab elemente twipsy.
- $ ( '#element' ). twipsy ( 'peida' )
Tagastab elementide twipsy klassi eksemplari.
- $ ( '#element' ). twipsy ( tõsi )
Märkus . Teise võimalusena saab selle alla laadida $().data('twipsy')
.
Kitsad püksid järgmise taseme keffiyeh , te pole neist ilmselt kuulnud. Fotokabiini habe toores teksast kõrgtrüki vegan messenger bag stumptown. Farmist lauale seitan, Mcsweeney fixie säästva kinoa 8-bitine Ameerika rõivas on frotee richardsoni vinüül chambray. Beard stumptown, kardiganid banh mi lomo thundercats. Tofu biodiisel williamsburg marfa, neli loko mcsweeney puhast vegan chambray. Tõeliselt irooniline käsitööline, olenemata klaviatuurist, farmist lauale, Austini Twitteri käepidemega freegan cred toores teksariidest ühe päritoluga kohviviirus.
Popover-plugin pakub lihtsat liidest hüpikaknate lisamiseks teie rakendusele. See laiendab bootstrap-twipsy.js pluginat, seega haarake kindlasti kinni ka sellest failist, kui kaasate oma projekti hüpikaknaid!
Märkus . Enne bootstrap-popover.js -i peate lisama faili bootstrap-twipsy.js.
Lae alla
- $ ( '#example' ). popover ( valikud )
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
animeerima | tõeväärtus | tõsi | rakendage tööriistaspikrile css-i tuhmumise üleminek |
viivitus | number | 0 | viivitus enne kohtspikri näitamist (ms) |
delayOut | number | 0 | viivitus enne kohtspikri peitmist (ms) |
tagavara | string | '' | tekst, mida kasutada, kui kohtspikri pealkirja pole |
paigutus | string | 'õige' | kuidas asetada kohtspikker - ülal | allpool | vasakule | õige |
html | tõeväärtus | vale | lubab HTML-sisu kohtspikris |
elada | tõeväärtus | vale | kasutage sündmuste delegeerimist üksikute sündmuste töötlejate asemel |
nihe | number | 0 | kohtspikri nihe sihtelemendist pikslitega |
pealkiri | string, funktsioon | "tiitel" | atribuut või meetod pealkirja teksti toomiseks |
sisu | string, funktsioon | 'andmesisu' | string või meetod sisuteksti toomiseks. kui neid pole, hangitakse sisu andme-sisu atribuudist. |
päästik | string | 'hõljuma' | kuidas tööriistavihje käivitatakse – hõljutage | keskenduda | manuaal |
malli | string | [vaikemärgistus] | Hüpikakna renderdamiseks kasutatav html-mall. |
Märkus . Individuaalseid hüpikjuhtumisuvandeid saab alternatiivselt määrata andmeatribuutide abil.
- <a data-placement = "below" href = "#" class = "btn oht" rel = "popover" > tekst </a>
Initsialiseerib hüpikaknad elemendikogu jaoks.
Ilmutab elementide hüpikakna.
- $ ( '#element' ). popover ( 'show' )
Peidab elementide hüpikakna.
- $ ( '#element' ). popover ( 'peida' )
Hoiatuste pistikprogramm on väga väike klass hoiatustele tiheda funktsionaalsuse lisamiseks.
Lae alla
- $ ( ".alert-message" ). hoiatus ()
Lihtsalt lisage data-alert
oma hoiatussõnumitele atribuut, et anda neile automaatselt sulgemisfunktsioonid.
Nimi | tüüp | vaikimisi | kirjeldus |
---|---|---|---|
valija | string | '.Sulge' | Millist valijat hoiatuse sulgemiseks sihtida. |
Pakub kõik hoiatused tiheda funktsionaalsusega. Kui soovite, et teie hoiatused suletuks muutuksid, veenduge, et neile oleks juba rakendatud klass .fade
ja ..in
Sulgeb hoiatuse.
- $ ( ".alert-message" ). hoiatus ( 'sulge' )