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>
(2)通過 JavaScript:通過 JavaScript 呼叫下拉選單切換:$('.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')
})
3. 事件事件 | 描述 | 例項 |
---|---|---|
activate.bs.scrollspy | 每當一個新專案被滾動監聽啟用時,觸發該事件。 |
$('#myScrollspy').on('activate.bs.scrollspy', function () { // 執行一些動作... }) |