Apseykylmak
Taslamanyňyzyň mazmunyny birnäçe synp we JavaScript plaginlerimiz bilen üýtgediň.
Bu nähili işleýär
Apseykylan JavaScript plugin mazmuny görkezmek we gizlemek üçin ulanylýar. Düwmeler ýa-da labyrlar, üýtgeýän aýratyn elementlere düzülen triggerler hökmünde ulanylýar. height
Bir elementiň çökmegi, häzirki bahasyndan janlandyrar 0
. CSS-iň animasiýalary nähili alyp barýandygyny göz öňünde tutup padding
, bir .collapse
elementde ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.
prefers-reduced-motion
media talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň
.
Mysal
Synp üýtgeşmeleri arkaly başga bir elementi görkezmek we gizlemek üçin aşakdaky düwmelere basyň:
.collapse
mazmuny gizleýär.collapsing
geçiş döwründe ulanylýar.collapse.show
mazmunyny görkezýär
data-target
Umuman, atributly düwmäni ulanmagy maslahat berýäris . Semantiki nukdaýnazardan maslahat berilmese-de, href
atribut (we a role="button"
) bilen baglanyşyk ulanyp bilersiňiz. Iki ýagdaýda-da data-toggle="collapse"
talap edilýär.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
Gorizontal
Apseykylýan plugin keseligine çökmegini hem goldaýar. Munuň ýerine .width
geçiş synpyny goşuň we derrew çaga elementine sazlaň . Customörite Sass ýazmaga, içerki stilleri ulanmaga ýa-da giňlik hyzmatlarymyzy ulanmaga arkaýyn boluň .width
height
width
min-height
resminamalarymyzda aşa köp reňkleriň bolmazlygy üçin bellik bar bolsa, munuň aç-açan talap edilmeýändigini ýadyňyzdan çykarmaň.
Diňe width
çaga elementi talap edilýär.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
Birnäçe nyşan
A <button>
ýa -da atributynda <a>
JQuery saýlaýjysyna salgylanyp, birnäçe elementi görkezip we gizläp biler . Bir elementi hersi öz aýratynlygy ýa-da häsiýeti bilen görkezýän bolsa, köp ýa-da görkezip we gizläp bilerhref
data-target
<button>
<a>
href
data-target
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
Akkordeon mysaly
Kart komponentini ulanyp, akkordeon döretmek üçin deslapky çökmek häsiýetini uzaldyp bilersiňiz. Akkordeon stiline dogry ýetmek üçin .accordion
, örtük hökmünde ulanmagy unutmaň.
.show
synpyň kömegi bilen görkezilýär.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
Elýeterlilik
aria-expanded
Dolandyryş elementine hökman goşuň . Bu atribut, okyjylary we şuňa meňzeş kömekçi tehnologiýalary dolandyrmak üçin dolandyryşa bagly çökýän elementiň häzirki ýagdaýyny aç-açan görkezýär. Apsykylýan element deslapky görnüşde ýapylan bolsa, dolandyryş elementindäki atributyň bahasy bolmaly aria-expanded="false"
. Apsykylýan elementi show
synpy ulanyp, açyk diýip kesgitlän bolsaňyz aria-expanded="true"
, ýerine dolandyryşda goýuň. Plagin, ýykylýan elementiň açylandygyna ýa-da ýapylmagyna (JavaScript arkaly ýa-da ulanyjy şol bir çöküp bilýän element bilen baglanyşykly başga bir dolandyryş elementini döredendigi sebäpli) dolandyryşda awtomatiki usulda üýtgediler. Dolandyryş elementiniň HTML elementi düwme däl bolsa (meselem, <a>
ýa-da <div>
), atributrole="button"
elementine goşulmalydyr.
Dolandyryş elementiňiz ýekeje ýykylýan elementi nyşana alýan bolsa - ýagny data-target
atribut saýlaýjyny görkezýän bolsa - ýykylýan elementiň düzümini öz içine alýan dolandyryş elementine atribut id
goşmaly . Döwrebap ekran okaýjylary we şuňa meňzeş kömekçi tehnologiýalar, ulanyjylary ýykylýan elementiň özüne gönüden-göni geçmek üçin goşmaça gysga ýollar bilen üpjün etmek üçin bu atributdan peýdalanýarlar.aria-controls
id
“Bootstrap” -yň häzirki durmuşa geçirilmegi, “ ARIA Authoring Practices Guide” akkordeon nagşynda beýan edilen dürli klawiatura täsirlerini öz içine almaýandygyny ýadyňyzdan çykarmaň - bulary adaty JavaScript bilen goşmaly bolarsyňyz.
Ulanylyşy
Apseykylýan plugin agyr götermek üçin birnäçe synp ulanýar:
.collapse
mazmuny gizleýär.collapse.show
mazmunyny görkezýär.collapsing
geçiş başlanda goşulýar we gutarandan soň aýrylýar
Bu sapaklary tapyp bilersiňiz _transitions.scss
.
Maglumat atributlary arkaly
Diňe bir ýa-da birnäçe çöküp bilýän elementlere gözegçiligi awtomatiki bellemek üçin elemente data-toggle="collapse"
goşuň . data-target
Aýratynlyk data-target
, çökmegi ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy collapse
ýykylýan elemente goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show
.
Çökýän ýere akkordeona meňzeş topar dolandyryşyny goşmak üçin maglumat atributyny goşuň data-parent="#selector"
. Muny hereketde görmek üçin demo serediň.
JavaScript arkaly
El bilen işlediň:
$('.collapse').collapse()
Görnüş
Opsiýalar maglumat atributlary ýa-da JavaScript arkaly geçirilip bilner. Maglumat atributlary üçin, opsiýanyň adyny data-
bolşy ýaly goşuň data-parent=""
.
Ady | Görnüşi | Bellenen | Düşündiriş |
---|---|---|---|
ene-atasy | saýlaýjy | jQuery obýekti | DOM elementi | ýalan | Ene-ata üpjün edilen bolsa, bu ýykylýan element görkezilende görkezilen ene-atanyň aşagyndaky ähli çöküp bilýän elementler ýapylar. (adaty akkordeon häsiýetine meňzeýär - bu card synpa bagly). Aýratynlyk nyşanyň ýykylýan ýerinde kesgitlenmeli. |
üýtgetmek | boolean | dogry | Apykylýan elementi çakylyk bilen üýtgedýär |
Usullar
Asynkron usullar we geçişler
APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .
Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .
.collapse(options)
Mazmunyňyzy çökýän element hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
Görkezilýän ýa-da gizlenýän elementi çalyşýar. Apsykylýan element hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.collapse
ýa-da hidden.bs.collapse
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('show')
Apsykylýan elementi görkezýär. Apsykylýan element hakykatdanam görkezilmänkä (ýagny shown.bs.collapse
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('hide')
Apsykylýan elementi gizleýär. Apsykylýan element aslynda gizlenmänkä (ýagny hidden.bs.collapse
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
.collapse('dispose')
Bir elementiň çökmegini ýok edýär.
Wakalar
“Bootstrap” -yň çökmegi synpy, çökmek funksiýasyna girmek üçin birnäçe wakany paş edýär.
Çäräniň görnüşi | Düşündiriş |
---|---|
show.bs.collapse | show Bu waka mysal usuly çagyrylanda derrew ýanýar . |
görkezildi.bs.collapse | Bu hadysa, çöküş elementi ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). |
hide.bs.collapse | hide Bu waka usul çagyrylanda derrew atylýar . |
gizlenen.bs.collapse | Bu waka ulanyjydan çökmek elementi gizlenende (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar. |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})