Mūsų „Modal“ įskiepis yra itin plonas tradicinio „Modal js“ įskiepio variantas, ypač stengiantis įtraukti tik tas funkcijas, kurių mums reikia „Twitter“.
parsisiųsti
- $ ( '#mano modalas' ). modalinis ( parinktys )
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
fonas | loginis, eilutė | klaidinga | Apima modalinio fono elementą. Nustatykite foną, "static" jei nenorite, kad modalas būtų uždarytas spustelėjus foną. |
klaviatūra | loginis | klaidinga | Uždaromas modalas, kai paspaudžiamas pabėgimo klavišas |
Rodyti | loginis | klaidinga | Klasės inicijavimo metu atidaromas modalas |
Galite lengvai suaktyvinti modalus savo puslapyje, neparašydami nė vienos JavaScript eilutės. Tiesiog suteikite elementui data-controls-modal
atributą, atitinkantį modalinio elemento ID, ir spustelėjus jis paleis jūsų modalą. Norėdami pridėti modalinių parinkčių, tiesiog įtraukite jas kaip duomenų atributus.
- <a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Paleisti Modal </a>
Pastaba Jei norite, kad jūsų modalas būtų animuotas, tiesiog pridėkite .fade
klasę prie .modal
elemento (žr. demonstracinę versiją, kad pamatytumėte, kaip tai veikia).
Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object
.
- $ ( '#mano modalas' ). modalinis ({
- klaviatūra : tiesa
- })
Rankiniu būdu perjungia modalą.
- $ ( '#mano modalas' ). modalinis ( 'perjungti' )
Modalą atidaro rankiniu būdu.
- $ ( '#mano modalas' ). modalinis ( „šou“ )
Rankiniu būdu paslepia modalą.
- $ ( '#mano modalas' ). modalinis ( „paslėpti“ )
Grąžina elementų modalinės klasės egzempliorių.
- $ ( '#mano modalas' ). modalinis ( tiesa )
Pastaba Arba tai galima gauti naudojant $().data('modal')
.
„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.
Renginys | apibūdinimas |
---|---|
Rodyti | Šis įvykis suaktyvinamas iš karto, kai show iškviečiamas egzemplioriaus metodas. |
parodyta | Šis įvykis suaktyvinamas, kai modalas tampa matomas vartotojui (lauks, kol bus baigti css perėjimai). |
paslėpti | Šis įvykis suaktyvinamas iš karto, kai hide iškviečiamas egzemplioriaus metodas. |
paslėptas | Šis įvykis suaktyvinamas, kai modalas baigiamas paslėpti nuo vartotojo (lauks, kol bus baigti css perėjimai). |
- $ ( '#mano modalas' ). bind ( 'slėptas' , function () {
- // daryk ką nors...
- })
Šis įskiepis skirtas išskleidžiamojo meniu sąveikai pridėti prie įkrovos viršutinės juostos arba skirtukų naršymo.
parsisiųsti
- $ ( '#topbar' ). išskleidžiamasis meniu ()
Norėdami greitai pridėti išskleidžiamojo meniu funkciją prie bet kurio naršymo elemento, naudokite data-dropdown
atributą. Bet koks galiojantis įkrovos išskleidžiamasis meniu bus automatiškai suaktyvintas.
- <ul class = "skirtukai" >
- <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>
- <li class = "dropdown" data-dropdown = "išskleidžiamasis sąrašas" >
- <a href = "#" class = "dropdown-toggle" > Išskleidžiamasis meniu </a>
- <ul class = "išskleidžiamasis meniu" >
- <li><a href = "#" > Antrinė nuoroda </a></li>
- <li><a href = "#" > Čia dar kažkas </a></li>
- <li class = "daliklis" ></li>
- <li><a href = "#" > Kita nuoroda </a></li>
- </ul>
- </li>
- </ul>
Pastaba Jei jūsų vartotojo sąsajoje yra keli išskleidžiamieji meniu, apsvarstykite galimybę pridėti data-dropdown
atributą prie svarbesnio sudėtinio rodinio elemento, pvz ., .tabs
arba .topbar
.
Programinė API, skirta suaktyvinti tam tikros viršutinės juostos arba naršymo skirtukais meniu.
Šis papildinys skirtas pridėti scrollspy (automatinio atnaujinimo navigacijos) sąveiką įkrovos viršutinėje juostoje.
parsisiųsti
- $ ( '#topbar' ). scrollSpy ()
Norėdami lengvai prie savo navigacijos pridėti scrollspy elgseną, tiesiog pridėkite data-scrollspy
atributą prie .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Automatiškai suaktyvina naršymo mygtukus pagal naudotojo slinkimo padėtį.
- $ ( 'body > .topbar' ). scrollSpy ()
Atkreipkite dėmesį , kad „Topbar“ inkaro žymos turi turėti išsprendžiamus ID tikslus. Pavyzdžiui, <a href="#home">home</a>
turi atitikti kažką dom, pavyzdžiui, <div id="home"></div>
.
Scrollspy talpyklos naršymo mygtukai ir sekcijų koordinatės našumui užtikrinti. Jei jums reikia atnaujinti šią talpyklą (tikėtina, jei turite dinaminio turinio), tiesiog iškvieskite šį atnaujinimo metodą. Jei naudojote duomenų atributą savo scrollspy apibrėžti, tiesiog iškvieskite atnaujinimą.
- $ ( „kūnas“ ). scrollSpy ( 'atnaujinti' )
Patikrinkite viršutinės juostos naršymą šiame puslapyje.
Šis papildinys prideda greitą, dinamišką skirtuką ir tablečių funkciją.
parsisiųsti
- $ ( '.tabs' ). skirtukai ()
Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio javascript, tiesiog suteikdami jiems atributą data-tabs
arba data-pills
atributą.
- <ul class = "skirtukai" data-tabs = "skirtukai" > ... </ul>
Suaktyvina tam tikro konteinerio skirtuko ir piliulės funkciją. Skirtukų nuorodos turi nurodyti ID dokumente.
- <ul class = "skirtukai" >
- <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>
- <li><a href = "#profile" > Profilis </a></li>
- <li><a href = "#messages" > Žinutės </a></li>
- <li><a href = "#settings" > Nustatymai </a></li>
- </ul>
- <div class = "tabletės turinys" >
- <div class = "aktyvus" id = "namai" > ... </div>
- <div id = "profilis" > ... </div>
- <div id = "pranešimai" > ... </div>
- <div id = "nustatymai" > ... </div>
- </div>
- <script>
- $ ( funkcija () {
- $ ( '.tabs' ). skirtukai ()
- })
- </script>
Renginys | apibūdinimas |
---|---|
pakeisti | Šis įvykis suaktyvinamas pakeitus skirtuką. Naudokite event.target ir event.relatedTarget , kad nukreiptumėte atitinkamai į aktyvų ir ankstesnį aktyvų skirtuką. |
- $ ( '#.tabs' ). bind ( 'pakeisti' , funkcija ( e ) {
- e . taikinys // suaktyvintas skirtukas
- e . relatedTarget // ankstesnis skirtukas
- })
Neapdorotas džinsas, ko gero, apie juos negirdėjote džinsų šortai Austin. Nesciunt tofu stumptown aliqua, retro synth master valymo priemonė. Ūsų klišė tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh Dreamcatcher synth. Cosby megztinis eu banh mi, qui irure Terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis megztinis amerikietiškas drabužis, mėsininkas 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.
Remiantis puikiu jQuery.tipsy papildiniu, kurį parašė Jason Frame; twipsy yra atnaujinta versija, kuri nesiremia vaizdais, animacijai naudoja css3, o pavadinimo saugojimui naudoja duomenų atributus!
parsisiųsti
- $ ( '#pavyzdys' ). twipsy ( parinktys )
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
pagyvinti | loginis | tiesa | patarimui pritaikykite css fade perėjimą |
delsimas | numerį | 0 | delsa prieš parodant patarimą (ms) |
delayOut | numerį | 0 | delsa prieš slepiant patarimą (ms) |
atsitraukti | styga | '' | tekstas, naudojamas, kai nėra patarimo pavadinimo |
išdėstymas | styga | 'aukščiau' | kaip išdėstyti patarimą – aukščiau | žemiau | paliko | teisingai |
html | loginis | klaidinga | leidžia HTML turinį patarime |
gyventi | loginis | klaidinga | vietoj atskirų įvykių tvarkyklių naudokite įvykių delegavimą |
kompensuoti | numerį | 0 | patarimo pikselių poslinkis nuo tikslinio elemento |
titulą | eilutė, funkcija | "pavadinimas" | atributas arba metodas pavadinimo tekstui gauti |
paleidiklis | styga | 'svyruok' | kaip suaktyvinamas patarimas – užveskite pelės žymeklį | fokusuoti | vadovas |
šabloną | styga | [numatytasis žymėjimas] | HTML šablonas, naudojamas twipsy atvaizdavimui. |
Pastaba Atskiros twipsy egzemplioriaus parinktys gali būti nurodytos naudojant duomenų atributus.
- <a href = "#" data-placement = "below" rel = 'twipsy' title = "Kažkiek pavadinimo tekstas" > tekstas </a>
Prie elementų kolekcijos pritvirtina twipsy tvarkyklę.
Atskleidžia elementų twipsy.
- $ ( „#elementas“ ). tviska ( "šou" )
Slepia elementus twipsy.
- $ ( „#elementas“ ). twipsy ( 'slėpti' )
Pateikia elementų twipsy klasės egzempliorių.
- $ ( „#elementas“ ). tviska ( tiesa )
Pastaba Arba tai galima gauti naudojant $().data('twipsy')
.
Aptemptos kelnės kito lygio keffiyeh tikriausiai nesate apie jas girdėję. Nuotraukų kabina barzda, neapdorotas džinsas, veganiškas pasiuntinių krepšys stumptown. 8 bitų amerikietiški drabužiai nuo ūkio iki stalo, mcsweeney's fixie tvarūs quinoa , turi kilpinį richardson vinilo chambray. Beard stumptown, megztiniai banh mi lomo thundercats. Tofu biodyzelinas williamsburg marfa, keturių loko mcsweeney's cleanse vegan chambray. Tikrai ironiškas amatininkas, kad ir koks būtų klavišų rinkinys, scenester nuo ūkio iki stalo banksy Austin twitter rankena freegan cred neapdoroto džinsinio vienos kilmės kavos virusas.
Iššokančių langų papildinys suteikia paprastą sąsają, leidžiančią pridėti iššokančiųjų langų prie programos. Jis išplečia įskiepį bootstrap-twipsy.js , todėl būtinai paimkite ir tą failą, kai įtraukite iššokančius elementus į savo projektą!
Pastaba Prieš bootstrap-popover.js turite įtraukti failą bootstrap-twipsy.js.
parsisiųsti
- $ ( '#pavyzdys' ). popover ( parinktys )
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
pagyvinti | loginis | tiesa | patarimui pritaikykite css fade perėjimą |
delsimas | numerį | 0 | delsa prieš parodant patarimą (ms) |
delayOut | numerį | 0 | delsa prieš slepiant patarimą (ms) |
atsitraukti | styga | '' | tekstas, naudojamas, kai nėra patarimo pavadinimo |
išdėstymas | styga | 'teisingai' | kaip išdėstyti patarimą – aukščiau | žemiau | paliko | teisingai |
html | loginis | klaidinga | leidžia HTML turinį patarime |
gyventi | loginis | klaidinga | vietoj atskirų įvykių tvarkyklių naudokite įvykių delegavimą |
kompensuoti | numerį | 0 | patarimo pikselių poslinkis nuo tikslinio elemento |
titulą | eilutė, funkcija | "pavadinimas" | atributas arba metodas pavadinimo tekstui gauti |
turinys | eilutė, funkcija | 'duomenų turinys' | eilutė arba metodas turinio tekstui gauti. jei jų nepateikta, turinys bus gaunamas iš duomenų turinio atributo. |
paleidiklis | styga | 'svyruok' | kaip suaktyvinamas patarimas – užveskite pelės žymeklį | fokusuoti | vadovas |
šabloną | styga | [numatytasis žymėjimas] | HTML šablonas, naudojamas iškylančiai langui pateikti. |
Pastaba Atskirų iššokančių elementų parinktis taip pat galima nurodyti naudojant duomenų atributus.
- <a data-placement = "below" href = "#" class = "btn pavojus" rel = "popover" > tekstas </a>
Inicijuoja elementų rinkinio iššokančius langus.
Atskleidžia elementų iššokimą.
- $ ( „#elementas“ ). popover ( "show" )
Slepia elementų iššokimą.
- $ ( „#elementas“ ). popover ( „paslėpti“ )
Įspėjimų papildinys yra labai maža klasė, skirta perspėjimams papildyti artimą funkcionalumą.
parsisiųsti
- $ ( ".alert-message" ). įspėjimas ()
Tiesiog pridėkite data-alert
atributą prie įspėjimo pranešimų, kad automatiškai suteiktumėte jiems artimas funkcijas.
vardas | tipo | numatytas | apibūdinimas |
---|---|---|---|
parinkiklis | styga | '.Uždaryti' | Į kokį parinkiklį nukreipti įspėjimo uždarymą. |
Apima visus įspėjimus glaudžiais funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad jiems jau pritaikyta .fade
ir .in
klasė.
Uždaro įspėjimą.
- $ ( ".alert-message" ). įspėjimas ( 'uždaryti' )