Mae ein ategyn Modal yn olwg hynod denau ar yr ategyn js moddol traddodiadol, gan gymryd gofal arbennig i gynnwys dim ond y swyddogaethau noeth sydd eu hangen arnom yma yn twitter.
Lawrlwythwch
- $ ( '#fy-modal' ). moddol ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
cefndir | boolean, llinyn | ffug | Yn cynnwys elfen foddol-cefndir. Gosodwch gefndir iddo "static" os nad ydych am i'r modd cau pan fydd y cefndir yn cael ei glicio. |
bysellfwrdd | boolaidd | ffug | Yn cau'r modd pan fydd allwedd dianc yn cael ei wasgu |
dangos | boolaidd | ffug | Yn agor moddol ar gychwyn dosbarth |
Gallwch chi actifadu moddau ar eich tudalen yn hawdd heb orfod ysgrifennu un llinell o javascript. Rhowch data-controls-modal
nodwedd sy'n cyfateb i elfen foddol id, a phan fyddwch chi'n clicio, bydd yn lansio'ch modd. I ychwanegu opsiynau moddol, dylech eu cynnwys fel priodoleddau data hefyd.
- <a class="btn" data-controls-modal = " my-modal " data-backdrop = " statig " > Modd Lansio </a>
Hysbysiad Os ydych chi am i'ch modd animeiddio i mewn ac allan, ychwanegwch .fade
ddosbarth at eich .modal
elfen (cyfeiriwch at y demo i weld hwn ar waith).
Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object
.
- $ ( '#fy-modal' ). moddol ({
- bysellfwrdd : gwir
- })
Toglo moddol â llaw.
- $ ( '#fy-modal' ). moddol ( ' toglo ' )
Yn agor moddol â llaw.
- $ ( '#fy-modal' ). moddol ( 'dangos' )
Yn cuddio moddol â llaw.
- $ ( '#fy-modal' ). moddol ( 'cuddio' )
Yn dychwelyd enghraifft dosbarth moddol elfennau.
- $ ( '#fy-modal' ). moddol ( gwir )
Hysbysiad Fel arall, gellir ei adalw gyda $().data('modal')
.
Mae dosbarth moddol Bootstrap yn datgelu rhai digwyddiadau ar gyfer cysylltu â swyddogaethau moddol.
Digwyddiad | Disgrifiad |
---|---|
dangos | Mae'r digwyddiad hwn yn tanio ar unwaith pan show elwir y dull enghraifft. |
dangosir | Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi'i wneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau). |
cuddio | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull enghraifft wedi'i alw. |
cudd | Mae'r digwyddiad hwn yn cael ei danio pan fydd y moddol wedi gorffen cael ei guddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau). |
- $ ( '#fy-modal' ). rhwymo ( 'cudd' , swyddogaeth () {
- // gwneud rhywbeth...
- })
Mae'r ategyn hwn ar gyfer ychwanegu rhyngweithio cwymplen i'r bar uchaf bootstrap neu'r llywio â thabiau.
Lawrlwythwch
- $ ( ' # bar uchaf ' ). cwymplen ()
I ychwanegu ymarferoldeb cwymplen yn gyflym at unrhyw elfen nav, defnyddiwch y data-dropdown
priodoledd. Bydd unrhyw gwymplen bootstrap dilys yn cael ei actifadu'n awtomatig.
- <ul class = "tabiau" >
- < li class = " active " <a href = " # " > Cartref </a></li>
- <li class = "dropdown" data-dropdown = "dropdown" >
- <a href="#" class="dropdown-toggle"> Dropdown </a> _ _ _ _ _
- <ul class = "dropdown-menu" >
- <li><a href="#"> Dolen eilaidd </a> < /li>
- <li><a href="#"> Rhywbeth arall yma </a> </li>
- <li class = "divider" ></li>
- <li><a href="#"> Dolen arall </a> < /li>
- </ul>
- </li>
- </ul>
Hysbysiad Os oes gan eich ui sawl cwymplen, ystyriwch ychwanegu'r data-dropdown
priodoledd at elfen cynhwysydd mwy arwyddocaol fel .tabs
neu .topbar
.
Ap rhaglennol ar gyfer actifadu dewislenni ar gyfer bar uchaf neu lywio tabiau penodol.
Mae'r ategyn hwn ar gyfer ychwanegu'r rhyngweithio scrollspy (auto Update nav) i'r bar uchaf bootstrap.
Lawrlwythwch
- $ ( ' # bar uchaf ' ). sgrolioSpy ()
Er mwyn ychwanegu ymddygiad sgrôlsbïo yn hawdd i'ch llywio, ychwanegwch y data-scrollspy
priodoledd i'r ffeil .topbar
.
- <div class = "topbar" data-scrollspy = "scrollspy" > ... </div>
Mae awto yn actifadu botymau llywio yn ôl safle sgrolio defnyddwyr.
- $ ( 'corff > .topbar' ). sgrolioSpy ()
Sylwch Mae'n rhaid i dagiau angori Topbar fod â thargedau adnabod y gellir eu datrys. Er enghraifft, <a href="#home">home</a>
rhaid cyfateb i rywbeth yn y cartref fel <div id="home"></div>
.
Mae botymau llywio'r caches scrollspy a'r cyfesurynnau adran ar gyfer perfformiad. Os oes angen i chi ddiweddaru'r storfa hon (yn ôl pob tebyg os oes gennych chi gynnwys deinamig) ffoniwch y dull adnewyddu hwn. Os gwnaethoch ddefnyddio'r priodoledd data i ddiffinio'ch sgrolsbïwr, ffoniwch adnewyddu'r corff.
- $ ( 'corff' ). scrollSpy ( 'adnewyddu' )
Edrychwch ar y llywio y bar uchaf ar y dudalen hon.
Mae'r ategyn hwn yn ychwanegu ymarferoldeb tab a phils cyflym, deinamig.
Lawrlwythwch
- $ ( ' .tabs ' ). tabiau ()
Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw javascript trwy roi nodwedd data-tabs
neu data-pills
briodwedd iddynt.
- <ul class = "tabs" data-tabs = "tabs" > ... </ul>
Yn actifadu ymarferoldeb tab a phil ar gyfer cynhwysydd penodol. Dylai dolenni tab gyfeirio at yr IDs yn y ddogfen.
- <ul class = "tabiau" >
- <li class = "active" <a href = " #home" > Cartref </a></li>
- <li><a href = "#profile"> Proffil </a> </li>
- <li><a href = "#messages"> Negeseuon </a> </li>
- <li><a href="#settings"> Gosodiadau </a> < / li>
- </ul>
- <div class = "pill-content" >
- <div class = "active" id = "home" > ... </div>
- <div id = "profile" > ... </div>
- <div id = "messages" > ... </div>
- <div id = "gosodiadau" > ... </div>
- </div>
- <script>
- $ ( swyddogaeth ( ) {
- $ ( ' .tabs ' ). tabiau ()
- })
- </script>
Digwyddiad | Disgrifiad |
---|---|
newid | Mae'r digwyddiad hwn yn tanio ar newid tab. Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol a'r tab gweithredol blaenorol yn y drefn honno. |
- $ ( '#.tabs' ). rhwymo ( 'newid' , ffwythiant ( e ) {
- e . targed // tab actifadu
- e . relatedTarget // tab blaenorol
- })
Denim amrwd mae'n debyg nad ydych wedi clywed amdanynt jean siorts Austin. Nesciunt tofu stumptown aliqua, retro synth meistr glanhau. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit cigydd retro keffiyeh synth dreamcatcher. Siwmper Cosby eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, cigydd 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.
Yn seiliedig ar yr ategyn jQuery.tipsy ardderchog a ysgrifennwyd gan Jason Frame; Mae twipsy yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio css3 ar gyfer animeiddiadau, a nodweddion data ar gyfer storio teitl!
Lawrlwythwch
- $ ( '#enghraifft' ). twipsy ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
animeiddio | boolaidd | gwir | cymhwyso trawsnewidiad pylu css i'r cyngor |
oediIn | rhif | 0 | oedi cyn dangos cyngor (ms) |
oedi Allan | rhif | 0 | oedi cyn cuddio cyngor (ms) |
wrth gefn | llinyn | '' | testun i'w ddefnyddio pan nad oes teitl cyngor yn bresennol |
lleoliad | llinyn | 'uwchben' | sut i leoli'r cyngor - uchod | isod | chwith | iawn |
html | boolaidd | ffug | yn caniatáu cynnwys html o fewn y cyngor |
byw | boolaidd | ffug | defnyddio dirprwyo digwyddiad yn lle trinwyr digwyddiadau unigol |
gwrthbwyso | rhif | 0 | gwrthbwyso picsel o gyngor offer o'r elfen darged |
teitl | llinyn, swyddogaeth | 'teitl' | priodoledd neu ddull ar gyfer adalw testun teitl |
sbardun | llinyn | 'hofran' | sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw |
templed | llinyn | [marcio diofyn] | Y templed html a ddefnyddir ar gyfer gwneud twipsi. |
Sylwch Fel arall, gellir pennu opsiynau enghraifft twipsi unigol trwy ddefnyddio priodoleddau data.
- <a href = " # " data-placement = " below " rel = ' twipsy ' title = ' Rhai testun teitl ' > testun </a>
Yn cysylltu triniwr twipsi wrth gasgliad elfennau.
Yn datgelu twipsy elfennau.
- $ ( '# elfen' ). twipsy ( 'dangos' )
Yn cuddio twipsy elfennau.
- $ ( '# elfen' ). twipsy ( 'cuddio' )
Yn dychwelyd enghraifft dosbarth twipsy elfennau.
- $ ( '# elfen' ). twipsy ( gwir )
Hysbysiad Fel arall, gellir ei adalw gyda $().data('twipsy')
.
Pants dynn lefel nesaf keffiyeh mae'n debyg nad ydych wedi clywed amdanynt. Photo bwth barf llythrenwasg denim amrwd bag negeseuwr fegan stumptown. Mae gan seitan fferm-i-bwrdd, dillad quinoa cynaliadwy mcsweeney quinoa 8-bit Americanaidd siambr finyl terry richardson. Barf stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, pedwar loko mcsweeney's cleanse vegan chambray. Mae crefftwr eironig iawn beth bynnag keytar, scenester fferm-i-bwrdd banksy Austin twitter trin freegan cred amrwd denim un-tarddiad feirol coffi.
Mae'r ategyn popover yn darparu rhyngwyneb syml ar gyfer ychwanegu popovers at eich cais. Mae'n ymestyn yr ategyn bootstrap-twipsy.js , felly gwnewch yn siŵr eich bod chi'n cydio yn y ffeil honno hefyd wrth gynnwys popovers yn eich prosiect!
Hysbysiad Rhaid i chi gynnwys y ffeil bootstrap-twipsy.js cyn bootstrap-popover.js.
Lawrlwythwch
- $ ( '#enghraifft' ). popover ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
animeiddio | boolaidd | gwir | cymhwyso trawsnewidiad pylu css i'r cyngor |
oediIn | rhif | 0 | oedi cyn dangos cyngor (ms) |
oedi Allan | rhif | 0 | oedi cyn cuddio cyngor (ms) |
wrth gefn | llinyn | '' | testun i'w ddefnyddio pan nad oes teitl cyngor yn bresennol |
lleoliad | llinyn | 'iawn' | sut i leoli'r cyngor - uchod | isod | chwith | iawn |
html | boolaidd | ffug | yn caniatáu cynnwys html o fewn y cyngor |
byw | boolaidd | ffug | defnyddio dirprwyo digwyddiad yn lle trinwyr digwyddiadau unigol |
gwrthbwyso | rhif | 0 | gwrthbwyso picsel o gyngor offer o'r elfen darged |
teitl | llinyn, swyddogaeth | 'teitl' | priodoledd neu ddull ar gyfer adalw testun teitl |
cynnwys | llinyn, swyddogaeth | 'cynnwys data' | llinyn neu ddull ar gyfer adalw testun cynnwys. os na ddarperir unrhyw un, bydd cynnwys yn dod o briodwedd cynnwys data. |
sbardun | llinyn | 'hofran' | sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw |
templed | llinyn | [marcio diofyn] | Y templed html a ddefnyddir ar gyfer rendro popover. |
Sylwch Fel arall, gellir pennu opsiynau ar gyfer achosion popover unigol trwy ddefnyddio priodoleddau data.
- <a data-placement = " below " href = " # " class = " perygl btn " rel = " popover " > testun </a>
Yn cychwyn popovers ar gyfer casgliad elfennau.
Yn datgelu popover elfennau.
- $ ( '# elfen' ). popover ( 'dangos' )
Yn cuddio popover elfennau.
- $ ( '# elfen' ). popover ( 'cuddio' )
Mae'r ategyn rhybuddio yn ddosbarth hynod fach ar gyfer ychwanegu ymarferoldeb agos at rybuddion.
Lawrlwythwch
- $ ( ".alert-message" ). rhybudd ()
Ychwanegwch data-alert
briodwedd at eich negeseuon effro i roi ymarferoldeb agos iddynt yn awtomatig.
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
detholwr | llinyn | '.agos' | Pa ddewiswr i'w dargedu ar gyfer cau rhybudd. |
Yn lapio pob rhybudd ag ymarferoldeb agos. Er mwyn i'ch rhybuddion gael eu hanimeiddio pan fyddant ar gau, gwnewch yn siŵr bod y dosbarth .fade
a'r .in
dosbarth eisoes wedi'i gymhwyso iddynt.
Yn cau rhybudd.
- $ ( ".alert-message" ). rhybudd ( 'agos' )