Bootstrap JS Dropdown
JS Dropdown (dropdown.js)
'n Aftrekkieslys is 'n wisselbare kieslys wat die gebruiker toelaat om een waarde uit 'n voorafbepaalde lys te kies.
Vir 'n tutoriaal oor Dropdowns, lees ons Bootstrap Dropdowns Tutoriaal .
Die dropdown-inpropklasse
| 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 |
Via data-* Kenmerke
Voeg data-toggle="dropdown"by 'n skakel of 'n knoppie om 'n aftreklys te wissel.
Voorbeeld
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Via JavaScript
Aktiveer handmatig met:
Voorbeeld
$('.dropdown-toggle').dropdown();
Let wel: Die data-toggle="dropdown" kenmerk word vereis, ongeag of jy die dropdown() metode noem.
Aftreklys opsies
| None |
Aftrekmetodes
Die volgende tabel lys alle beskikbare aftrekmetodes.
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the dropdown |
Aftrek-gebeurtenisse
Die volgende tabel lys alle beskikbare aftreklysgebeurtenisse.
| 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) |
Wenk: Gebruik jQuery se event.relatedTarget om die element te kry wat die aftreklys geaktiveer het:
Voorbeeld
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
Meer voorbeelde
Verander die karetikoon na onderstebo
Die volgende voorbeeld verander die karetikoon van afwaarts na bo wys wanneer op die aftreklys geklik word:
Voorbeeld
/* 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>
Navbalk met aftreklys
Die volgende voorbeeld voeg 'n aftreklys vir 'n knoppie in die navigasiebalk by:
Voorbeeld
<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>
Die volgende voorbeeld voeg 'n aftreklys by met 'n aanmeldvorm in die navigasiebalk:
Voorbeeld
<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
In hierdie voorbeeld gebruik ons jQuery om multi-vlak dropdowns oop te maak wanneer jy klik:
Voorbeeld
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
In hierdie voorbeeld het ons 'n pasgemaakte .dropdown-submenuklas vir multi-vlak aftreklys geskep:
Voorbeeld
/* 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>