Bootstrap - ปลั๊กอินแบบเลื่อนลง
การใช้ปลั๊กอินแบบเลื่อนลงคุณสามารถเพิ่มเมนูแบบเลื่อนลงให้กับส่วนประกอบใด ๆ เช่นแถบนำทางแท็บยาเม็ดและปุ่ม
หากคุณต้องการรวมฟังก์ชันปลั๊กอินนี้แยกกันคุณจะต้องมี dropdown.js. อื่น ๆ ตามที่กล่าวไว้ในบท Bootstrap ปลั๊กอินภาพรวมคุณสามารถรวม bootstrap.jsหรือลดขนาดลง bootstrap.min.js
การใช้งาน
คุณสามารถสลับเนื้อหาที่ซ่อนอยู่ของปลั๊กอินแบบเลื่อนลง -
Via data attributes - เพิ่ม data-toggle = "dropdown" ไปยังลิงค์หรือปุ่มเพื่อสลับเมนูแบบเลื่อนลงตามที่แสดงด้านล่าง -
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
หากคุณต้องการให้ลิงก์อยู่ในสภาพสมบูรณ์ (ซึ่งมีประโยชน์หากเบราว์เซอร์ไม่ได้เปิดใช้งาน JavaScript) ให้ใช้ไฟล์ data-target แอตทริบิวต์แทน 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 ให้ใช้วิธีการต่อไปนี้ -
$('.dropdown-toggle').dropdown()
ตัวอย่าง
Within Navbar
ตัวอย่างต่อไปนี้สาธิตการใช้งานเมนูแบบเลื่อนลงภายใน navbar -
<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
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเมนูแบบเลื่อนลงภายในแท็บ -
<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>
ตัวเลือก
ไม่มีตัวเลือกใด ๆ
วิธีการ
การสลับแบบเลื่อนลงมีวิธีง่ายๆในการแสดงหรือซ่อนรายการแบบเลื่อนลง
$().dropdown('toggle')
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้วิธีปลั๊กอินแบบเลื่อนลง
<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>