Bootstrap 下拉選單和滾動監聽（Scrollspy）外掛
阿新 • • 發佈：2019-01-31
一、下拉選單外掛
切換下拉選單（Dropdown）外掛的隱藏內容：（1）通過 data 屬性：向連結或按鈕新增 data-toggle="dropdown" 來切換下拉選單：
<div class="dropdown">
<a data-toggle="dropdown" href="#">下拉選單（Dropdown）觸發器</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
</ul>
</div>$('.dropdown-toggle').dropdown()
二、滾動監聽（Scrollspy）外掛
滾動監聽（Scrollspy）外掛，即自動更新導航外掛，會根據滾動條的位置自動更新對應的導航目標。其基本的實現是隨著您的滾動，基於滾動條的位置嚮導航欄新增 .active class
1. 用法
向頂部導航新增滾動監聽行為：
（1）通過 data 屬性：向您想要監聽的元素（通常是 body）新增 data-spy="scroll"。然後新增帶有 Bootstrap .nav 元件的父元素的 ID 或 class 的屬性 data-target。
（2）通過 JavaScript：可以通過 JavaScript 呼叫滾動監聽，選取要監聽的元素，然後呼叫 .scrollspy() 函式：<body data-spy="scroll" data-target=".navbar-example"> ... <div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul> </div> ... </body>
$('body').scrollspy({ target: '.navbar-example' })
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切換導航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名稱</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav> <div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <h4 id="ios">iOS</h4> <p>iOS 是一個由蘋果公司開發和釋出的手機作業系統。最初是於 2007 年首次釋出 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它們共享 Darwin 基礎。OS X 作業系統是用在蘋果電腦上，iOS 是蘋果的移動版本。 </p> <h4 id="svn">SVN</h4> <p>Apache Subversion，通常縮寫為 SVN，是一款開源的版本控制系統軟體。Subversion 由 CollabNet 公司在 2000 年建立。但是現在它已經發展為 Apache Software Foundation 的一個專案，因此擁有豐富的開發人員和使用者社群。 </p> <h4 id="jmeter">jMeter</h4> <p>jMeter 是一款開源的測試軟體。它是 100% 純 Java 應用程式，用於負載和效能測試。 </p> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一個建立高度可擴充套件性和強大企業級應用程式的開發架構，部署在相容應用程式伺服器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> <h4 id="spring">Spring</h4> <p>Spring 框架是一個開源的 Java 平臺，為快速開發功能強大的 Java 應用程式提供了完備的基礎設施支援。 </p> <p>Spring 框架最初是由 Rod Johnson 編寫的，在 2003 年 6 月首次釋出於 Apache 2.0 許可證下。 </p> </div>
注：data-offset 為當計算滾動位置時，距離頂部的偏移畫素。
2. 方法
.scrollspy('refresh')：當通過 JavaScript 呼叫 scrollspy 方法時，通過呼叫 .refresh 方法來更新 DOM。
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})| 事件 | 描述 | 例項 |
|---|---|---|
| activate.bs.scrollspy | 每當一個新專案被滾動監聽啟用時，觸發該事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// 執行一些動作...
})
|