bootstrap滾動監聽
阿新 • • 發佈：2018-12-30
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>XXX</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> <link rel="stylesheet" href="css/main.css"> <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <nav id="nav1" class="navbar navbar-default"> <div class="container-fluid"> <a href="#" class="navbar-brand">web開發</a> <ul class="nav navbar-nav"> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrop</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown"> Javascript<span class="caret"></span> <ul class="dropdown-menu"> <li><a href="#jquery">jquery</a></li> <li><a href="#yui">YUI</a></li> <li><a href="#extjs">Extjs</a></li> </ul> </a> </li> </ul> </div> </nav> <nav id="nav2" class="navbar navbar-default"> <div class="container-fluid"> <a href="#" class="navbar-brand">web開發</a> <ul class="nav navbar-nav"> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrop</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown"> Javascript<span class="caret"></span> <ul class="dropdown-menu"> <li><a href="#jquery">jquery</a></li> <li><a href="#yui">YUI</a></li> <li><a href="#extjs">Extjs</a></li> </ul> </a> </li> </ul> </div> </nav> <!--滾動監聽 1、data-spy="scroll" 設定 scroll，將設定滾動容器監聽。 2、position: absolute 設定之後才能精確滾動 3、data-offset="0" 預設值為 10，固定弄內容距滾動容器 10 畫素以內，就高亮顯示所對應的選單。 4、data-target="#nav1" 設定#nav，繫結指定監聽的選單 --> <!--<div data-spy="scroll" data-offset="0" data-target="#nav1" style="margin:0 10px;height: 100px;overflow: auto;position: absolute">--> <div id="content" style="margin:0 10px;height: 100px;overflow: auto;position: absolute"> <section class="sec"> <h4 id="html5">HTML5<a href="#" onclick="removeSec(this)">刪除</a></h4> <p>標準通用標記語言下的一個應用 HTML 標準自 1999 年 12 月釋出的 HTML4.01 後，後繼的 HTML5 和其它標準被束之高閣，為了推動 Web 標準化運動的發展，一些公司聯 合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web 超文字應用技術工作組 -WHATWG） 的組織。WHATWG 致力於 Web 表單和應用程式， 而 W3C（World Wide Web Consortium，全球資訊網聯盟） 專注於 XHTML2.0。在 2006 年，雙方決定進行合作，來建立一個新版本的 HTML。</p> </section> <section class="sec"> <h4 id="bootstrap">Bootstrap</h4> <p>Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基 於 HTML、 CSS、 JAVASCRIPT 的， 它簡潔靈活， 使得 Web 開發更加快捷。 [1] 它由 Twitter 的設計師 Mark Otto 和 Jacob Thornton 合作開發，是一個 CSS/HTML 框架。Bootstrap 提供了優雅的 HTML 和 CSS 規範，它即是由動態 CSS 語言 Less 寫成。Bootstrap 一經推出 後頗受歡迎，一直是 GitHub 上的熱門開源專案，包括 NASA 的 MSNBC（微軟全國廣播公司） 的 Breaking News 都使用了該專案。[2] 國內一些移動開發者較為熟悉的框架，如 WeX5 前端開源框架等，也是基於 Bootstrap 原始碼進行效能優化而來。[3] </p> </section> <section class="sec"> <h4 id="jquery">jQuery</h4> <p>JQuery 是繼 prototype 之後又一個優秀的 Javascript 庫。 它是輕量級的 js 庫 ，它相容 CSS3，還相容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ， jQuery2.0 及後續版本將不再支援 IE6/7/8 瀏覽器。jQuery 使使用者能更方便地處理 HTML （標準通用標記語言下的一個應用）、 events、實現動畫效果，並且方便地為網站提供 AJAX 互動。jQuery 還有一個比較大的優勢是，它的文件說明很全，而且各種應用也說得很詳細， 同時還有許多成熟的外掛可供選擇。 jQuery 能夠使使用者的 html 頁面保持程式碼和 html 內容 分離， 也就是說， 不用再在 html 裡面插入一堆 js 來呼叫命令了， 只需要定義 id 即可。 </p> </section> <section class="sec"> <h4 id="yui">Yui</h4> <p>近幾年隨著 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端 開發框架如雨後春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都湧現出 很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。這些框架各有特點，本文對 這些框架進行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為後續詳細研 究這些框架的拋磚引玉。</p> </section> <section class="sec"> <h4 id="extjs">Extjs</h4> <p>ExtJS 可以用來開發 RIA 也即富客戶端的 AJAX 應用，是一個用 javascript 寫的，主要用於建立前端使用者介面，是一個與後臺技術無關的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各種開發語言開發的應用中。ExtJs 最開始基於 YUI 技 術，由開發人員 JackSlocum 開發，通過參考 JavaSwing 等機制來組織視覺化元件，無論 從 UI 介面上 CSS 樣式的應用，到資料解析上的異常處理，都可算是一款不可多得的 JavaScript 客戶端技術的精品。</p> </section> </div> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> <script> /* $('#content').scrollspy({ //預設就可以滾動監聽了 });*/ $('#content').scrollspy({ offset: 0, target: '#nav1' }); /*事件*/ /* $('#nav1').on('activate.bs.scrollspy', function () { alert('新條目剛要被啟用前觸發該事件'); });*/ function removeSec(e) { $(e).parents('.sec').remove();//DOM內容更新之後，再點選導航，監聽會不起作用 $('#content').scrollspy('refresh');//刪除內容時，重新整理一下 DOM，避免導航監聽錯位 } </script> </body> </html>