Aqleb il-viżibilità tal-kontenut fil-proġett tiegħek bi ftit klassijiet u l-plugins JavaScript tagħna.
Kif taħdem
Il-plugin JavaScript kollass jintuża biex juri u jaħbi l-kontenut. Buttuni jew ankri jintużaw bħala triggers li huma mmappjati għal elementi speċifiċi li taqleb. Il-kollass ta' element se janima l- heightmill-valur attwali tiegħu għal 0. Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża paddingfuq .collapseelement. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.
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.
Miri multipli
A <button>jew <a>jista 'juri u jaħbi elementi multipli billi jirreferenzjahom b'selettur JQuery fl- attribut tiegħu hrefjew . data-targetMultipli <button>jew <a>jistgħu juru u jaħbu element jekk kull wieħed jirreferu għalih bl- attribut hrefjew tagħhomdata-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.
Eżempju tal-akkordju
Bl-użu tal-komponent tal- karta , tista 'testendi l-imġieba tal-kollass default biex toħloq accordion. Biex tikseb sew l-istil tal-accordion, kun żgur li tuża .accordionbħala tgeżwir.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad klamari. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 lupu qamar tempor, sunt aliqua poġġi għasfur fuqu klamari ta 'oriġini waħda kafè nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur biċċier viċi lomo. Leggings occaecat craft birra farm-to-table, raw denim aesthetic synth nesciunt inti probabilment ma smajtx minnhom 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.
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.
Aċċessibilità
Kun żgur li żżid aria-expandedmal-element ta 'kontroll. Dan l-attribut iwassal b'mod espliċitu l-istat attwali tal-element kollassabbli marbut mal-kontroll lill-qarrejja tal-iskrin u teknoloġiji assistivi simili. Jekk l-element kollassabbli jingħalaq awtomatikament, l-attribut fuq l-element ta 'kontroll għandu jkollu valur ta' aria-expanded="false". Jekk issettjajt l-element kollassabbli biex ikun miftuħ awtomatikament billi tuża l- showklassi, issettja aria-expanded="true"fuq il-kontroll minflok. Il-plugin awtomatikament ibiddel dan l-attribut fuq il-kontroll ibbażat fuq jekk l-element kollassabbli infetaħx jew ingħalaq jew le (permezz ta’ JavaScript, jew minħabba li l-utent qajjem element ta’ kontroll ieħor marbut ukoll mal-istess element kollassabbli). Jekk l-element HTML tal-element ta' kontroll mhuwiex buttuna (eż., <a>jew <div>), l-attributrole="button"għandhom jiġu miżjuda mal-element.
Jekk l-element ta' kontroll tiegħek qed jimmira għal element wieħed li jista' jiġġarraf – jiġifieri l- data-targetattribut qed jindika idselettur – għandek iżżid l- aria-controlsattribut ma' l-element ta' kontroll, li jkun fih l id-element li jista' jiġġarraf. Screen readers moderni u teknoloġiji ta' assistenza simili jagħmlu użu minn dan l-attribut biex jipprovdu lill-utenti b'shortcuts addizzjonali biex jinnavigaw direttament lejn l-element kollassabbli innifsu.
Innota li l-implimentazzjoni attwali ta 'Bootstrap ma tkoprix l-interazzjonijiet varji tat-tastiera deskritti fil- mudell tal-accordion WAI-ARIA Authoring Practices 1.1 - ser ikollok bżonn tinkludi dawn lilek innifsek b'JavaScript personalizzat.
Użu
Il-plugin tal-kollass juża ftit klassijiet biex jimmaniġġja l-irfigħ tqil:
.collapsejaħbi l-kontenut
.collapse.showjuri l-kontenut
.collapsingtiżdied meta tibda t-tranżizzjoni, u titneħħa meta tispiċċa
Dawn il-klassijiet jistgħu jinstabu fi _transitions.scss.
Via attributi tad-data
Żid biss data-toggle="collapse"u a data-targetmal-element biex awtomatikament tassenja l-kontroll ta 'element kollassabbli wieħed jew aktar. L- data-targetattribut jaċċetta selettur CSS biex japplika l-kollass għalih. Kun żgur li żżid il-klassi collapsemal-element kollassabbli. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonali show.
Biex iżżid ġestjoni tal-gruppi bħal accordion f'żona li tista 'tiġġarraf, żid l-attribut tad-dejta data-parent="#selector". Irreferi għad-demo biex tara dan fl-azzjoni.
Via JavaScript
Ippermetti manwalment ma':
Għażliet
L-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript. Għal attributi tad-dejta, ehmeż l-isem tal-għażla ma' data-, bħal f' data-parent="".
Isem
Tip
Default
Deskrizzjoni
ġenitur
selettur | Oġġett jQuery | Element DOM
falza
Jekk jiġi pprovdut ġenitur, allura l-elementi kollha li jistgħu jiġġarfu taħt il-ġenitur speċifikat jingħalqu meta jintwera dan l-oġġett kollassabbli. (simili għall-imġieba tradizzjonali tal-accordion - dan jiddependi fuq il- cardklassi). L-attribut għandu jiġi stabbilit fuq iż-żona mira kollassabbli.
toggle
boolean
veru
Jiddawwar l-element kollassabbli fuq l-invokazzjoni
Metodi
Metodi asinkroniċi u tranżizzjonijiet
Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .
Jattiva l-kontenut tiegħek bħala element kollassabbli. Jaċċetta għażliet fakultattivi object.
.collapse('toggle')
Jitbiddel element kollassabbli biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment shown.bs.collapsejew ).hidden.bs.collapse
.collapse('show')
Juri element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli jkun fil-fatt intwera (jiġifieri qabel ma shown.bs.collapsejseħħ l-avveniment).
.collapse('hide')
Jaħbi element kollassabbli. Jirritorna lil min iċempel qabel ma l-element kollassabbli fil-fatt ġie moħbi (jiġifieri qabel ma hidden.bs.collapsejseħħ l-avveniment).
.collapse('dispose')
Jeqred il-kollass ta' element.
Avvenimenti
Il-klassi tal-kollass ta 'Bootstrap tesponi ftit avvenimenti għall-ganċ fil-funzjonalità tal-kollass.
Tip ta' Avveniment
Deskrizzjoni
juru.bs.kollass
Dan l-avveniment jispara immedjatament meta showjissejjaħ il-metodu tal-istanza.
muri.bs.kollass
Dan l-avveniment jiġi sparat meta element ta 'kollass ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).
jaħbi.bs.kollass
Dan l-avveniment jiġi sparat immedjatament meta l- hidemetodu jkun ġie msejjaħ.
moħbija.bs.kollass
Dan l-avveniment jiġi sparat meta element ta 'kollass ikun ġie moħbi mill-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).