Tog faicsinneachd susbaint thairis air do phròiseact le beagan chlasaichean agus na plugins JavaScript againn.
Mar a tha e ag obair
Tha am plugan tuiteam JavaScript air a chleachdadh gus susbaint a shealltainn agus fhalach. Bithear a’ cleachdadh putanan no acraichean mar luchd-brosnachaidh a tha air am mapadh gu eileamaidean sònraichte a thogas tu. Le bhith a’ tuiteam às eileamaid beothaichidh heighte an luach làithreach gu 0. Leis mar a làimhsicheas CSS beòthachaidhean, chan urrainn dhut a chleachdadh paddingair .collapseeileamaid. An àite sin, cleachd an clas mar eileamaid còmhdaich neo-eisimeileach.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Ioma targaidean
A <button>no <a>is urrainn dha grunn eileamaidean a shealltainn agus fhalach le bhith a’ toirt iomradh orra le roghnaiche JQuery na fheart hrefno na data-targetfheart. Iomadaich <button>no <a>faodaidh iad eileamaid a shealltainn agus fhalach ma tha iad uile a’ toirt iomradh air leis a’ hrefbhuadhan data-targetaca
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Eisimpleir bogsa-ciùil
Le bhith a’ cleachdadh pàirt na cairt , faodaidh tu an giùlan tuiteam sìos àbhaisteach a leudachadh gus bogsa a chruthachadh. Gus an stoidhle bogsa a choileanadh gu ceart, bi cinnteach gun cleachd .accordionthu mar phasgan.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson agus squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Tha an làraidh bìdh a’ tighinn gu ìre nas lugha na labourum euusmod. Brunch 3 wolf moon tempor, sunt aliqua cuir eun air squid cofaidh aon-tùs nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur bùidsear iar lomo. Leggings occaecat craft beer farm-to-table, raw denim esthetic synth nesciunt is dòcha nach cuala tu iomradh orra accusamus laboure seasmhach VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Ruigsinneachd
Dèan cinnteach gun cuir thu ris aria-expandedan eileamaid smachd. Tha am feart seo gu soilleir a’ toirt iomradh air staid làithreach na h-eileamaid tuiteamach ceangailte ri smachd leughadairean sgrion agus teicneòlasan taice coltach ris. Ma tha an eileamaid collapsible dùinte gu bunaiteach, bu chòir luach aria-expanded="false". Ma tha thu air an eileamaid tuiteamach a shuidheachadh gus a bhith fosgailte gu bunaiteach a’ cleachdadh a’ showchlas, cuir aria-expanded="true"air an smachd an àite sin. Togaidh am plugan am feart seo gu fèin-ghluasadach air an smachd stèidhichte air co-dhiù a chaidh an eileamaid tuiteamach fhosgladh no a dhùnadh (tro JavaScript, no leis gu bheil an neach-cleachdaidh air eileamaid smachd eile a bhrosnachadh cuideachd ceangailte ris an aon eileamaid tuiteamach). Mura h-eil putan HTML an eileamaid smachd (me, an <a>no <div>), am feartrole="button"bu chòir a chur ris an eileamaid.
Ma tha an eileamaid smachd agad ag amas air aon eileamaid a ghabhas tuiteam - is e sin am data-targetfeart a’ comharrachadh idroghnaiche - bu chòir dhut am aria-controlsfeart a chuir ris an eileamaid smachd, anns a bheil an ideileamaid a ghabhas tuiteam. Bidh leughadairean sgrion ùr-nodha agus teicneòlasan taice coltach ris a’ cleachdadh a’ fheart seo gus geàrr-liostaichean a bharrachd a thoirt do luchd-cleachdaidh gus seòladh gu dìreach chun eileamaid tuiteamach fhèin.
Thoir an aire nach eil buileachadh gnàthach Bootstrap a’ còmhdach na diofar eadar-obrachaidhean meur-chlàr a tha air am mìneachadh ann am pàtran bogsa 1.1 Cleachdaidhean Ùghdarrachaidh WAI-ARIA - feumaidh tu iad sin a thoirt a-steach le JavaScript àbhaisteach.
Cleachdadh
Bidh am plugan tuiteam a’ cleachdadh beagan chlasaichean gus an togail trom a làimhseachadh:
.collapsea’ falach an t-susbaint
.collapse.showa’ nochdadh an t-susbaint
.collapsingair a chur ris nuair a thòisicheas an gluasad, agus air a thoirt air falbh nuair a bhios e deiseil
Gheibhear na clasaichean seo ann an _transitions.scss.
Tro fheartan dàta
Dìreach cuir ris data-toggle="collapse"agus a data-targetris an eileamaid gus smachd a shònrachadh gu fèin-ghluasadach air aon no barrachd eileamaidean a ghabhas tuiteam. Gabhaidh am data-targetfeart ri roghnaichear CSS gus an tuiteam a chuir an sàs. Dèan cinnteach gun cuir thu an clas collapseris an eileamaid a ghabhas tuiteam. Ma tha thu airson gum fosgail e gu bunaiteach, cuir ris a’ chlas show.
Gus riaghladh buidhne coltach ri bogsa a chuir ri raon a ghabhas tuiteam, cuir am feart dàta data-parent="#selector". Thoir sùil air an demo gus seo fhaicinn ann an gnìomh.
Air sgàth javascript
Dèan comas le làimh le:
Roghainnean
Faodar roghainnean a thoirt seachad tro bhuadhan dàta no JavaScript. Airson buadhan dàta, cuir ainm an roghainn ri data-, mar ann an data-parent="".
Ainm
Seòrsa
Deònach
Tuairisgeul
pàrant
roghnaiche | nì jQuery | eileamaid DOM
breugach
Ma tha pàrant air a thoirt seachad, thèid a h-uile eileamaid tuiteamach fon phàrant ainmichte a dhùnadh nuair a thèid an rud tuiteamach seo a shealltainn. (coltach ri giùlan bogsa traidiseanta - tha seo an urra ris a ' cardchlas). Feumaidh am feart a bhith air a shuidheachadh air an raon targaid a ghabhas tuiteam.
tog
boolean
fìor
Toglaich an eileamaid a ghabhas tuiteam air ionnsaigh
Dòighean-obrach
Modhan asyncronach agus eadar-ghluasadan
Tha a h-uile modh API asyncronach agus tòisichidh iad air eadar- ghluasad . Bidh iad a’ tilleadh chun neach-fios cho luath ‘s a thòisicheas an gluasad ach mus tig e gu crìch . A bharrachd air an sin, cha tèid aire a thoirt do ghairm modh air pàirt gluasaid .
Cuir an susbaint agad an gnìomh mar eileamaid a ghabhas tuiteam. A 'gabhail ri roghainnean roghnach object.
.collapse('toggle')
Togail eileamaid a ghabhas tuiteam ri fhaicinn no falaichte. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn no fhalachshown.bs.collapse ( ie mus tachair an hidden.bs.collapsetachartas).
.collapse('show')
A’ sealltainn eileamaid a ghabhas tuiteam. Tillidh e chun neach-fios mus deach an eileamaid a ghabhas tuiteam a shealltainn (ie mus tachair an shown.bs.collapsetachartas).
.collapse('hide')
A 'falach eileamaid collapsible. Tilleadh chun neach-fios mus deach an eileamaid a ghabhas tuiteam a chuir am falach (ie mus tachair an hidden.bs.collapsetachartas).
.collapse('dispose')
A 'sgrios tuiteam eileamaid.
Tachartasan
Bidh clas tuiteam Bootstrap a’ nochdadh grunn thachartasan airson a dhol an sàs ann an gnìomhachd tuiteam.
Seòrsa Tachartas
Tuairisgeul
seall.bs.tuiteam
Bidh an tachartas seo a’ losgadh sa bhad nuair showa chanar ris an dòigh eisimpleir.
air a nochdadh.bs.collapse
Thèid an tachartas seo a losgadh nuair a tha eileamaid tuiteamach air a dhèanamh follaiseach don neach-cleachdaidh (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).
seiche.bs.collapse
Tha an tachartas seo air a losgadh sa bhad nuair a chaidh am hidemodh a ghairm.
falaichte.bs.collapse
Thèid an tachartas seo a losgadh nuair a chaidh eileamaid tuiteamach fhalach bhon chleachdaiche (feitheamh ri eadar-ghluasadan CSS a chrìochnachadh).