အုပ်စုစာရင်း
စာရင်းအုပ်စုများသည် အကြောင်းအရာစီးရီးများကို ပြသရန်အတွက် ပြောင်းလွယ်ပြင်လွယ်နှင့် အားကောင်းသည့် အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ အတွင်းရှိ မည်သည့်အကြောင်းအရာကိုမဆို ပံ့ပိုးနိုင်စေရန် ၎င်းတို့ကို ပြင်ဆင်ပြီး တိုးချဲ့ပါ။
အခြေခံဥပမာ
အခြေခံအကျဆုံးစာရင်းအုပ်စုသည် စာရင်းမ၀င်သောစာရင်းများနှင့် သင့်လျော်သောအတန်းများပါရှိသည်။ ၎င်းကို လိုက်နာသော ရွေးချယ်မှုများဖြင့် သို့မဟုတ် လိုအပ်သလို သင့်ကိုယ်ပိုင် CSS ဖြင့် တည်ဆောက်ပါ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
တက်ကြွသောအရာများ
လက်ရှိအသက်ဝင်နေသောရွေးချယ်မှုကိုညွှန်ပြရန် .active
a သို့ ထည့်ပါ ။.list-group-item
- အသက်ဝင်သော အရာတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
မသန်စွမ်းသောအရာများ
ပိတ်ထား ပုံပေါ် စေရန် .disabled
a သို့ ထည့်ပါ ။ ၎င်းတို့ ပါရှိသော အချို့သောဒြပ်စင် များသည် ၎င်းတို့၏ကလစ်ဖြစ်ရပ်များ (ဥပမာ၊ လင့်ခ်များ) ကို အပြည့်အဝပိတ်ရန် စိတ်ကြိုက် JavaScript ကိုလည်း လိုအပ်မည်ဖြစ်ကြောင်း သတိပြုပါ။.list-group-item
.disabled
- မသန်စွမ်းသည့်အရာ
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
လင့်များနှင့် ခလုတ်များ
ပေါင်းထည့်ခြင်းဖြင့် လုပ်ဆောင် နိုင်သော စာရင်းအဖွဲ့အရာများကို ဖန်တီးရန် <a>
s သို့မဟုတ် s ကို အသုံးပြု ပါ ။ အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသောဒြပ်စင်များ (s သို့မဟုတ် s ကဲ့သို့သော) စာရင်းအုပ်စုများ ( s သို့မဟုတ် s ကဲ့သို့) ကလစ်တစ်ခု သို့မဟုတ် နှိပ်ခြင်းတို့ကို ပံ့ပိုးပေးခြင်းမရှိကြောင်း သေချာစေရန်အတွက် ကျွန်ုပ်တို့သည် ဤ pseudo-အတန်းအစားများကို ခွဲခြားထားသည် ။<button>
.list-group-item-action
<li>
<div>
ဤနေရာတွင် စံအတန်းများကို အသုံးမပြုရန်.btn
သေချာ ပါစေ ။
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
<button>
s ဖြင့်၊ သင်သည် class အစား disabled
attribute ကို အသုံးပြုနိုင်သည်။ .disabled
ဝမ်းနည်းစရာမှာ၊ <a>
s သည် disabled attribute ကို မပံ့ပိုးပါ။
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
ရေဆွဲချ
.list-group-flush
ပင်မကွန်တိန်နာတစ်ခုရှိ ဘောင်မှအစွန်းအချို့နှင့် လုံးဝန်းသောထောင့်များကို ဖယ်ရှားရန် ပေါင်းထည့်ပါ ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
- ပဉ္စမ တစ်ခု
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
အလျားလိုက်
.list-group-horizontal
ခွဲထွက်မှတ်များအားလုံးတွင် ဒေါင်လိုက်မှ အလျားလိုက်သို့ စာရင်းအုပ်စုအရာများ၏ အပြင်အဆင်ကို ပြောင်းရန် ထည့်ပါ ။ .list-group-horizontal-{sm|md|lg|xl}
တနည်းအားဖြင့်၊ ထို breakpoint မှစတင်၍ စာရင်းအုပ်စုကို အလျားလိုက်ပြုလုပ်ရန် တုံ့ပြန်မှုမျိုးကွဲတစ်ခုကို ရွေး ပါ min-width
။ လောလောဆယ် အလျားလိုက် စာရင်းအုပ်စုများကို flush list အုပ်စုများနှင့် ပေါင်းစပ်၍မရပါ။
ProTip- အလျားလိုက်ရှိသည့်အခါ မျဥ်းအကျယ် တူညီသောစာရင်းအုပ်စုအရာများကို လိုချင်ပါသလား။ .flex-fill
စာရင်းအုပ်စုတစ်ခုစီသို့ ထည့်ပါ ။
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
- ပစ္စည်းတစ်ခု
- ဒုတိယအချက်
- တတိယအချက်
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
ဆက်စပ်အတန်းများ
ပြည်နယ်အလိုက် နောက်ခံနှင့် အရောင်ရှိသော အရာများစာရင်းကို ပုံစံဖော်ရန် ဆက်စပ်အတန်းများကို အသုံးပြုပါ။
- ရိုးရှင်းသော ပုံသေစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော ပင်မစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော သာမညစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော အောင်မြင်မှုစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော အန္တရာယ်စာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသောသတိပေးချက်စာရင်းအုပ်စုအကြောင်းအရာ
- ရိုးရှင်းသောအချက်အလက်စာရင်းအုပ်စုအကြောင်းအရာ
- ရိုးရှင်းသော အလင်းစာရင်းအုပ်စု အကြောင်းအရာ
- ရိုးရှင်းသော မှောင်မိုက်စာရင်းအုပ်စု အကြောင်းအရာ
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Contextual classes တွေနဲ့လည်း အလုပ်လုပ်ပါတယ် .list-group-item-action
။ ယခင်နမူနာတွင် မပါရှိဘဲ ဤနေရာတွင် ပျံဝဲစတိုင်များ ထပ်တိုးခြင်းကို သတိပြုပါ။ နိုင်ငံတော် ကိုလည်း ထောက်ပံ့သည် .active
။ ဆက်စပ်သောစာရင်းအုပ်စုအကြောင်းအရာတစ်ခုတွင် အသက်ဝင်သောရွေးချယ်မှုကိုညွှန်ပြရန် ၎င်းကိုအသုံးပြုပါ။
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။
အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ဥပမာ မြင်နိုင်သော စာသား) သို့မဟုတ် .sr-only
အတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။
တံဆိပ်များနှင့်
အချို့သော အသုံးအဆောင် များ၏အကူအညီဖြင့် မဖတ်ရသေးသော အရေအတွက်များ၊ လုပ်ဆောင်ချက်နှင့် အခြားအရာများကို ပြသရန် မည်သည့်စာရင်းအုပ်စုတွင်မဆို တံဆိပ်များထည့်ပါ ။
- စာရင်းတစ်ခု၁၄
- ဒုတိယစာရင်းတစ်ခု၂
- တတိယစာရင်း၁
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
စိတ်ကြိုက်အကြောင်းအရာ
flexbox utilities များ၏အကူအညီဖြင့် အောက်ဖော်ပြပါကဲ့သို့ လင့်ခ်ချိတ်ထားသော စာရင်းအုပ်စုများအတွက်ပင် အတွင်း၌ မည်သည့် HTML မဆို ထည့်ပါ ။
အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ အသေးလေးတွေ ပုံနှိပ်တယ်။အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ တစ်ချို့က အသံတိတ်ထားတဲ့ ပုံနှိပ်လေးတွေရှိတယ်။အုပ်စုအကြောင်းအရာခေါင်းစဉ်ကို စာရင်းပြုစုပါ။
လွန်ခဲ့တဲ့ ၃ ရက်စာပိုဒ်တစ်ခုတွင် နေရာယူထားသည့် အကြောင်းအရာအချို့။
ပြီးတော့ တစ်ချို့က အသံတိတ်ထားတဲ့ ပုံနှိပ်လေးတွေရှိတယ်။<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
JavaScript အပြုအမူ
တဘ် JavaScript ပလပ်အင်ကို သုံးပါ—၎င်းကို တစ်ဦးချင်း သို့မဟုတ် စုစည်းထားသော bootstrap.js
ဖိုင်မှတစ်ဆင့်—ဒေသခံအကြောင်းအရာ၏ တက်ဘ်စားနိုင်သော အကန့်များကို ဖန်တီးရန် ကျွန်ုပ်တို့၏စာရင်းအုပ်စုကို တိုးချဲ့ရန်။
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
ဒေတာ attribute ကိုအသုံးပြုခြင်း။
data-toggle="list"
ရိုးရှင်းစွာသတ်မှတ်ခြင်း သို့မဟုတ် ဒြပ်စင်တစ်ခုပေါ်တွင် JavaScript ကိုမရေးဘဲ စာရင်းအုပ်စုလမ်းညွှန်ခြင်းကို သင်အသက်သွင်းနိုင်သည် ။ ဤဒေတာ attribute များကို အသုံးပြုပါ .list-group-item
။
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
JavaScript မှတဆင့်
JavaScript မှတဆင့် tabbable list item ကိုဖွင့်ပါ (စာရင်းအကြောင်းအရာတစ်ခုစီကို တစ်ဦးချင်းစီ activate လုပ်ရန် လိုအပ်သည်-
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
တစ်ဦးချင်းစီစာရင်းအကြောင်းအရာကို နည်းလမ်းများစွာဖြင့် အသက်သွင်းနိုင်သည်-
$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab
အရောင်မှိန်စေတယ်။
တဘ်အကန့်ကို မှိန်သွားစေရန်၊ .fade
တစ်ခုစီသို့ ထည့်ပါ .tab-pane
။ ပထမတဘ်အက .show
န့်သည် ကနဦးအကြောင်းအရာကို မြင်နိုင်စေရန်လည်း လိုအပ်သည်။
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
နည်းလမ်းများ
$().တက်ဘ်
စာရင်းအကြောင်းအရာ အစိတ်အပိုင်းနှင့် အကြောင်းအရာ ကွန်တိန်နာကို အသက်သွင်းသည်။ တဘ် တွင် DOM တွင် ကွန်တိန်နာ node တစ်ခု data-target
သို့မဟုတ် ပစ်မှတ်တစ်ခု ရှိသင့်သည်။href
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
$(function () {
$('#myList a:last-child').tab('show')
})
</script>
.tab('ရှိုး')
ပေးထားသောစာရင်းကို ရွေးပြီး ၎င်း၏ဆက်စပ်အကန့်ကို ပြသည်။ ယခင်က ရွေးချယ်ထားသည့် အခြားစာရင်းပါ အရာများကို ရွေးချယ်ထားခြင်း မရှိတော့ဘဲ ၎င်း၏ ဆက်စပ်အကန့်ကို ဝှက်ထားသည်။ တက်ဘ်အကန့်ကို အမှန်တကယ်မပြသမီ ခေါ်ဆိုသူထံ ပြန်သွားသည် (ဥပမာ၊ shown.bs.tab
ပွဲမဖြစ်ပွားမီ)။
$('#someListItem').tab('show')
အဲ့ဒါနဲ့
တက်ဘ်အသစ်တစ်ခုကို ပြသသောအခါ၊ အဖြစ်အပျက်များသည် အောက်ပါအစီအစဉ်အတိုင်း မီးလောင်သွားသည်-
hide.bs.tab
(လက်ရှိသုံးနေသည့် တက်ဘ်ပေါ်တွင်)show.bs.tab
(ပြသမည့် tab တွင်)hidden.bs.tab
(ယခင်တက်ကြွသောတက်ဘ်တွင်၊hide.bs.tab
အစီအစဉ်နှင့်တူသည်)shown.bs.tab
(အသစ်စက်စက်ပြသထားသည့် တက်ဘ်ပေါ်တွင်၊show.bs.tab
ဖြစ်ရပ်အတွက်နှင့် တူညီသည်)
မည်သည့်တက်ဘ်မှ အသက်ဝင်နေပါက၊ hide.bs.tab
နှင့် hidden.bs.tab
အစီအစဉ်များကို အလုပ်ဖြုတ်မည်မဟုတ်ပါ။
ပွဲအမျိုးအစား | ဖော်ပြချက် |
---|---|
show.bs.tab | ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်၊ သို့သော် တက်ဘ်အသစ်ကို မပြသမီ။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.target ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget |
ပြထားသည်.bs.tab | တက်ဘ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် တက်ဘ်ရှိုးတွင် စတင်သည်။ တက်ကြွသောတက်ဘ်နှင့် ယခင်အသုံးပြုနေသော တက်ဘ် (ရနိုင်လျှင်) အသီးသီး ပစ်မှတ် event.target ကို အသုံးပြုပြီး ပစ်မှတ်ထားရန်။event.relatedTarget |
hide.bs.tab | တက်ဘ်အသစ်တစ်ခုကို ပြသသည့်အခါ ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဖျောက်ထားရပါမည်)။ လက်ရှိ အသုံးပြု နေသည့် တက်ဘ်နှင့် မကြာမီ-စတော့မည့်-အသက်ဝင်မည့် တက်ဘ်အသစ်ကို အသီးသီး ပစ်မှတ်ထားပြီး event.target အသုံးပြု ပါ။event.relatedTarget |
hidden.bs.tab | တက်ဘ်အသစ်တစ်ခုကို ပြသပြီးနောက် ဤဖြစ်ရပ်သည် မီးလောင်သွားသည် (ထို့ကြောင့် ယခင်အသုံးပြုနေသည့် တက်ဘ်ကို ဝှက်ထားသည်)။ ယခင် အသုံးပြု event.target နေ event.relatedTarget သည့် တက်ဘ်နှင့် တက်ကြွသောတက်ဘ်အသစ်ကို အသီးသီးပစ်မှတ်ထားရန် အသုံးပြုပါ။ |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})