Bootstrap下拉菜單和滾動(dòng)監(jiān)聽插件
學(xué)習(xí)要點(diǎn)：
1.下拉菜單
2.滾動(dòng)監(jiān)聽
本節(jié)課我們主要學(xué)習(xí)一下 Bootstrap 中的下拉菜單插件，這個(gè)插件在以組件的形式我們 已經(jīng)學(xué)習(xí)過(guò)，那么現(xiàn)在來(lái)看看怎么和 JavaScript 交互的。
一．下拉菜單
聲明式用法
<div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">資訊</a></li> <li><a href="#">關(guān)于</a></li> </ul></div>
聲明式用法的關(guān)鍵核心：
1.外圍容器使用 class="dropdown"包裹；
2.內(nèi)部點(diǎn)擊按鈕事件綁定 data-toggle="dropdown"；
3.菜單元素使用 class="dropdown-menu"。
如果按鈕在容器外部，可以通過(guò) data-target 進(jìn)行綁定?！静煌扑]】
缺點(diǎn)列表位置需要手動(dòng)自己調(diào)整
<div class="dropdown" id="dropdown"> <ul class="dropdown-menu"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">資訊</a></li> <li><a href="#">關(guān)于</a></li> </ul></div><button class="btn btn-primary" data-toggle="dropdown" data-target="#dropdown"> 下拉菜單 <span class="caret"></span></button>
在 JavaScript 調(diào)用中
方法
dropdown()方法，將下拉菜單按鈕執(zhí)，行下拉菜單方法，在button元素使用(Bootstrap)
不推薦，下拉展開后無(wú)法隱藏
<div class="dropdown" id="dropdown"> <button class="btn btn-primary" id="ann"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">資訊</a></li> <li><a href="#">關(guān)于</a></li> </ul></div>
js
$(function () { $('#ann').dropdown();});
toggle將下拉菜單默認(rèn)展開，在button元素使用(Bootstrap)
不推薦，默認(rèn)是展開的，也無(wú)法隱藏
<div class="dropdown" id="dropdown"> <button class="btn btn-primary" id="ann"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">資訊</a></li> <li><a href="#">關(guān)于</a></li> </ul></div>
js
$(function () { $('#ann').dropdown('toggle');});
事件
下拉菜單支持 4 種事件，分別對(duì)應(yīng)彈出前、彈出后、關(guān)閉前和關(guān)閉后。
show.bs.dropdown 在 show 方法調(diào)用時(shí)立即觸發(fā)。(Bootstrap)
shown.bs.dropdown 在下拉菜單完全顯示出來(lái)，并且等 CSS 動(dòng)畫完成之后觸發(fā)。(Bootstrap)
hide.bs.dropdown 在 hide 方法調(diào)用時(shí)，但還未關(guān)閉隱藏時(shí)觸發(fā)。(Bootstrap)
hidden.bs.dropdown 在下拉菜單完全隱藏之后，并且等 CSS 動(dòng)畫完成之后觸發(fā)。(Bootstrap)
<div class="dropdown" id="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜單 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首頁(yè)</a></li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">資訊</a></li> <li><a href="#">關(guān)于</a></li> </ul></div>
js
$(function () { $('#dropdown').on('show.bs.dropdown', function () { alert('在調(diào)用 show 方法時(shí)立即觸發(fā)！'); }); $('#dropdown').on('shown.bs.dropdown', function () { alert('在下拉菜單完全顯示出來(lái)，并且等 CSS 動(dòng)畫完成之后觸發(fā)！'); }); $('#dropdown').on('hide.bs.dropdown', function () { alert('在 hide 方法調(diào)用時(shí)，但還未關(guān)閉隱藏時(shí)觸發(fā)！'); }); $('#dropdown').on('hidden.bs.dropdown', function () { alert('在下拉菜單完全隱藏之后，并且等 CSS 動(dòng)畫完成之后觸發(fā)！'); });});
二．滾動(dòng)監(jiān)聽
滾動(dòng)監(jiān)聽插件是用來(lái)根據(jù)滾動(dòng)條所處在的位置自動(dòng)更新導(dǎo)航項(xiàng)目，顯示導(dǎo)航項(xiàng)目高亮顯示。
基本實(shí)例
實(shí)現(xiàn)滾動(dòng)監(jiān)聽，將導(dǎo)航條li標(biāo)簽里的a標(biāo)簽的href=對(duì)應(yīng)文本標(biāo)題h4標(biāo)簽的id即可
<nav id="nav" class="navbar navbar-default"> <!--聲明導(dǎo)航，設(shè)置導(dǎo)航默認(rèn)樣式--> <a href="#" class="navbar-brand">Web 開發(fā)</a> <!--設(shè)置導(dǎo)航標(biāo)題樣式--> <ul class="nav navbar-nav"> <!--設(shè)置導(dǎo)航里的導(dǎo)航樣式--> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li class="dropdown"> <!--設(shè)置聲明一個(gè)下來(lái)列表--> <a href="#" data-toggle="dropdown"> <!--點(diǎn)擊打開下來(lái)列表--> JavaScript <span class="caret"></span> <!--設(shè)置一個(gè)三角樣式--> </a> <ul class="dropdown-menu"> <!--設(shè)置下來(lái)列表樣式--> <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 style="height: 200px; overflow: auto; position: relative;padding: 0 10px;"> <h4 id="html5">HTML5</h4> <p>標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自 1999 年 12 月發(fā)布的 HTML4.01 后，后繼的 HTML5 和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng) Web 標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián) 合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序， 而 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年， 雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。</p> <h4 id="bootstrap">Bootstrap</h4> <p>Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基 于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。[1] 它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語(yǔ)言 Less 寫成。Bootstrap 一經(jīng)推出 后頗受歡迎，一直是 GitHub 上的熱門開源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國(guó)廣播公司） 的 Breaking News 都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如 WeX5 前端開源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。[3] </p> <h4 id="jquery">jQuery</h4> <p>JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。它是輕量級(jí)的 js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML （標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)， 同時(shí)還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html 頁(yè)面保持代碼和 html 內(nèi)容 分離，也就是說(shuō)，不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id 即可。</p> <h4 id="yui">Yui</h4> <p>近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端 開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出 很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對(duì) 這些框架進(jìn)行初步的介紹與比較，希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助，也為后續(xù)詳細(xì)研 究這些框架的拋磚引玉。</p> <h4 id="extjs">Extjs</h4> <p>ExtJS 可以用來(lái)開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個(gè)用 javascript 寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語(yǔ)言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技 術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過(guò)參考 JavaSwing 等機(jī)制來(lái)組織可視化組件，無(wú)論 從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的 JavaScript 客戶端技術(shù)的精品。</p></div>
滾動(dòng)監(jiān)聽屬性，都是寫在監(jiān)聽內(nèi)容區(qū)域最外層div里
data-offset 默認(rèn)值為 10，固定內(nèi)容距滾動(dòng)容器 10 像素以內(nèi)，也就是內(nèi)容出現(xiàn)多少像素高亮對(duì)應(yīng)菜單，一般會(huì)設(shè)置成0。(Bootstrap)
data-spy 設(shè)置 scroll，將設(shè)置滾動(dòng)容器監(jiān)聽。必須否則將不會(huì)監(jiān)聽(Bootstrap)
data-target 設(shè)置#nav，綁定指定監(jiān)聽的菜單的id，防止監(jiān)聽多個(gè)菜單(Bootstrap)
<nav id="nav" class="navbar navbar-default"> <!--聲明導(dǎo)航，設(shè)置導(dǎo)航默認(rèn)樣式--> <a href="#" class="navbar-brand">Web 開發(fā)</a> <!--設(shè)置導(dǎo)航標(biāo)題樣式--> <ul class="nav navbar-nav"> <!--設(shè)置導(dǎo)航里的導(dǎo)航樣式--> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li class="dropdown"> <!--設(shè)置聲明一個(gè)下來(lái)列表--> <a href="#" data-toggle="dropdown"> <!--點(diǎn)擊打開下來(lái)列表--> JavaScript <span class="caret"></span> <!--設(shè)置一個(gè)三角樣式--> </a> <ul class="dropdown-menu"> <!--設(shè)置下來(lái)列表樣式--> <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 data-target="#nav" data-offset="0" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;"> <h4 id="html5">HTML5</h4> <p>標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自 1999 年 12 月發(fā)布的 HTML4.01 后，后繼的 HTML5 和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng) Web 標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián) 合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序， 而 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年， 雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。</p> <h4 id="bootstrap">Bootstrap</h4> <p>Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基 于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。[1] 它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語(yǔ)言 Less 寫成。Bootstrap 一經(jīng)推出 后頗受歡迎，一直是 GitHub 上的熱門開源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國(guó)廣播公司） 的 Breaking News 都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如 WeX5 前端開源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。[3] </p> <h4 id="jquery">jQuery</h4> <p>JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。它是輕量級(jí)的 js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML （標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)， 同時(shí)還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html 頁(yè)面保持代碼和 html 內(nèi)容 分離，也就是說(shuō)，不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id 即可。</p> <h4 id="yui">Yui</h4> <p>近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端 開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出 很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對(duì) 這些框架進(jìn)行初步的介紹與比較，希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助，也為后續(xù)詳細(xì)研 究這些框架的拋磚引玉。</p> <h4 id="extjs">Extjs</h4> <p>ExtJS 可以用來(lái)開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個(gè)用 javascript 寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語(yǔ)言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技 術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過(guò)參考 JavaSwing 等機(jī)制來(lái)組織可視化組件，無(wú)論 從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的 JavaScript 客戶端技術(shù)的精品。</p></div>
使用js方式定義以上監(jiān)聽屬性
scrollspy()方法，將菜單執(zhí)行滾動(dòng)監(jiān)聽，在內(nèi)容區(qū)域最外層div上使用(Bootstrap)
offset滾動(dòng)監(jiān)聽屬性，設(shè)置內(nèi)容出現(xiàn)多少像素高亮對(duì)應(yīng)菜單，一般會(huì)設(shè)置成0(Bootstrap)
target滾動(dòng)監(jiān)聽屬性，綁定指定監(jiān)聽的菜單的id，防止監(jiān)聽多個(gè)菜單(Bootstrap)
js
$(function () { $('#content').scrollspy({ //獲取內(nèi)容區(qū)域執(zhí)行滾動(dòng)監(jiān)聽 offset: 0, //設(shè)置內(nèi)容出現(xiàn)多少像素高亮對(duì)應(yīng)菜單，一般會(huì)設(shè)置成0 target: '#nav', //綁定指定監(jiān)聽的菜單的id，防止監(jiān)聽多個(gè)菜單 });});
html
<nav id="nav" class="navbar navbar-default"> <!--聲明導(dǎo)航，設(shè)置導(dǎo)航默認(rèn)樣式--> <a href="#" class="navbar-brand">Web 開發(fā)</a> <!--設(shè)置導(dǎo)航標(biāo)題樣式--> <ul class="nav navbar-nav"> <!--設(shè)置導(dǎo)航里的導(dǎo)航樣式--> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li class="dropdown"> <!--設(shè)置聲明一個(gè)下來(lái)列表--> <a href="#" data-toggle="dropdown"> <!--點(diǎn)擊打開下來(lái)列表--> JavaScript <span class="caret"></span> <!--設(shè)置一個(gè)三角樣式--> </a> <ul class="dropdown-menu"> <!--設(shè)置下來(lái)列表樣式--> <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" style="height: 200px; overflow: auto; position: relative;"> <h4 id="html5">HTML5</h4> <p>標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自 1999 年 12 月發(fā)布的 HTML4.01 后，后繼的 HTML5 和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng) Web 標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián) 合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序， 而 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年， 雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。</p> <h4 id="bootstrap">Bootstrap</h4> <p>Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基 于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。[1] 它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語(yǔ)言 Less 寫成。Bootstrap 一經(jīng)推出 后頗受歡迎，一直是 GitHub 上的熱門開源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國(guó)廣播公司） 的 Breaking News 都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如 WeX5 前端開源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。[3] </p> <h4 id="jquery">jQuery</h4> <p>JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。它是輕量級(jí)的 js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML （標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)， 同時(shí)還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html 頁(yè)面保持代碼和 html 內(nèi)容 分離，也就是說(shuō)，不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id 即可。</p> <h4 id="yui">Yui</h4> <p>近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端 開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出 很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對(duì) 這些框架進(jìn)行初步的介紹與比較，希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助，也為后續(xù)詳細(xì)研 究這些框架的拋磚引玉。</p> <h4 id="extjs">Extjs</h4> <p>ExtJS 可以用來(lái)開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個(gè)用 javascript 寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語(yǔ)言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技 術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過(guò)參考 JavaSwing 等機(jī)制來(lái)組織可視化組件，無(wú)論 從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的 JavaScript 客戶端技術(shù)的精品。</p></div>
滾動(dòng)監(jiān)聽事件
activate.bs.scrollspy 每當(dāng)一個(gè)新條目被激活后都將由滾動(dòng)監(jiān)聽插件觸發(fā)此事件。在菜單最外層div上使用(Bootstrap)
$(function () { $('#content').scrollspy({ //獲取內(nèi)容區(qū)域執(zhí)行滾動(dòng)監(jiān)聽 offset: 0, //設(shè)置內(nèi)容出現(xiàn)多少像素高亮對(duì)應(yīng)菜單，一般會(huì)設(shè)置成0 target: '#nav', //綁定指定監(jiān)聽的菜單的id，防止監(jiān)聽多個(gè)菜單 }); $('#nav').on('activate.bs.scrollspy', function () { alert('新條目被激活后觸發(fā)此事件！'); });});
更新容器方法
刪除內(nèi)容時(shí)，刷新一下 DOM，避免導(dǎo)航監(jiān)聽錯(cuò)位
注意：此方法只有在內(nèi)容div的html里寫屬性才有效<div data-target="#nav" data-offset="0" data-spy="scroll">
refresh 更新容器 DOM 的方法。在菜單最外層div上使用(Bootstrap)
js
$(function () { $('#html5 a').click(function () { //獲取id為html5下面的a標(biāo)簽，執(zhí)行一個(gè)點(diǎn)擊事件 removeSec(this); //點(diǎn)擊后執(zhí)行removeSec方法，將當(dāng)前點(diǎn)擊元素傳遞到方法 }); function removeSec(e) { //定義removeSec方法 $(e).parents('.sec').remove(); //獲取到點(diǎn)擊元素上面class為sec的元素刪除節(jié)點(diǎn) $('#content').scrollspy('refresh'); //refresh更新容器方法，獲取到內(nèi)容區(qū)域更新一下容器 }});
HTML
<nav id="nav" class="navbar navbar-default"> <!--聲明導(dǎo)航，設(shè)置導(dǎo)航默認(rèn)樣式--> <a href="#" class="navbar-brand">Web 開發(fā)</a> <!--設(shè)置導(dǎo)航標(biāo)題樣式--> <ul class="nav navbar-nav"> <!--設(shè)置導(dǎo)航里的導(dǎo)航樣式--> <li><a href="#html5">HTML5</a></li> <li><a href="#bootstrap">Bootstrap</a></li> <li class="dropdown"> <!--設(shè)置聲明一個(gè)下來(lái)列表--> <a href="#" data-toggle="dropdown"> <!--點(diǎn)擊打開下來(lái)列表--> JavaScript <span class="caret"></span> <!--設(shè)置一個(gè)三角樣式--> </a> <ul class="dropdown-menu"> <!--設(shè)置下來(lái)列表樣式--> <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-target="#nav" data-offset="0" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;"> <section class="sec"> <h4 id="html5">HTML5<a href="#" >刪除此項(xiàng)</a></h4> <p>標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用 HTML 標(biāo)準(zhǔn)自 1999 年 12 月發(fā)布的 HTML4.01 后，后繼的 HTML5 和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng) Web 標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián) 合起來(lái)，成立了一個(gè)叫做 Web Hypertext Application Technology Working Group （Web 超文本應(yīng)用技術(shù)工作組 -WHATWG） 的組織。WHATWG 致力于 Web 表單和應(yīng)用程序， 而 W3C（World Wide Web Consortium，萬(wàn)維網(wǎng)聯(lián)盟） 專注于 XHTML2.0。在 2006 年， 雙方?jīng)Q定進(jìn)行合作，來(lái)創(chuàng)建一個(gè)新版本的 HTML。</p> </section> <section class="sec"> <h4 id="bootstrap">Bootstrap</h4> <p>Bootstrap，來(lái)自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基 于 HTML、CSS、JAVASCRIPT 的，它簡(jiǎn)潔靈活，使得 Web 開發(fā)更加快捷。[1] 它由 Twitter 的設(shè)計(jì)師 Mark Otto 和 Jacob Thornton 合作開發(fā)，是一個(gè) CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范，它即是由動(dòng)態(tài) CSS 語(yǔ)言 Less 寫成。Bootstrap 一經(jīng)推出 后頗受歡迎，一直是 GitHub 上的熱門開源項(xiàng)目，包括 NASA 的 MSNBC（微軟全國(guó)廣播公司） 的 Breaking News 都使用了該項(xiàng)目。[2] 國(guó)內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如 WeX5 前端開源框架等，也是基于 Bootstrap 源碼進(jìn)行性能優(yōu)化而來(lái)。[3] </p> </section> <section class="sec"> <h4 id="jquery">jQuery</h4> <p>JQuery 是繼 prototype 之后又一個(gè)優(yōu)秀的 Javascript 庫(kù)。它是輕量級(jí)的 js 庫(kù) ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）， jQuery2.0 及后續(xù)版本將不再支持 IE6/7/8 瀏覽器。jQuery 使用戶能更方便地處理 HTML （標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供 AJAX 交互。jQuery 還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)， 同時(shí)還有許多成熟的插件可供選擇。jQuery 能夠使用戶的 html 頁(yè)面保持代碼和 html 內(nèi)容 分離，也就是說(shuō)，不用再在 html 里面插入一堆 js 來(lái)調(diào)用命令了，只需要定義 id 即可。</p> </section> <section class="sec"> <h4 id="yui">Yui</h4> <p>近幾年隨著 jQuery、Ext 以及 CSS3 的發(fā)展，以 Bootstrap 為代表的前端 開發(fā)框架如雨后春筍般擠入視野，可謂應(yīng)接不暇。不論是桌面瀏覽器端還是移動(dòng)端都涌現(xiàn)出 很多優(yōu)秀的框架，極大豐富了開發(fā)素材，也方便了大家的開發(fā)。這些框架各有特點(diǎn)，本文對(duì) 這些框架進(jìn)行初步的介紹與比較，希望能夠?yàn)榇蠹疫x擇框架提供一點(diǎn)幫助，也為后續(xù)詳細(xì)研 究這些框架的拋磚引玉。</p> </section> <section class="sec"> <h4 id="extjs">Extjs</h4> <p>ExtJS 可以用來(lái)開發(fā) RIA 也即富客戶端的 AJAX 應(yīng)用，是一個(gè)用 javascript 寫的，主要用于創(chuàng)建前端用戶界面，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端 ajax 框架。因此，可以 把 ExtJS 用在.Net、Java、Php 等各種開發(fā)語(yǔ)言開發(fā)的應(yīng)用中。ExtJs 最開始基于 YUI 技 術(shù)，由開發(fā)人員 JackSlocum 開發(fā)，通過(guò)參考 JavaSwing 等機(jī)制來(lái)組織可視化組件，無(wú)論 從 UI 界面上 CSS 樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一款不可多得的 JavaScript 客戶端技術(shù)的精品。</p> </section></div>
聯(lián)系客服
