ပြိုကျသည်။
အတန်းအနည်းငယ်နှင့် ကျွန်ုပ်တို့၏ JavaScript ပလပ်အင်များဖြင့် သင့်ပရောဂျက်တစ်လျှောက်တွင် အကြောင်းအရာများ၏ မြင်နိုင်စွမ်းကို ပြောင်းလိုက်ပါ။
ဘယ်လိုအလုပ်လုပ်လဲ
ပြိုလဲ JavaScript ပလပ်အင်ကို အကြောင်းအရာကို ပြသရန်နှင့် ဝှက်ရန်အတွက် အသုံးပြုသည်။ ခလုတ်များ သို့မဟုတ် ကျောက်ဆူးများကို သင်ပြောင်းဖွင့်နိုင်သော သီးခြားဒြပ်စင်များနှင့် ပုံဖော်ထားသည့် အစပျိုးများအဖြစ် အသုံးပြုပါသည်။ ဒြပ်စင်တစ်ခုအား ပြိုကျခြင်းသည် height
၎င်း၏လက်ရှိတန်ဖိုးမှ 0
. CSS သည် အန်နီမေးရှင်းများကို ကိုင်တွယ်ပုံအား ပေးသောကြောင့်၊ သင်သည် ဒြပ်စင် padding
တစ်ခုတွင် အသုံးမပြုနိုင် ပါ။ .collapse
ယင်းအစား၊ အတန်းကို သီးခြား ထုပ်ပိုးမှုတစ်ခုအဖြစ် အသုံးပြုပါ။
prefers-reduced-motion
မီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ
။
ဥပမာ
အတန်းအပြောင်းအလဲများမှတစ်ဆင့် အခြားဒြပ်စင်များကို ပြသရန်နှင့် ဝှက်ရန် အောက်ပါခလုတ်များကို နှိပ်ပါ။
.collapse
အကြောင်းအရာကို ဝှက်ထားသည်။.collapsing
အကူးအပြောင်းများအတွင်း အသုံးပြုသည်။.collapse.show
အကြောင်းအရာကိုပြသသည်။
ယေဘုယျအားဖြင့်၊ ရည်ညွှန်းချက်ပါသော ခလုတ်ကို အသုံးပြုရန် ကျွန်ုပ်တို့အကြံပြုပါသည် data-bs-target
။ ဝေါဟာရရှုထောင့်မှ မအကြံပြုသော်လည်း၊ href
attribute (and a role="button"
) နှင့် လင့်ခ်တစ်ခုကိုလည်း သုံးနိုင်သည်။ နှစ်ခုစလုံးတွင်၊ data-bs-toggle="collapse"
လိုအပ်သည်။
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-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>
ပစ်မှတ်များစွာ
A <button>
သို့မဟုတ် ၎င်း၏ ရည်ညွှန်းချက်တွင် ရွေးချယ်ကိရိယာ တစ်ခု <a>
ဖြင့် ၎င်းတို့ကို ကိုးကားခြင်းဖြင့် များစွာသောဒြပ်စင်များကို ပြသနိုင်ပြီး ဝှက်နိုင်သည် ။ တစ်ခုချင်းစီက ၎င်းကို ၎င်းတို့၏ သို့မဟုတ် ရည်ညွှန်း ချက်ဖြင့် ရည်ညွှန်းပါက ဒြပ်စင်တစ်ခုကို အများအပြား သို့မဟုတ် ပြပြီး ဝှက်နိုင်သည်။href
data-bs-target
<button>
<a>
href
data-bs-target
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>
သုံးစွဲနိုင်မှု
aria-expanded
ထိန်းချုပ်မှုဒြပ်စင် သို့ထည့်ရန်သေချာပါစေ ။ ဤရည်ညွှန်းချက်သည် မျက်နှာပြင်စာဖတ်သူများနှင့် အလားတူအကူအညီနည်းပညာများထံသို့ ထိန်းချုပ်မှုနှင့် ဆက်စပ်နေသော ခေါက်သိမ်းနိုင်သောဒြပ်စင်၏ လက်ရှိအခြေအနေကို အတိအလင်းဖော်ပြသည်။ ခေါက်သိမ်းနိုင်သောဒြပ်စင်ကို ပုံသေအားဖြင့် ပိတ်ပါက၊ ထိန်းချုပ်မှုဒြပ်စင်ပေါ်ရှိ ရည်ညွှန်းချက်တွင် တန်ဖိုးတစ်ခု ရှိသင့်သည် aria-expanded="false"
။ အကယ်၍ သင်သည် အတန်းအစားကို အသုံးပြု၍ ခေါက်သိမ်းနိုင်သော ဒြပ်စင်ကို ပုံသေဖြင့် ဖွင့်ရန် သတ်မှတ်ပါက၊ ၎င်း အစား ထိန်းချုပ်မှုကို show
သတ်မှတ် ပါ။ aria-expanded="true"
ခေါက်သိမ်းနိုင်သောဒြပ်စင်ကို ဖွင့်ခြင်း သို့မဟုတ် ပိတ်ခြင်းရှိမရှိအပေါ် အခြေခံ၍ ထိန်းချုပ်မှုတွင် ဤအရည်အချင်းကို အလိုအလျောက်ပြောင်းပေးမည် (JavaScript မှတစ်ဆင့် သို့မဟုတ် အသုံးပြုသူက ခေါက်ရိုးကျနိုင်သောဒြပ်စင်နှင့် ဆက်စပ်နေသော အခြားထိန်းချုပ်မှုဒြပ်စင်ကို အစပျိုးခြင်းကြောင့်)။ ထိန်းချုပ်မှုဒြပ်စင်၏ HTML ဒြပ်စင်သည် ခလုတ်တစ်ခုမဟုတ်ပါက (ဥပမာ၊ တစ်ခု <a>
သို့မဟုတ် <div>
) ရည်ညွှန်းချက်role="button"
ဒြပ်စင်သို့ထည့်သင့်သည်။
သင်၏ထိန်းချုပ်မှုဒြပ်စင်သည် ပြိုကျနိုင်သောဒြပ်စင်တစ်ခုအား ပစ်မှတ်ထားနေပါက- ဥပမာ- data-bs-target
attribute သည် selector တစ်ခုသို့ညွှန်ပြနေပါက - collapsible element ပါဝင်သော control element သို့ attribute ကို id
ထည့်သင့်သည် ။ ခေတ်မီဖန်သားပြင်စာဖတ်သူများနှင့် အလားတူအကူအညီနည်းပညာများသည် အသုံးပြုသူများအား ခေါက်သိမ်းနိုင်သောဒြပ်စင်သို့ တိုက်ရိုက်သွားလာရန် နောက်ထပ်ဖြတ်လမ်းများပေးဆောင်ရန် ဤရည်ညွှန်းချက်ကို အသုံးပြုသည်။aria-controls
id
Bootstrap ၏ လက်ရှိအကောင်အထည်ဖော်မှုသည် WAI-ARIA Authoring Practices 1.1 accordion ပုံစံ တွင်ဖော်ပြထားသော အမျိုးမျိုးသော ရွေးချယ်နိုင်သော ကီးဘုတ် အပြန်အလှန်တုံ့ပြန်မှုများကို မဖုံးကွယ်ထားကြောင်း သတိပြုပါ - ၎င်းတို့ကို စိတ်ကြိုက် JavaScript ဖြင့် သင်ကိုယ်တိုင်ထည့်သွင်းရန် လိုအပ်မည်ဖြစ်ပါသည်။
ဆူး
ကိန်းရှင်များ
$transition-collapse: height .35s ease;
သင်တန်းများ
scss/_transitions.scss
အစိတ်အပိုင်းများစွာ (ခေါက်သိမ်းခြင်းနှင့် အကော်ဒီယံ) တို့ကို မျှဝေထားသောကြောင့် ခေါက်သိမ်းခြင်းအကူးအပြောင်းအတန်းများကို ခေါက်သိမ်းထားသည်ကို တွေ့ရှိနိုင်သည် ။
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
အသုံးပြုမှု
ပြိုကျသောပလပ်အင်သည် လေးလံသော ရုတ်သိမ်းခြင်းကို ကိုင်တွယ်ရန် အတန်းအနည်းငယ်ကို အသုံးပြုသည်-
.collapse
အကြောင်းအရာကို ဝှက်ထားသည်။.collapse.show
အကြောင်းအရာကိုပြသသည်။.collapsing
အကူးအပြောင်းစတင်ချိန်တွင် ထည့်သွင်းပြီး ပြီးဆုံးသည့်အခါ ဖယ်ရှားသည်။
ဤအတန်းများကို တွင်တွေ့နိုင်ပါသည် _transitions.scss
။
ဒေတာဂုဏ်တော်များမှတဆင့်
data-bs-toggle="collapse"
တစ်ခု data-bs-target
သို့မဟုတ် တစ်ခုထက်ပိုသော ပြိုကျနိုင်သော ဒြပ်စင်များကို အလိုအလျောက် ထိန်းချုပ်သတ်မှတ်ရန် အစိတ်အပိုင်းသို့ ပေါင်းထည့်ရုံသာ ။ data-bs-target
ပြိုကျမှုကို အသုံးချရန် ရည်ညွှန်းချက်သည် CSS ရွေးချယ်မှုအား လက်ခံသည် ။ collapse
တွဲနိုင်သော အစိတ်အပိုင်းသို့ အတန်းကို ထည့်သွင်းရန် သေချာပါစေ ။ ၎င်းကို ပုံသေဖွင့်လိုပါက နောက်ထပ်အတန်းကို ထည့်ပါ show
။
အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ဧရိယာသို့ ထည့်ရန် ဒေတာရည်ညွှန်းချက်ကို ထည့်ပါ data-bs-parent="#selector"
။ လုပ်ဆောင်ချက်ကို ကြည့်ရန် ဒီမိုကို ကိုးကားပါ။
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
ရွေးချယ်စရာများ
ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-bs-
ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-bs-parent=""
။
နာမည် | ရိုက်ပါ။ | ပုံသေ | ဖော်ပြချက် |
---|---|---|---|
parent |
ရွေးချယ်သူ | jQuery object | DOM ဒြပ်စင် | false |
မိဘကို ပံ့ပိုးပေးမည်ဆိုပါက၊ သတ်မှတ်ထားသော အုပ်ထိန်းမှုအောက်ရှိ ပြိုကျနိုင်သော အစိတ်အပိုင်းအားလုံးကို ဤအရာအား ပြသသည့်အခါ ပိတ်သွားပါမည်။ card (ရိုးရာအကော်ဒီယံအမူအကျင့်နှင့်ဆင်တူသည် - ဤသည် လူတန်းစား အပေါ် မူတည်သည် ) ။ ရည်ညွှန်းချက်ကို ပစ်မှတ်ကို ခေါက်သိမ်းနိုင်သော ဧရိယာပေါ်တွင် သတ်မှတ်ရပါမည်။ |
toggle |
ဘူလီယံ | true |
ခေါ်ဆိုမှုတွင် တွဲနိုင်သော အစိတ်အပိုင်းကို ပြောင်းပေးသည်။ |
နည်းလမ်းများ
Asynchronous နည်းလမ်းများနှင့် အသွင်ကူးပြောင်းမှုများ
API နည်းလမ်းအားလုံးသည် အ ညီအမျှ ဖြစ်ပြီး အကူးအပြောင်း တစ်ခု စတင်သည် ။ အကူးအပြောင်းစတင်သည်နှင့် မပြီးဆုံးမီတွင် ၎င်းတို့သည် ခေါ်ဆိုသူထံသို့ ပြန်သွားကြသည် ။ ထို့အပြင်၊ transitioning component တစ်ခုပေါ်ရှိ method ခေါ်ဆိုမှုကို လျစ်လျူရှု ပါမည်။
နောက်ထပ်အချက်အလက်များအတွက် ကျွန်ုပ်တို့၏ JavaScript စာရွက်စာတမ်းကို ကြည့်ပါ ။
သင်၏အကြောင်းအရာကို ပေါင်းစပ်နိုင်သောဒြပ်စင်အဖြစ် အသက်သွင်းပါ။ စိတ်ကြိုက်ရွေးချယ်စရာများကို လက်ခံသည် object
။
ဥပမာအားဖြင့် constructor ဖြင့် ပြိုလဲမှုတစ်ခုကို ဖန်တီးနိုင်သည်။
var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
toggle: false
})
နည်းလမ်း | ဖော်ပြချက် |
---|---|
toggle |
ပြရန် သို့မဟုတ် ဝှက်ထားရန် ခေါက်နိုင်သော ဒြပ်စင်တစ်ခုကို ပြောင်းရန်။ ခေါက်သိမ်းနိုင်သောဒြပ်စင်ကို အမှန်တကယ်ပြသခြင်း သို့မဟုတ် ဝှက်ထားခြင်း မပြု မီ ခေါ်ဆိုသူထံ ပြန်လည်ရောက်ရှိ သည်shown.bs.collapse hidden.bs.collapse |
show |
တွဲနိုင်သောဒြပ်စင်ကို ပြသည်။ ခေါက်သိမ်းနိုင်သောဒြပ်စင်ကို အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံသို့ ပြန်လည်ရောက်ရှိသည် (ဥပမာ၊ shown.bs.collapse ဖြစ်ရပ်မဖြစ်ပွားမီ)။ |
hide |
ပြိုလဲနိုင်သော ဒြပ်စင်ကို ဝှက်ထားသည်။ ခေါက်သိမ်းနိုင်သောဒြပ်စင်ကို အမှန်တကယ်မဝှက်ထားမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဥပမာ၊ hidden.bs.collapse ဖြစ်ရပ်မဖြစ်ပေါ်မီ)။ |
dispose |
ဒြပ်စင်တစ်ခု၏ပြိုကျမှုကို ဖျက်ဆီးသည်။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်) |
getInstance |
DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသည့် ပြိုလဲမှုဖြစ်စဉ်ကို သင်ရနိုင်စေမည့် Static method ကို သင်ဤကဲ့သို့သုံးနိုင်သည်-bootstrap.Collapse.getInstance(element) |
getOrCreateInstance |
DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသည့် ပြိုကျမှုဖြစ်စဉ်ကို ပြန်ပေးသည့် သို့မဟုတ် ကနဦးမလုပ်ဆောင်ပါက အသစ်ဖန်တီးသည့် ကိန်းသေနည်းလမ်း။ သင်ဤကဲ့သို့အသုံးပြုနိုင်သည်။bootstrap.Collapse.getOrCreateInstance(element) |
အဲ့ဒါနဲ့
Bootstrap ၏ပြိုကျမှုအတန်းသည် ပြိုကျသည့်လုပ်ဆောင်နိုင်စွမ်းသို့ ချိတ်ဆက်ရန်အတွက် ဖြစ်ရပ်အချို့ကို ဖော်ထုတ်ပေးသည်။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.collapse |
show သာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင် ပါသည်။ |
shown.bs.collapse |
ပြိုကျသည့်ဒြပ်စင်ကို အသုံးပြုသူမြင်အောင်ပြုလုပ်ပြီးသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
hide.bs.collapse |
hide နည်းလမ်းကို ခေါ်လိုက် သောအခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖယ်ရှားသည်။ |
hidden.bs.collapse |
အသုံးပြုသူမှ ပြိုကျသည့်ဒြပ်စင်ကို ဝှက်ထားသောအခါ (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။ |
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
// do something...
})