Bootstrap JS ကို ခေါက်သိမ်းပါ။
JS ခေါက်သိမ်းခြင်း (collapse.js)
အကော်ဒီယံနှင့် လမ်းကြောင်းပြခြင်းကဲ့သို့ ခေါက်နိုင်သော အစိတ်အပိုင်းများအတွက် အခြေခံစတိုင်များနှင့် လိုက်လျောညီထွေရှိသော ပံ့ပိုးမှုရယူပါ။
ပလပ်အင် မှီခိုမှု- ခေါက်သိမ်းမှုသည် သင်၏ Bootstrap ဗားရှင်းတွင် ထည့်သွင်းရန် အကူးအပြောင်း ပလပ်အင် လိုအပ်သည်။
Collapsibles အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap ခေါက်သိမ်းမှု ကျူတိုရီရယ် ကို ဖတ်ရှုပါ ။
အဆိုပါ Plugin အတန်းများကို ခေါက်သိမ်းပါ။
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
data-* Attributes မှတဆင့်
ပြိုလဲနိုင်သော ဒြပ်စင်ကို အလိုအလျောက် သတ်မှတ်ပေးရန်အတွက် data-toggle="collapse" နှင့် data-target ကို ဒြပ်စင်သို့ ပေါင်းထည့်လိုက်ပါ။ data-target attribute သည် ပြိုကျမှုကို အသုံးချရန် CSS ရွေးချယ်မှုတစ်ခုကို လက်ခံသည်။ အတန်းပြိုကျခြင်းကို ခေါက်နိုင်သောဒြပ်စင်သို့ ထည့်သွင်းရန် သေချာပါစေ။ ၎င်းကို ပုံသေဖွင့်လိုလျှင် နောက်ထပ်အတန်းကို ထပ်ထည့်ပါ။
ဥပမာ
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
အကြံပြုချက်- အကော်ဒီယံကဲ့သို့ အုပ်စုစီမံခန့်ခွဲမှုကို ပေါင်းစပ်နိုင်သော ထိန်းချုပ်မှုတစ်ခုတွင် ထည့်သွင်းရန်၊ ဒေတာ attribute data-parent="#selector" ကို ထည့်ပါ။
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
$('.collapse').collapse()
ရွေးချယ်မှုများကို ခေါက်သိမ်းပါ။
ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-parent="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
ခေါက်သိမ်းနည်းများ
အောက်ပါဇယားတွင် ရရှိနိုင်သော ပြိုကျမှုနည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
အစီအစဉ်များကို ခေါက်သိမ်းပါ။
အောက်ပါဇယားတွင် ရရှိနိုင်သော ပြိုကျသည့်ဖြစ်ရပ်များအားလုံးကို စာရင်းပြုစုထားသည်။
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
နောက်ထပ် ဥပမာများ
ရိုးရှင်းသော Collapsible
အောက်ဖော်ပြပါ ဥပမာသည် အခြားဒြပ်စင်တစ်ခု၏ ချဲ့ထွင်မှုနှင့် ပြိုကျနေသော အကြောင်းအရာကို ခလုတ်တစ်ခု ပြုလုပ်သည်-
ဥပမာ
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">
Simple collapsible
</button>
<div id="demo" class="collapse in">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div>
Collapsible Panel
အောက်ဖော်ပြပါ ဥပမာသည် ခေါက်သိမ်းနိုင်သော အကန့်ကို ပြသည်-
ဥပမာ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
စုစည်းနိုင်သော စာရင်းအုပ်စု
အောက်ဖော်ပြပါသည် အတွင်းတွင် စာရင်းအုပ်စုတစ်ခုပါရှိသော ခေါက်နိုင်သော အကန့်တစ်ခုကို ပြသည်-
ဥပမာ
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
ဘာဂျာ
အောက်ဖော်ပြပါ ဥပမာသည် အကန့်အစိတ်အပိုင်းကို တိုးချဲ့ခြင်းဖြင့် ရိုးရိုးကော်ဒီယံကို ပြသသည်-
မှတ်ချက်-data-parent သတ်မှတ်ထားသော အုပ်ထိန်းမှုအောက်ရှိ ပြိုကျနိုင်သော အစိတ်အပိုင်းများအားလုံးကို ခေါက်သိမ်းနိုင်သည့်အရာများထဲမှ တစ်ခုကို ပြသသည့်အခါ ရည်ညွှန်းချက်သည် ပိတ်သွားမည်ဖြစ်ကြောင်း သေချာစေသည် ။
ဥပမာ
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
အိုင်ကွန်နှင့် စာသားခလုတ်ကို ချဲ့ပြီး ခေါက်သိမ်းပါ။
အောက်ဖော်ပြပါ ဥပမာသည် ခေါက်နိုင်သော အကြောင်းအရာကို ဖွင့်ခြင်းနှင့် ပိတ်သည့်အခါ အဖွင့်/ပိတ် စာသားနှင့် အိုင်ကွန်ကို ပြောင်းလဲသည်-
ဥပမာ
$(document).ready(function(){
$("#demo").on("hide.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span class="glyphicon glyphicon-collapse-up"></span> Close');
});
});
သို့မဟုတ် သင်သည် CSS ကိုသုံးနိုင်သည်။
ဥပမာ
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content is hidden */
.btn.collapsed:after {
content: "\e080";
}