JS ochiluvchi menyu (dropdown)
JS Dropdown (dropdown.js)
Ochiluvchi menyu — foydalanuvchiga oldindan belgilangan ro‘yxatdan bitta qiymatni tanlash imkonini beruvchi, ochib-yopiladigan menyu.
Ochiluvchi menyular bo‘yicha darslik uchun Bootstrap ochiluvchi menyular darsligimizni o‘qing.
Dropdown plagini klasslari
| Klass | Tavsif | Misol |
|---|---|---|
| .dropdown | Ochiluvchi menyuni bildiradi | Sinab ko‘ring |
| .dropdown-menu | Ochiluvchi menyuni hosil qiladi | Sinab ko‘ring |
| .dropdown-menu-right | Ochiluvchi menyuni o‘ng tomonga tekislaydi | Sinab ko‘ring |
| .dropdown-header | Ochiluvchi menyu ichiga sarlavha qo‘shadi | Sinab ko‘ring |
| .dropup | Yuqoriga ochiluvchi (dropup) menyuni bildiradi | Sinab ko‘ring |
| .disabled | Ochiluvchi menyudagi elementni nofaol qiladi | Sinab ko‘ring |
| .divider | Ochiluvchi menyu ichidagi elementlarni gorizontal chiziq bilan ajratadi | Sinab ko‘ring |
data-* atributlari orqali
Ochiluvchi menyuni ochish-yopish uchun havola yoki tugmaga data-toggle="dropdown" ni qo‘shing.
Misol
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
O‘zingiz sinab ko‘ring »
JavaScript orqali
Qo‘lda quyidagicha yoqing:
Eslatma: dropdown() metodini chaqirasizmi yoki yo‘qmi, qat’i nazar, data-toggle="dropdown" atributi majburiy.
Dropdown parametrlari
| Yo‘q |
Dropdown metodlari
Quyidagi jadvalda barcha mavjud dropdown metodlari keltirilgan.
| Metod | Tavsif | Sinab ko‘ring |
|---|---|---|
| .dropdown("toggle") | Ochiluvchi menyuni ochadi yoki yopadi (toggle) | Sinab ko‘ring |
Dropdown hodisalari
Quyidagi jadvalda barcha mavjud dropdown hodisalari keltirilgan.
| Hodisa | Tavsif | Sinab ko‘ring |
|---|---|---|
| show.bs.dropdown | Ochiluvchi menyu ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi. | Sinab ko‘ring |
| shown.bs.dropdown | Ochiluvchi menyu to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
| hide.bs.dropdown | Ochiluvchi menyu yashirilish arafasida bo‘lganda sodir bo‘ladi | Sinab ko‘ring |
| hidden.bs.dropdown | Ochiluvchi menyu to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) | Sinab ko‘ring |
Maslahat: Ochiluvchi menyuni ishga tushirgan elementni olish uchun jQuery’ning event.relatedTarget xususiyatidan foydalaning:
Misol
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
O‘zingiz sinab ko‘ring »
Ko‘proq misollar
Uchburchak (caret) belgisini teskari aylantirish
Quyidagi misolda ochiluvchi menyu bosilganda uchburchak (caret) belgisi pastga yo‘nalgan holatdan yuqoriga yo‘nalgan holatga o‘zgaradi:
Misol
/* 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>
O‘zingiz sinab ko‘ring »
Ochiluvchi menyuli navigatsiya paneli
Quyidagi misolda navigatsiya panelidagi tugma uchun ochiluvchi menyu qo‘shiladi:
Misol
<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>
O‘zingiz sinab ko‘ring »
Quyidagi misolda navigatsiya paneliga kirish formasi joylashgan ochiluvchi menyu qo‘shiladi:
Misol
<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>
O‘zingiz sinab ko‘ring »
Ko‘p darajali ochiluvchi menyular
Ushbu misolda ko‘p darajali ochiluvchi menyularni bosish orqali ochish uchun jQuery’dan foydalanamiz:
Misol
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
O‘zingiz sinab ko‘ring »
Ushbu misolda ko‘p darajali ochiluvchi menyular uchun maxsus .dropdown-submenu klassini yaratdik:
Misol
/* 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>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!