Dewch â chydrannau Bootstrap yn fyw - nawr gyda 12 ategyn jQuery wedi'u teilwra .
Mae'n symlach, ond yn hyblyg, yn cymryd yr ategyn moddol javascript traddodiadol gyda dim ond yr ymarferoldeb gofynnol a'r rhagosodiadau craff.
Lawrlwytho ffeilIsod mae moddol wedi'i rendro'n statig.
Un corff da…
Toggle a modal trwy javascript trwy glicio ar y botwm isod. Bydd yn llithro i lawr ac yn pylu i mewn o frig y dudalen.
Lansio modd demoFfoniwch y moddol trwy javascript:
- $ ( '#myModal' ). moddol ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
cefndir | boolaidd | gwir | Yn cynnwys elfen foddol-cefndir. Fel arall, nodwch static ar gyfer cefndir nad yw'n cau'r modd wrth glicio. |
bysellfwrdd | boolaidd | gwir | Yn cau'r modd pan fydd allwedd dianc yn cael ei wasgu |
dangos | boolaidd | gwir | Yn dangos y moddol wrth gychwyn. |
Gallwch chi actifadu moddau ar eich tudalen yn hawdd heb orfod ysgrifennu un llinell o javascript. Gosodwch data-toggle="modal"
ar elfen rheolydd gyda data-target="#foo"
neu href="#foo"
sy'n cyfateb i elfen foddol id, a phan gaiff ei glicio, bydd yn lansio'ch modd.
Hefyd, i ychwanegu opsiynau at eich enghraifft moddol, dylech eu cynnwys fel priodoleddau data ychwanegol ar naill ai'r elfen reoli neu'r marcio moddol ei hun.
- <a class="btn" data-toggle="modal" href="#myModal"> Moddol Lansio </a> _ _ _ _ _ _
- <div class = "modal" id = "myModal" >
- <div class = "modal-header" >
- <a class="close" data-dismiss="modal"> × </a> _ _ _ _ _
- <h3> Pennawd moddol </h3>
- </div>
- <div class = "modal-corff" >
- <p> Un corff main… </p>
- </div>
- <div class = "modal-footer" >
- <a href="#" class="btn"> Cau </a> _ _ _ _ _
- <a href = " # " class = " btn btn-primary " > Cadw newidiadau </a>
- </div>
- </div>
.fade
ddosbarth i'r
.modal
elfen (cyfeiriwch at y demo i weld hwn ar waith) a chynnwys bootstrap-transition.js.
Yn actifadu'ch cynnwys fel moddol. Yn derbyn opsiwn dewisol object
.
- $ ( '#myModal' ). moddol ({
- bysellfwrdd : ffug
- })
Toglo moddol â llaw.
- $ ( '#myModal' ). moddol ( ' toglo ' )
Yn agor moddol â llaw.
- $ ( '#myModal' ). moddol ( 'dangos' )
Yn cuddio moddol â llaw.
- $ ( '#myModal' ). moddol ( 'cuddio' )
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). |
- $ ( '#myModal' ). ar ( 'cudd' , swyddogaeth () {
- // gwneud rhywbeth…
- })
Ychwanegu dewislenni i bron unrhyw beth yn Bootstrap gyda'r ategyn syml hwn. Mae Bootstrap yn cynnwys cefnogaeth ddewislen gwympo lawn yn y bar llywio, y tabiau a'r tabledi.
Lawrlwytho ffeilCliciwch ar y dolenni nav cwymplen yn y bar llywio a'r pils isod i brofi cwymplenni.
Ffoniwch y cwymplenni trwy javascript:
- $ ( '. dropdown-toggle' ). cwymplen ()
I ychwanegu ymarferoldeb cwymplen yn gyflym at unrhyw elfen, ychwanegwch data-toggle="dropdown"
a bydd unrhyw gwymplen bootstrap dilys yn cael ei actifadu'n awtomatig.
data-target="#fat"
neu
href="#fat"
.
- <ul class = "nav nav-pills" >
- < li class = " active " <a href = " # " > Dolen reolaidd </a></li>
- <li class = "dropdown" id = "menu1" >
- <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1"> _ _ _ _ _ _ _
- Gollwng i lawr
- <b class = "caret" ></b>
- </a>
- <ul class = "dropdown-menu" >
- <li><a href="#"> Gweithredu </a> < / li>
- <li><a href = " #"> Gweithred arall </a></li>
- <li><a href="#"> Rhywbeth arall yma </a> </li>
- <li class = "divider" ></li>
- <li><a href="#"> Dolen wedi gwahanu </a> </li>
- </ul>
- </li>
- ...
- </ul>
Ap rhaglennol ar gyfer actifadu dewislenni ar gyfer llywio bar llywio neu dabiau penodol.
Mae'r ategyn ScrollSpy ar gyfer diweddaru targedau llywio yn awtomatig yn seiliedig ar safle sgrolio.
Lawrlwytho ffeilSgroliwch yr ardal isod a gwyliwch y diweddariad llywio. Bydd yr is-eitemau cwymplen yn cael eu hamlygu hefyd. Rhowch gynnig arni!
Ad leggings keytar, brunch id art parti dolor laboure. Pitchfork yr enim lo-fi cyn iddynt werthu allan qui. Hawliau beic fferm-i-bwrdd Tumblr beth bynnag. Anim keffiyeh carles cardigan. Bwth lluniau Velit seitan mcsweeney 3 wolf moon irure. Siwmper Cosby lomo jean siorts, hwdi williamsburg minim qui mae'n debyg nad ydych chi wedi clywed amdanyn nhw et cardigan trust fund culpa biodiesel wes anderson esthetig. Nihil tattooed accusamus, cred eironi biodiesel keffiyeh artisan ullamco consequat.
Sgrialu mwstash Veniam marfa, adipisicing fugiat velit pitchfork barf. Freegan barf aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tryc bwyd siwmper Tattooed cosby, finyl quis non freegan mcsweeney. Lo-fi wes anderson +1 sartorial. Carles anesthetig ymarfer corff quis gentrify. Brooklyn adipisicing cwrw crefft vice keytar deserunt.
Occaecat comodo aliqua delectus. Map cwrw crefft deserunt sgrialu ea. Hawliau beic Lomo adipisicing banh mi, velit ea sunt lefel nesaf locavore un-darddiad coffi yn magna veniam. Uchel bywyd id finyl, adlais parc consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, cynaliadwy delectus consectetur fanny pack iphone.
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.
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 blog, bag neges culpa marfa beth bynnag delectus lori bwyd. Sapiente synth id assumenda. Locavore sed helvetica cliche eironi, cath daranau mae'n debyg nad ydych chi wedi clywed amdanyn nhw consequat hwdi di-glwten lo-fi fap aliquip. Labore elit placeat cyn iddynt werthu allan, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan crefft cwrw seitan velit readymade. VHS chambray laboris tempor veniam. Anim mollit minim comodo ullamco taranau.
Ffoniwch y scrollspy trwy javascript:
- $ ( '# navbar' ). sgrôlspy ()
Er mwyn ychwanegu ymddygiad ysbïo sgrolio at eich llywio bar uchaf yn hawdd, ychwanegwch data-spy="scroll"
at yr elfen rydych chi am sbïo arno (y corff fyddai hwn fel arfer).
- <body data-spy = "scroll" > ... </body>
<a href="#home">home</a>
rhaid cyfateb i rywbeth yn y cartref fel
<div id="home"></div>
.
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
gwrthbwyso | rhif | 10 | Picseli i'w gwrthbwyso o'r brig wrth gyfrifo safle'r sgrôl. |
Mae'r ategyn hwn yn ychwanegu ymarferoldeb tab a pilsen cyflym a deinamig ar gyfer trosglwyddo trwy gynnwys lleol.
Lawrlwytho ffeilCliciwch y tabiau isod i doglo rhwng cwareli cudd, hyd yn oed trwy gwymplenni.
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.
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 cyn iddynt werthu pob tocyn master cleanse squid scenester freegan cosby siwmper. Fanny pecyn portland seitan DIY, parti celf locavore blaidd cliche bywyd uchel parc adlais Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi cyn iddynt werthu allan fferm-i-bwrdd VHS firaol siwmper cosby locavore. Lomo blaidd firaol, mwstas readymade thundercats keffiyeh crefft cwrw marfa moesegol. Blaidd salvia freegan, sartorial keffiyeh echo park fegan.
Galluogi tabiau tabable trwy javascript:
- $ ( ' # myTab ' ). tab ( 'dangos' )
Gallwch chi actifadu llywio tab neu bilsen heb ysgrifennu unrhyw javascript trwy nodi data-toggle="tab"
neu data-toggle="pill"
ar elfen yn unig.
- <ul class = "nav nav-tabs" >
- <li><a href = "#home" data-toggle = " tab " > Cartref </a></li>
- <li><a href = "#profile" data-toggle = "tab"> Proffil </a></li >
- <li><a href = " #messages " data-toggle = " tab " > Negeseuon </a></li>
- <li><a href = "#settings" data-toggle = " tab " > Gosodiadau </a></li>
- </ul>
Yn actifadu elfen tab a chynhwysydd cynnwys. Dylai fod gan dab naill ai `targed data` neu `href` yn targedu nod cynhwysydd yn y dom.
- <ul class = "nav nav-tabs" >
- <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 = "tab-content" >
- <div class = "tab-pane active" id = "home" > ... </div>
- <div class = "tab-pane" id = "profile" > ... </div>
- <div class = "tab-pane" id = "messages" > ... </div>
- <div class = "tab-pane" id = "gosodiadau" > ... </div>
- </div>
- <script>
- $ ( swyddogaeth ( ) {
- $ ( '.tabs a:last' ). tab ( 'dangos' )
- })
- </script>
Digwyddiad | Disgrifiad |
---|---|
dangos | Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno. |
dangosir | Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.target ac event.relatedTarget i dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno. |
- $ ( ' a[data-toggle = "tab" ] ' ). ar ( 'dangos' , ffwythiant ( e ) {
- e . targed // tab actifadu
- e . relatedTarget // tab blaenorol
- })
Wedi'i ysbrydoli gan yr ategyn jQuery.tipsy rhagorol a ysgrifennwyd gan Jason Frame; Mae Tooltips yn fersiwn wedi'i diweddaru, nad yw'n dibynnu ar ddelweddau, yn defnyddio css3 ar gyfer animeiddiadau, a phriodoleddau data ar gyfer storio teitlau lleol.
Lawrlwytho ffeilHofran dros y dolenni isod i weld awgrymiadau offer:
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.
Sbardunwch y cyngor trwy javascript:
- $ ( '#enghraifft' ). cyngor offer ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | cymhwyso trawsnewidiad pylu css i'r cyngor |
lleoliad | llinyn | swyddogaeth | 'top' | sut i leoli'r cyngor - top | gwaelod | chwith | iawn |
detholwr | llinyn | ffug | Os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig. |
teitl | llinyn | swyddogaeth | '' | gwerth teitl rhagosodedig os nad yw'r tag `title` yn bresennol |
sbardun | llinyn | 'hofran' | sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw |
oedi | rhif | gwrthrych | 0 | oedi wrth ddangos a chuddio'r cyngor (ms) Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe Strwythur gwrthrych yw: |
Am resymau perfformiad, mae'r Tooltip a'r Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch opsiwn dewisydd.
- <a href = " # " rel = " tooltip " title = " cyngor cymorth cyntaf " > hofran drosof </a>
Yn cysylltu triniwr cyngor offer wrth gasgliad elfennau.
Yn datgelu cyngor offer elfen.
- $ ( '# elfen' ). cyngor offer ( 'dangos' )
Yn cuddio cyngor offer elfen.
- $ ( '# elfen' ). cyngor ( 'cuddio' )
Toglo cyngor offer elfen.
- $ ( '# elfen' ). cyngor ( ' togl ' )
Ychwanegu troshaenau bach o gynnwys, fel y rhai ar yr iPad, at unrhyw elfen ar gyfer lletya gwybodaeth eilaidd.
* Mae angen cynnwys Tooltip
Lawrlwytho ffeilHofran dros y botwm i sbarduno'r popover.
Galluogi popovers trwy javascript:
- $ ( '#enghraifft' ). popover ( opsiynau )
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
animeiddiad | boolaidd | gwir | cymhwyso trawsnewidiad pylu css i'r cyngor |
lleoliad | llinyn | swyddogaeth | 'iawn' | sut i leoli'r popover - top | gwaelod | chwith | iawn |
detholwr | llinyn | ffug | os darperir dewisydd, bydd gwrthrychau cyngor offer yn cael eu dirprwyo i'r targedau penodedig |
sbardun | llinyn | 'hofran' | sut mae tooltip yn cael ei sbarduno - hofran | ffocws | llaw |
teitl | llinyn | swyddogaeth | '' | gwerth teitl rhagosodedig os nad yw priodoledd `title` yn bresennol |
cynnwys | llinyn | swyddogaeth | '' | gwerth cynnwys rhagosodedig os nad yw priodoledd `data-content` yn bresennol |
oedi | rhif | gwrthrych | 0 | oedi cyn dangos a chuddio'r popover (ms) Os bydd rhif yn cael ei gyflenwi, bydd oedi yn cael ei gymhwyso i'r ddwy guddfan/sioe Strwythur gwrthrych yw: |
Am resymau perfformiad, mae'r Tooltip a Popover data-apis yn optio i mewn. Os hoffech eu defnyddio nodwch yr opsiwn dewisydd.
Yn cychwyn popovers ar gyfer casgliad elfennau.
Yn datgelu popover elfennau.
- $ ( '# elfen' ). popover ( 'dangos' )
Yn cuddio popover elfennau.
- $ ( '# elfen' ). popover ( 'cuddio' )
Toglo popover elfennau.
- $ ( '# elfen' ). popover ( 'toglo' )
Mae'r ategyn rhybuddio yn ddosbarth bach iawn ar gyfer ychwanegu ymarferoldeb agos at rybuddion.
LawrlwythwchMae'r ategyn rhybuddion yn gweithio ar negeseuon rhybuddio rheolaidd, a negeseuon bloc.
Newidiwch hwn a'r llall a cheisiwch eto. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras matis consectetur purus sit amet fermentum.
Galluogi diswyddo rhybudd trwy javascript:
- $ ( " .alert " ). rhybudd ()
Ychwanegwch data-dismiss="alert"
at eich botwm cau i roi swyddogaeth cau rhybudd yn awtomatig.
- <a class="close" data-dismiss="alert" href="#"> & times ; _ _ _ _ _ </a>
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 " ). rhybudd ( 'agos' )
Mae dosbarth rhybuddio Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaethau rhybuddio.
Digwyddiad | Disgrifiad |
---|---|
cau | Mae'r digwyddiad hwn yn tanio ar unwaith pan close elwir y dull enghraifft. |
gau | Mae'r digwyddiad hwn yn cael ei danio pan fydd y rhybudd wedi'i gau (bydd yn aros i'r trawsnewidiadau css gael eu cwblhau). |
- $ ( '#fy-rybudd' ). rhwymo ( ' ar gau ' , swyddogaeth ( ) {
- // gwneud rhywbeth…
- })
Sicrhewch arddulliau sylfaenol a chefnogaeth hyblyg ar gyfer cydrannau cwympadwy fel acordionau a llywio.
Lawrlwytho ffeilGan ddefnyddio'r ategyn cwympo, fe wnaethom adeiladu teclyn arddull acordion syml:
Galluogi trwy javascript:
- $ ( " .collapse " ). dymchwel ()
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
rhiant | detholwr | ffug | Os yw'n ddewiswr yna bydd yr holl elfennau cwympadwy o dan y rhiant penodedig yn cael eu cau pan ddangosir yr eitem cwympadwy hon. (yn debyg i ymddygiad acordion traddodiadol) |
togl | boolaidd | gwir | Toglo'r elfen cwympadwy ar alw |
Ychwanegu data-toggle="collapse"
ac data-target
elfen i neilltuo rheolaeth yn awtomatig ar elfen sy'n cwympo. Mae'r data-target
priodoledd yn derbyn dewisydd css i gymhwyso'r cwymp iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth collapse
at yr elfen gwympadwy. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol in
.
- <button class = "btn btn-danger" data-toggle = "cwymp" data-target = "#demo" >
- syml collapsible
- </button>
- <div id = "demo" class = "llewygu" > … </div>
data-parent="#selector"
. Cyfeiriwch at y demo i weld hyn ar waith.
Yn actifadu'ch cynnwys fel elfen y gellir ei dymchwel. Yn derbyn opsiwn dewisol object
.
- $ ( '#myCollapsible' ). dymchwel ({
- togl : ffug
- })
Toglo elfen sy'n cwympo i'w dangos neu ei chuddio.
Yn dangos elfen sy'n cwympo.
Yn cuddio elfen sy'n cwympo.
Mae dosbarth cwymp Bootstrap yn datgelu ychydig o ddigwyddiadau ar gyfer cysylltu â swyddogaeth cwympo.
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 elfen cwympo wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau css gwblhau). |
cuddio | Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hide dull wedi'i alw. |
cudd | Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen cwymp wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau css gwblhau). |
- $ ( '#myCollapsible' ). ar ( 'cudd' , swyddogaeth () {
- // gwneud rhywbeth…
- })
Gwyliwch y sioe sleidiau isod.
Ffoniwch trwy javascript:
- $ ( '.carousel' ). carwsél ()
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
cyfwng | rhif | 5000 | Faint o amser i oedi rhwng beicio eitem yn awtomatig. |
saib | llinyn | "hofran" | Yn oedi seiclo'r carwsél ar y llygoden ac yn ailddechrau seiclo'r carwsél ar ddail y llygoden. |
Defnyddir priodoleddau data ar gyfer y rheolaethau blaenorol a'r rheolaethau nesaf. Edrychwch ar y marcio enghreifftiol isod.
- <div id = "myCarousel" class = "carousel" >
- <!-- Eitemau Carwsél -->
- <div class = "carwsél-mewnol" >
- <div class = "eitem weithredol" > … </div>
- <div class = "item" > … </div>
- <div class = "item" > … </div>
- </div>
- <!-- Carousel nav -->
- <a class="carousel-control left" href = "#myCarousel" data-slide = "cynt" > & lsaquo ; </a>
- <a class="carousel-control right" href="#myCarousel" data-slide = "nesaf" > & rsaquo ; _ </a>
- </div>
Yn cychwyn y carwsél gydag opsiynau dewisol object
ac yn dechrau beicio trwy eitemau.
- $ ( '.carousel' ). carwsél ({
- egwyl : 2000
- })
Beicio drwy'r eitemau carwsél o'r chwith i'r dde.
Yn atal y carwsél rhag beicio trwy eitemau.
Yn beicio'r carwsél i ffrâm benodol (0 seiliedig, tebyg i arae).
Cylchoedd i'r eitem flaenorol.
Beiciau i'r eitem nesaf.
Mae dosbarth carwsél Bootstrap yn datgelu dau ddigwyddiad ar gyfer cysylltu â swyddogaethau carwsél.
Digwyddiad | Disgrifiad |
---|---|
llithren | Mae'r digwyddiad hwn yn tanio ar unwaith pan fydd y slide dull enghraifft yn cael ei ddefnyddio. |
llithro | Mae'r digwyddiad hwn yn cael ei danio pan fydd y carwsél wedi cwblhau ei drawsnewidiad sleidiau. |
Ategyn sylfaenol, hawdd ei ymestyn ar gyfer creu blaen-deip cain yn gyflym gydag unrhyw fewnbwn testun ffurf.
Lawrlwytho ffeilDechreuwch deipio yn y maes isod i ddangos y canlyniadau teipio ymlaen llaw.
Ffoniwch y teip ymlaen trwy javascript:
- $ ( '.typehead' ). teip blaen ()
Enw | math | rhagosodedig | disgrifiad |
---|---|---|---|
ffynhonnell | arae | [ ] | Y ffynhonnell ddata i ymholi yn ei herbyn. |
eitemau | rhif | 8 | Uchafswm nifer yr eitemau i'w harddangos yn y gwymplen. |
matsiwr | swyddogaeth | achos ansensitif | Y dull a ddefnyddir i benderfynu a yw ymholiad yn cyfateb i eitem. Yn derbyn un ddadl, y gellir item profi'r ymholiad yn ei herbyn. Cyrchwch yr ymholiad cyfredol gyda this.query . Dychwelwch boolean true os yw'r ymholiad yn cyfateb. |
didolwr | swyddogaeth | cyfateb union, achos sensitif, achos ansensitif |
Dull a ddefnyddir i ddidoli canlyniadau awtolenwi. Yn derbyn un ddadl items ac mae ganddo gwmpas yr enghraifft deipio ymlaen. Cyfeiriwch yr ymholiad cyfredol gyda this.query . |
goleuwr | swyddogaeth | yn amlygu pob cyfatebiaeth ddiofyn | Dull a ddefnyddir i amlygu canlyniadau awtolenwi. Yn derbyn un ddadl item ac mae ganddo gwmpas yr enghraifft deipio ymlaen. Dylid dychwelyd html. |
Ychwanegu priodoleddau data i gofrestru elfen ag ymarferoldeb teipio ymlaen llaw.
- <input type = " text " data-provide = " typeahead " >
Yn cychwyn mewnbwn gyda blaendeip.