第二百四十四節，Bootstrap下拉菜單和滾動監聽插件

Bootstrap下拉菜單和滾動監聽插件

 

學習要點：

　　1.下拉菜單

　　2.滾動監聽

 

本節課我們主要學習一下 Bootstrap 中的下拉菜單插件，這個插件在以組件的形式我們 已經學習過，那么現在來看看怎么和 JavaScript 交互的。

 

一．下拉菜單

聲明式用法

<div class="dropdown">
    <button class="btn btn-primary" data-toggle="dropdown">
        下拉菜單
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">資訊</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</div>

聲明式用法的關鍵核心：

　　1.外圍容器使用 class="dropdown"包裹；

　　2.內部點擊按鈕事件綁定 data-toggle="dropdown"；

　　3.菜單元素使用 class="dropdown-menu"。

 

 

如果按鈕在容器外部，可以通過 data-target 進行綁定。【不推薦】

 缺點列表位置需要手動自己調整

<div class="dropdown" id="dropdown">
    <ul class="dropdown-menu">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">資訊</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</div>
<button class="btn btn-primary" data-toggle="dropdown" data-target="#dropdown"> 下拉菜單 <span class="caret"></span>
</button>

 

在 JavaScript 調用中

方法

dropdown()方法，將下拉菜單按鈕執，行下拉菜單方法，在button元素使用(Bootstrap)

不推薦，下拉展開后無法隱藏

 

<div class="dropdown" id="dropdown">
    <button class="btn btn-primary" id="ann">
        下拉菜單
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">資訊</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</div>

 

js

$(function () {
    $('#ann').dropdown();
});

 

 

 

toggle將下拉菜單默認展開，在button元素使用(Bootstrap)

不推薦，默認是展開的，也無法隱藏

<div class="dropdown" id="dropdown">
    <button class="btn btn-primary" id="ann">
        下拉菜單
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">資訊</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</div>

js

$(function () {
    $('#ann').dropdown('toggle');
});

 

 

事件

下拉菜單支持 4 種事件，分別對應彈出前、彈出后、關閉前和關閉后。

show.bs.dropdown 在 show 方法調用時立即觸發。(Bootstrap)
shown.bs.dropdown 在下拉菜單完全顯示出來，並且等 CSS 動畫完成之后觸發。(Bootstrap)
hide.bs.dropdown 在 hide 方法調用時，但還未關閉隱藏時觸發。(Bootstrap)
hidden.bs.dropdown 在下拉菜單完全隱藏之后，並且等 CSS 動畫完成之后觸發。(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="#">首頁</a></li>
        <li><a href="#">產品</a></li>
        <li><a href="#">資訊</a></li>
        <li><a href="#">關於</a></li>
    </ul>
</div>

js

$(function () {
    $('#dropdown').on('show.bs.dropdown', function () {
        alert('在調用 show 方法時立即觸發！');
    });
    $('#dropdown').on('shown.bs.dropdown', function () {
        alert('在下拉菜單完全顯示出來，並且等 CSS 動畫完成之后觸發！');
    });
    $('#dropdown').on('hide.bs.dropdown', function () {
        alert('在 hide 方法調用時，但還未關閉隱藏時觸發！');
    });
    $('#dropdown').on('hidden.bs.dropdown', function () {
        alert('在下拉菜單完全隱藏之后，並且等 CSS 動畫完成之后觸發！');
    });
});

 

 

二．滾動監聽

滾動監聽插件是用來根據滾動條所處在的位置自動更新導航項目，顯示導航項目高亮顯示。

基本實例

實現滾動監聽，將導航條li標簽里的a標簽的href=對應文本標題h4標簽的id即可

<nav id="nav" class="navbar navbar-default">                        <!--聲明導航，設置導航默認樣式-->
    <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 style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
    <h4 id="html5">HTML5</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>
    <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>
    <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>
    <h4 id="yui">Yui</h4>
    <p>近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端
        開發框架如雨后春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都涌現出
        很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。這些框架各有特點，本文對
        這些框架進行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為后續詳細研
        究這些框架的拋磚引玉。</p>
    <h4 id="extjs">Extjs</h4>
    <p>ExtJS 可以用來開發 RIA 也即富客戶端的 AJAX 應用，是一個用 javascript
        寫的，主要用於創建前端用戶界面，是一個與后台技術無關的前端 ajax 框架。因此，可以
        把 ExtJS 用在.Net、Java、Php 等各種開發語言開發的應用中。ExtJs 最開始基於 YUI 技
        術，由開發人員 JackSlocum 開發，通過參考 JavaSwing 等機制來組織可視化組件，無論
        從 UI 界面上 CSS 樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的
        JavaScript 客戶端技術的精品。</p>
</div>

 

 

滾動監聽屬性，都是寫在監聽內容區域最外層div里

data-offset 默認值為 10，固定內容距滾動容器 10 像素以內，也就是內容出現多少像素高亮對應菜單，一般會設置成0。(Bootstrap)
data-spy 設置 scroll，將設置滾動容器監聽。必須否則將不會監聽(Bootstrap)
data-target 設置#nav，綁定指定監聽的菜單的id，防止監聽多個菜單(Bootstrap)

<nav id="nav" class="navbar navbar-default">                        <!--聲明導航，設置導航默認樣式-->
    <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 data-target="#nav" data-offset="0" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;">
    <h4 id="html5">HTML5</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>
    <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>
    <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>
    <h4 id="yui">Yui</h4>
    <p>近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端
        開發框架如雨后春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都涌現出
        很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。這些框架各有特點，本文對
        這些框架進行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為后續詳細研
        究這些框架的拋磚引玉。</p>
    <h4 id="extjs">Extjs</h4>
    <p>ExtJS 可以用來開發 RIA 也即富客戶端的 AJAX 應用，是一個用 javascript
        寫的，主要用於創建前端用戶界面，是一個與后台技術無關的前端 ajax 框架。因此，可以
        把 ExtJS 用在.Net、Java、Php 等各種開發語言開發的應用中。ExtJs 最開始基於 YUI 技
        術，由開發人員 JackSlocum 開發，通過參考 JavaSwing 等機制來組織可視化組件，無論
        從 UI 界面上 CSS 樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的
        JavaScript 客戶端技術的精品。</p>
</div>

 

 

使用js方式定義以上監聽屬性

scrollspy()方法，將菜單執行滾動監聽，在內容區域最外層div上使用(Bootstrap)
offset滾動監聽屬性，設置內容出現多少像素高亮對應菜單，一般會設置成0(Bootstrap)
target滾動監聽屬性，綁定指定監聽的菜單的id，防止監聽多個菜單(Bootstrap)

js

$(function () {
    $('#content').scrollspy({       //獲取內容區域執行滾動監聽
        offset: 0,                  //設置內容出現多少像素高亮對應菜單，一般會設置成0
        target: '#nav',             //綁定指定監聽的菜單的id，防止監聽多個菜單
    });
});

html

<nav id="nav" class="navbar navbar-default">                        <!--聲明導航，設置導航默認樣式-->
    <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" style="height: 200px; overflow: auto; position: relative;">
    <h4 id="html5">HTML5</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>
    <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>
    <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>
    <h4 id="yui">Yui</h4>
    <p>近幾年隨着 jQuery、Ext 以及 CSS3 的發展，以 Bootstrap 為代表的前端
        開發框架如雨后春筍般擠入視野，可謂應接不暇。不論是桌面瀏覽器端還是移動端都涌現出
        很多優秀的框架，極大豐富了開發素材，也方便了大家的開發。這些框架各有特點，本文對
        這些框架進行初步的介紹與比較，希望能夠為大家選擇框架提供一點幫助，也為后續詳細研
        究這些框架的拋磚引玉。</p>
    <h4 id="extjs">Extjs</h4>
    <p>ExtJS 可以用來開發 RIA 也即富客戶端的 AJAX 應用，是一個用 javascript
        寫的，主要用於創建前端用戶界面，是一個與后台技術無關的前端 ajax 框架。因此，可以
        把 ExtJS 用在.Net、Java、Php 等各種開發語言開發的應用中。ExtJs 最開始基於 YUI 技
        術，由開發人員 JackSlocum 開發，通過參考 JavaSwing 等機制來組織可視化組件，無論
        從 UI 界面上 CSS 樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的
        JavaScript 客戶端技術的精品。</p>
</div>

 

 

滾動監聽事件

activate.bs.scrollspy 每當一個新條目被激活后都將由滾動監聽插件觸發此事件。在菜單最外層div上使用(Bootstrap)

$(function () {
    $('#content').scrollspy({       //獲取內容區域執行滾動監聽
        offset: 0,                  //設置內容出現多少像素高亮對應菜單，一般會設置成0
        target: '#nav',             //綁定指定監聽的菜單的id，防止監聽多個菜單
    });
    $('#nav').on('activate.bs.scrollspy', function () { alert('新條目被激活后觸發此事件！'); });
});

 

 

更新容器方法

刪除內容時，刷新一下 DOM，避免導航監聽錯位

注意：此方法只有在內容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標簽，執行一個點擊事件
        removeSec(this);                       //點擊后執行removeSec方法，將當前點擊元素傳遞到方法
    });
    function removeSec(e) {                    //定義removeSec方法
        $(e).parents('.sec').remove();         //獲取到點擊元素上面class為sec的元素刪除節點
        $('#content').scrollspy('refresh');    //refresh更新容器方法，獲取到內容區域更新一下容器
    }
});

HTML

 

<nav id="nav" class="navbar navbar-default">                        <!--聲明導航，設置導航默認樣式-->
    <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-target="#nav" data-offset="0" data-spy="scroll" style="height: 200px; overflow: auto; position: relative;">
    <section class="sec">
        <h4 id="html5">HTML5<a href="#" >刪除此項</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>