Bootstrap JS Dropdown
JS Dropdown (dropdown.js)
dropdown menu သည် အသုံးပြုသူအား ကြိုတင်သတ်မှတ်ထားသောစာရင်းမှ တန်ဖိုးတစ်ခုကို ရွေးချယ်နိုင်စေမည့် ခလုတ်နှိပ်နိုင်သော မီနူးတစ်ခုဖြစ်သည်။
Dropdowns အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Dropdowns Tutorial ကို ဖတ်ရှုပါ ။
Dropdown Plugin အတန်းများ
| Class | Description | Example |
|---|---|---|
| .dropdown | Indicates a dropdown menu | |
| .dropdown-menu | Builds the dropdown menu | |
| .dropdown-menu-right | Right-aligns a dropdown menu | |
| .dropdown-header | Adds a header inside the dropdown menu | |
| .dropup | Indicates a dropup menu | |
| .disabled | Disables an item in the dropdown menu | |
| .divider | Separates items inside the dropdown menu with a horizontal line |
data-* Attributes မှတဆင့်
data-toggle="dropdown"dropdown menu ကိုပြောင်းရန် လင့်ခ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခုသို့ ထည့်ပါ ။
ဥပမာ
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
ဥပမာ
$('.dropdown-toggle').dropdown();
မှတ်ချက်- သင် dropdown() နည်းလမ်းကို ခေါ်သည်ဖြစ်စေ data-toggle="dropdown" attribute လိုအပ်ပါသည်။
Dropdown ရွေးစရာများ
| None |
ဆွဲချနည်းများ
အောက်ဖော်ပြပါဇယားတွင် ရရှိနိုင်သော dropdown နည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown |
ဆွဲချပွဲများ
အောက်ဖော်ပြပါ ဇယားတွင် ရရှိနိုင်သော dropdown အစီအစဉ်များအားလုံးကို စာရင်းပြုစုထားသည်။
| Event | Description | Try it |
|---|---|---|
| show.bs.dropdown | Occurs when the dropdown is about to be shown. | |
| shown.bs.dropdown | Occurs when the dropdown is fully shown (after CSS transitions have completed) | |
| hide.bs.dropdown | Occurs when the dropdown is about to be hidden | |
| hidden.bs.dropdown | Occurs when the dropdown is fully hidden (after CSS transitions have completed) |
အကြံပြုချက်- dropdown ကို အစပျိုးသည့် ဒြပ်စင်ကို ရယူရန် jQuery ၏ event.relatedTarget ကို အသုံးပြုပါ-
ဥပမာ
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
နောက်ထပ် ဥပမာများ
ဇောက်ထိုးပြောင်းရန် caret သင်္ကေတကို ပြောင်းပါ။
အောက်ဖော်ပြပါ ဥပမာသည် dropdown ကို နှိပ်သည့်အခါ အောက်ဘက်သို့ ညွှန်ပြခြင်းမှ အထက်သို့ ပြောင်းသည်-
ဥပမာ
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown", function(){
$(".btn").html('Dropdown <span class="caret caret-up"></span>');
});
});
</script>
Dropdown ဖြင့် Navbar
အောက်ဖော်ပြပါ ဥပမာသည် လမ်းညွှန်ဘားရှိ ခလုတ်တစ်ခုအတွက် dropdown menu ကို ပေါင်းထည့်သည်-
ဥပမာ
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
အောက်ဖော်ပြပါ ဥပမာသည် navbar တွင် လော့ဂ်အင်ဖောင်တစ်ခုဖြင့် dropdown menu တစ်ခုကို ပေါင်းထည့်သည်-
ဥပမာ
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
<div class="dropdown-menu">
<form id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul>
Multi-Level Dropdowns
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ကလစ်ပေါ်တွင် အဆင့်များစွာသော dropdowns များကိုဖွင့်ရန် jQuery ကိုအသုံးပြုသည်-
ဥပမာ
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
ဤဥပမာတွင်၊ .dropdown-submenuအဆင့်များစွာသော dropdowns များအတွက် စိတ်ကြိုက်အတန်းတစ်ခုကို ဖန်တီးထားပါသည်။
ဥပမာ
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>