首頁 > 開發者 > JavaScript
bootstrap的滾動監聽，bootstrap滾動監聽
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>下拉式功能表和滾動監聽外掛程式</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> </style></head><body data-spy="scroll" data-target="#nav"><nav id="nav" class="navbar navbar-default navbar-fixed-top"> <a href="#" class="navbar-brand">Web開發</a> <ul class="nav navbar-nav"> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li class="dropdown"> <a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a> <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> </li> </ul></nav><div id="content" data-offset="0" style="padding: 0 10px;height: 2000px;position: relative;"> <section class="sec"> <h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">刪除</a></h4> <p>標準通用標記語言 (SGML)下的一個應用HTML 標準自1999 年12 月發布的HTML4.01後，後繼的HTML5 和其它標準被束之高閣，為了推動Web 標準化運動的發展，一些公司聯合起來，成立了一個叫做Web Hypertext Application Technology Working Group（Web 超文本應用技術工作群組-WHATWG） 的組織。WHA。在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（標準通用標記語言 (SGML)下的一個應用）、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="js/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"> // $('#btn').dropdown(); // $('#btn').dropdown('toggle'); // $('#dropdown').on('show.bs.dropdown', function () { // alert('調用show方法時執行'); // }); // $('#content').scrollspy({ // offset : 0, // target : '#nav', // }); // $('#nav').on('activate.bs.scrollspy', function () { // alert('新條目被啟用！'); // }); function removeSec(e) { $(e).parents('.sec').remove(); $('#content').scrollspy('refresh'); }</script></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
