बूटस्ट्रैप जे एस ड्रॉपडाउन
जेएस ड्रॉपडाउन (ड्रॉपडाउन.जेएस)
ड्रॉपडाउन मेनू एक टॉगल करने योग्य मेनू है जो उपयोगकर्ता को पूर्वनिर्धारित सूची से एक मान चुनने की अनुमति देता है।
ड्रॉपडाउन के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप ड्रॉपडाउन ट्यूटोरियल पढ़ें ।
ड्रॉपडाउन प्लगइन क्लासेस
| 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-toggle="dropdown"किसी ड्रॉपडाउन मेनू को चालू करने के लिए किसी लिंक या बटन में जोड़ें ।
उदाहरण
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
$('.dropdown-toggle').dropdown();
नोट: डेटा-टॉगल = "ड्रॉपडाउन" विशेषता आवश्यक है, भले ही आप ड्रॉपडाउन () विधि को कॉल करें या नहीं।
ड्रॉपडाउन विकल्प
| None |
ड्रॉपडाउन तरीके
निम्न तालिका सभी उपलब्ध ड्रॉपडाउन विधियों को सूचीबद्ध करती है।
| Method | Description | Try it |
|---|---|---|
| .dropdown("toggle") | Toggles the 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) |
युक्ति: ड्रॉपडाउन ट्रिगर करने वाले तत्व को प्राप्त करने के लिए jQuery के event .संबंधित लक्ष्य का उपयोग करें:
उदाहरण
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
});
और ज्यादा उदाहरण
कैरेट आइकन को उल्टा में बदलें
निम्न उदाहरण ड्रॉपडाउन पर क्लिक करने पर कैरेट आइकन को नीचे की ओर इंगित करने से ऊपर की ओर बदलता है:
उदाहरण
/* 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>
ड्रॉपडाउन के साथ नेवबार
निम्न उदाहरण नेविगेशन बार में एक बटन के लिए एक ड्रॉपडाउन मेनू जोड़ता है:
उदाहरण
<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>
निम्न उदाहरण नेवबार में लॉगिन फॉर्म के साथ एक ड्रॉपडाउन मेनू जोड़ता है:
उदाहरण
<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>
बहु-स्तरीय ड्रॉपडाउन
इस उदाहरण में, हम क्लिक पर बहु-स्तरीय ड्रॉपडाउन खोलने के लिए jQuery का उपयोग करते हैं:
उदाहरण
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
इस उदाहरण में, हमने .dropdown-submenuबहु-स्तरीय ड्रॉपडाउन के लिए एक कस्टम वर्ग बनाया है:
उदाहरण
/* 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>