Scoránaigh infheictheacht an ábhair ar fud do thionscadal le cúpla rang agus lenár breiseán JavaScript.
Conas a oibríonn sé
Úsáidtear an breiseán JavaScript collapse chun ábhar a thaispeáint agus a cheilt. Úsáidtear cnaipí nó ancairí mar thruicear a dhéantar a mhapáil d’eilimintí sonracha a scorálann tú. Má thiteann eilimint, beochtófar an heightó luach reatha go 0. Mar gheall ar an gcaoi a láimhseálann CSS beochan, ní féidir leat é a úsáid paddingar .collapseeilimint. Ina áit sin, bain úsáid as an rang mar eilimint timfhilleadh neamhspleách.
Sampla
Cliceáil ar na cnaipí thíos chun eilimint eile a thaispeáint agus a cheilt trí athruithe ranga:
.collapseseithí ábhar
.collapsinga chuirtear i bhfeidhm le linn aistrithe
.collapse.showléiríonn ábhar
Is féidir leat nasc a úsáid leis an hreftréith, nó cnaipe leis an data-targettréith. Sa dá chás, data-toggle="collapse"tá an gá.
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.
Spriocanna iolracha
A <button>nó is féidir gnéithe iolracha a thaispeáint agus a cheilt trí thagairt a dhéanamh <a>dóibh le roghnóir JQuery ina shaintréith. Iolrú nó is féidir dúil a thaispeáint agus a cheilt má thagraíonn siad dó lena n - airíonnahrefdata-target<button><a>hrefdata-target
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.
Sampla bosca ceoil
Ag baint úsáide as an gcomhpháirt cárta , is féidir leat a leathnú an t-iompar réamhshocraithe collapse a chruthú cairdín.
Anim pariatur cliche reprehenderit, enim eiusmod saol ard accusamus terry richardson agus squid. 3 mac tíre gealach officia aute, neamh cupidatat scátála dolor brunch. Trucail bia quinoa nesciunt laborum eiusmod. Brunch 3 mac tíre gealach tempor, sunt aliqua chuir éan air squid caife aon bhunadh nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur búistéir leas lomo. Leggings occaecat craft beoir farm-go-table, amh denim synth aeistéitiúil nesciunt is dócha nár chuala tú trácht orthu accusamus labore VHS inbhuanaithe.
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.
Inrochtaineacht
Bí cinnte a chur aria-expandedleis an eilimint rialaithe. Cuireann an tréith seo in iúl go sainráite staid reatha na heiliminte collapsible a bhaineann le rialú do léitheoirí scáileáin agus teicneolaíochtaí cúnta dá samhail. Má dhúntar an eilimint infhillte de réir réamhshocraithe, ba cheart go mbeadh luach aria-expanded="false". Má tá an eilimint infhillte socraithe agat le bheith oscailte de réir réamhshocraithe ag baint úsáide as an showrang, socraigh aria-expanded="true"ar an rialtán ina ionad sin. Scoránóidh an breiseán an tréith seo go huathoibríoch ar an rialú bunaithe ar cibé acu an bhfuil nó nach bhfuil an eilimint in-chomhlaite oscailte nó dúnta (trí JavaScript, nó toisc gur spreag an t-úsáideoir eilimint rialaithe eile atá ceangailte leis an eilimint collapsbile céanna). Mura cnaipe é eilimint HTML na heiliminte rialaithe (m.sh., an <a>nó <div>), an tréithrole="button"Ba chóir a chur leis an eilimint.
Má tá d’eilimint rialaithe ag díriú ar eilimint infhillte amháin – .i. tá an data-targetaitreabúid dírithe ar idroghnóir – ba cheart duit an aria-controlsaitreabúid a chur leis an eilimint rialaithe, ina bhfuil an ideilimint infhillte. Baineann léitheoirí scáileáin nua-aimseartha agus teicneolaíochtaí cúnta comhchosúla úsáid as an tréith seo chun aicearraí breise a sholáthar d’úsáideoirí chun nascleanúint a dhéanamh go díreach chuig an eilimint infhillte féin.
Tabhair faoi deara nach gclúdaíonn cur i bhfeidhm reatha Bootstrap na hidirghníomhaíochtaí méarchláir éagsúla a bhfuil cur síos orthu i bpatrún bosca ceoil WAI-ARIA Authoring Practices 1.1 - beidh ort iad seo a chur san áireamh tú féin le JavaScript saincheaptha.
Úsáid
Úsáideann an breiseán collapse roinnt ranganna chun an t-ardú trom a láimhseáil:
.collapseseithí an t-ábhar
.collapse.showléiríonn an t-ábhar
.collapsingcuirtear leis nuair a thosaíonn an t-aistriú, agus baintear é nuair a chríochnaíonn sé
Is féidir na ranganna seo a fháil i _transitions.scss.
Trí tréithe sonraí
Ní gá ach cuir data-toggle="collapse"leis data-targetan eilimint chun rialú a shannadh go huathoibríoch ar eilimint infhillte amháin nó níos mó. Glacann an data-targettréith le roghnóir CSS chun an cliseadh a chur i bhfeidhm air. Bí cinnte an rang collapsea chur leis an eilimint infhillte. Más mian leat é a oscailt roimh ré, cuir an rang breise show.
Chun bainistíocht grúpa cosúil le bosca ceoil a chur le limistéar infhillte, cuir an tréith sonraí data-parent="#selector". Déan tagairt don taispeántas chun é seo a fheiceáil i ngníomh.
Trí JavaScript
Cumasaigh de láimh le:
Roghanna
Is féidir roghanna a chur ar aghaidh trí tréithe sonraí nó JavaScript. Maidir le tréithe sonraí, cuir ainm na rogha i gceangal le data-, mar atá i data-parent="".
Ainm
Cineál
Réamhshocrú
Cur síos
tuismitheoir
roghnóir | réad jQuery | eilimint DOM
bréagach
Má chuirtear tuismitheoir ar fáil, dúnfar na heilimintí in-chomhlaite ar fad faoin tuismitheoir sonraithe nuair a thaispeánfar an mhír infhillte seo. (cosúil le hiompar cairdín traidisiúnta - tá sé seo ag brath ar an cardrang). Ní mór an tréith a shocrú ar an limistéar sprice infhillte.
scoránaigh
Boole
fíor
Scoránaigh an eilimint infhillte ar agairt
Modhanna
Modhanna agus aistrithe asincrónacha
Tá gach modh API asincrónach agus cuireann siad tús le haistriú . Filleann siad ar an nglaoiteoir a luaithe a chuirtear tús leis an aistriú ach sula gcríochnaíonn sé . Ina theannta sin, ní thabharfar aird ar ghlao modha ar chomhpháirt trasdula .
Gníomhachtaíonn sé d'ábhar mar eilimint infhillte. Glacann rogha roghnach object.
.collapse('toggle')
Scoránaigh eilimint infhillte a thaispeántar nó folaithe. Filleann sé ar an nglaoiteoir sula dtaispeántar nó sula gcuirtear i bhfolach an eilimint in-láite (.i. sula dtarlaíonn an t-imeacht) shown.bs.collapse.hidden.bs.collapse
.collapse('show')
Léiríonn eilimint infhillte. Filleann sé ar an nglaoiteoir sula dtaispeántar an eilimint infhillte (ie sula shown.bs.collapsedtarlaíonn an teagmhas).
.collapse('hide')
Seithí eilimint infhillte. Filleann sé ar an nglaoiteoir sula mbeidh an eilimint in-chomhlaite curtha i bhfolach (ie sula hidden.bs.collapsedtarlaíonn an teagmhas).
.collapse('dispose')
Scriosann titim eilimint.
Imeachtaí
Nochtann rang titim Bootstrap roinnt imeachtaí chun dul i ngleic leis an bhfeidhmiúlacht leite.
Cineál Imeachta
Cur síos
taispeáin.bs.leac
Téann an teagmhas seo chun solais láithreach nuair showa ghlaoitear an modh ásc.
léirithe.bs
Cuirtear an teagmhas seo ar ceal nuair a bhíonn eilimint chlaonta curtha infheicthe don úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).
folaigh.bs.leac
Cuirtear an teagmhas seo ar ceal láithreach nuair hidea glaodh ar an modh.
i bhfolach.bs.tuilleamaí
Cuirtear an teagmhas seo ar ceal nuair a cuireadh eilimint chlaonta i bhfolach ón úsáideoir (fanfaidh sé go mbeidh na haistrithe CSS curtha i gcrích).