Bootstrap - Açılır Eklenti
Açılır menü eklentisini kullanarak gezinti çubukları, sekmeler, haplar ve düğmeler gibi herhangi bir bileşene açılır menüler ekleyebilirsiniz.
Bu eklenti işlevini ayrı ayrı dahil etmek istiyorsanız, ihtiyacınız olacak dropdown.js. Aksi takdirde, Bootstrap Eklentilerine Genel Bakış bölümünde belirtildiği gibi , bootstrap.js veya küçültülmüş bootstrap.min.js'yi dahil edebilirsiniz .
Kullanım
Açılır eklentinin gizli içeriğini değiştirebilirsiniz -
Via data attributes - Ekle data-toggle = "dropdown" aşağıda gösterildiği gibi bir açılır listeyi değiştirmek için bir bağlantıya veya düğmeye -
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
Bağlantıları sağlam tutmanız gerekiyorsa (bu, tarayıcı JavaScript'i etkinleştirmiyorsa kullanışlıdır), data-target yerine öznitelik href = "#"-
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
Via JavaScript - JavaScript aracılığıyla açılır geçişi çağırmak için aşağıdaki yöntemi kullanın -
$('.dropdown-toggle').dropdown()
Misal
Within Navbar
Aşağıdaki örnek, bir gezinme çubuğu içindeki açılır menünün kullanımını göstermektedir -
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Within Tabs
Aşağıdaki örnek, sekmelerdeki açılır menünün kullanımını göstermektedir -
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>
Seçenekler
Seçenek yok.
Yöntemler
Açılır menü geçişinin, açılır menüyü göstermek veya gizlemek için basit bir yöntemi vardır.
$().dropdown('toggle')
Misal
Aşağıdaki örnek, açılır eklenti yönteminin kullanımını göstermektedir.
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div id = "myexample">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a id = "action-1" href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>