本文延續之前"使用 jQuery Mobile 與 HTML5 開發 Web App"系列文章，本文介紹的是 jQuery Mobile 中的 jQuery Mobile 工具欄。在 jQuery Mobile 中，有一套完整的工具欄和導航欄組件，這里的工具欄和導航欄并不只是提供了相應的外觀樣式，還自帶有一些常用的輔助功能，下面 Kayo 為大家詳細介紹。

?

也許你會奇怪，不是有工具欄和導航欄嗎？為什么標題只寫了工具欄！其實這里的工具欄和導航欄并不是分開的組件，而是統一的一套標準組件，既有工具欄的功能也有導航欄的功能，下文就直接簡稱工具欄了。

?

一.工具欄基礎

在 jQuery Mobile 中，有兩套標準工具欄——頭部欄和尾部欄，頭部欄通常是放在網頁頂部，而尾部欄通常放在網站底部，值得注意的是，頭部欄和尾部欄的位置并不依靠 CSS 和 JavaScript 定位，而是本身就處于文檔流的頂部或底部，這樣是為了盡量保證那些對于 CSS 和 JavaScript 支持并不好的設備也可以看到工具欄，另外也不用消耗多余的 CSS 和 JavaScript 資源。

?

可能在閱讀上面這段話后，童鞋們可能有點迷惑，沒關系，下面會分開介紹這些屬性，相信閱讀后便會理解 jQuery Mobile 的工具欄組件了。

?

二.頭部欄

頭部欄正如其名字所表達的，是處于頁面頭部的欄目，使用 data-role="header" 屬性可以產生頭部欄。除了表示標題的文字外，在頭部欄的左邊或右邊可以放置幾個可選的按鈕，作為導航之用（返回上一頁，回到首頁等）。使用 h1 的 HTML 標簽包裹文字，這段文字會被解釋為標題文字，賦予相關的樣式，而在 h1 標簽的上下文中，可以通過使用按鈕標記放置按鈕，其中在 h1 標簽上的按鈕會被放置在頭部欄左邊，而在 h1 標簽之下的按鈕會被放置在頭部欄右邊。

?

如上面描述，在 h1 標簽的上下文中，可以通過使用按鈕標記放置按鈕，通常自定義的按鈕會使用 a 標簽，給標簽添加 data-rel="back" 屬性會自動生成后退按鈕，點擊后退按鈕返回的是歷史記錄中的上一個頁面，而無視該 a 標簽的 href 屬性值，但是對于 C 級瀏覽器，情況剛好相反， C 級瀏覽器只會識別 href 屬性值，而不會直接退回歷史記錄中的上一個頁面，因此要設計一個良好的導航，也必須根據實際情況給 href 設定一個有意義的值，而提高 C 級瀏覽器的用戶體驗。除此之外，開發者還可以使用 data-icon 屬性改變按鈕上的 icon 小圖標，而 data-icon 的可取值可以參考《 使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 按鈕 》中的“帶圖標按鈕”。

?

下面給出一個帶有兩個按鈕的例子：

          <div data-role="header">
    <a data-rel="back" href="#home" data-icon="delete">取消</a>
    <h1>常見頭部欄</h1>
    <a href="#home" data-icon="check">保存</a>
</div>
        

效果：

這里必須強調一下，例子中的鏈接的 href 值為 "#home"，這是 jQuery Mobile 所支持的一種鏈接， "home" 指是一個 jQuery Mobile page 的 id 值，使用這種寫法可以很方便的鏈接到該 page ，參考文章底部 Demo 的源碼可以看到完整的代碼。

?

另外開發者也可以使用 CSS class 來控制按鈕的位置：

ui-btn-left 和 ui-btn-right class 分別是控制按鈕在頭部欄的左邊和右邊，并且設置相應的 class 后，按鈕的位置只根據類來分配，與它們實際在 HTML 源碼中的位置無關。

          <div data-role="header">
    <a class= "ui-btn-right" href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>使用 CSS 類控制按鈕位置的自定義頭部欄</h1>
    <a class="ui-btn-left" href="#home" data-icon="check">保存</a>
</div>
        

效果：

?

三.尾部欄

在 jQuery Mobile 中，使用 data-role="footer" 可以產生尾部欄，尾部欄的情況跟頭部欄基本相同，也支持放置按鈕，通過 CSS 類調整按鈕位置，這里給出一個基本的尾部欄例子：

          <footer data-role="footer">
    <h2>Demo By <a  target="_blank" style="text-decoration: none; ">Kayo</a></h2>
</footer>
        

效果：

另外在尾部欄中添加一個按鈕組可以很方便的做出一個工具欄，關于按鈕組的使用可以參見 《 使用 jQuery Mobile 與 HTML5 開發 Web App —— jQuery Mobile 按鈕 》中的“按鈕組”部分。

?

四.導航欄

導航欄可以為開發者提供一種簡便的導航菜單方案，首先給出一個例子：

          <div data-role="header">
    <div data-role="navbar">
        <ul>
            <li><a href="#" class="ui-btn-active">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div>
</div>
        

這里說明一下，導航欄并不一定需要頭部欄包裹，不過一般建議放在頭部欄或尾部欄中。要設置某一個鏈接為活動狀態（當前狀態），可以給該鏈接添加 "ui-btn-active" 的 class ，如例子中設置了第一個鏈接為當前活動狀態。

?

五.固定位置的工具欄與全屏的工具欄

我們可以給工具欄添加 data-position="fixed" 的屬性，這樣工具欄就會固定在頁面中，并不隨頁面滾動而滾動了，當工具欄滾出屏幕后，可以通過點擊屏幕使其再次出現。在此基礎上，若再為工具欄添加 data-fullscreen="true" 屬性，則能觸發工具欄全屏模式，這樣頁面的主體內容會占滿頁面，然后通過點擊屏幕使工具欄出現或消失。也許你會覺得這個情景很熟悉，的確，這種方式在一些 App 上很常見，比如視頻網站的 App ，播放視頻時顯示進度條，音量按鈕，清晰度選擇等，點擊屏幕工具條就會消失，需要時再次點擊就會出現。現在這樣的功能 Web App 也做到了，并且很簡便，配合出 HTML5 的一些屬性，也就能方便的做出一些很酷的 Web App！

?

固定位置的工具欄

          <div data-role="header" data-position="fixed">
    <a href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>固定位置的工具欄</h1>
</div>
        

?

固定位置的全屏工具欄

          <div data-role="header" data-position="fixed" data-fullscreen="true">
    <a href="#home" data-rel="back" data-icon="delete">取消</a>
    <h1>固定位置的工具欄</h1>
</div>
        

?

由于這里要顯示的效果是動態的，就不放效果圖了，建議大家直接查看完整 Demo 中相應的例子，其中“固定位置的全屏工具欄”在 PC 會出現相滾動條的情況，建議使用移動瀏覽器查看。

?

六.主題樣式

與其他 jQuery Mobile 組件一樣，工具欄也是支持使用主題樣式的，可以使用 data-theme 屬性在組件的標簽上添加主題樣式，該屬性默認有五個值 a, b, c, d, e，分別代表由深到淺五種顏色，另外開發者還可以通過在 CSS 里添加相應的 class 來自定義顏色，而默認的樣式則為 a ，即黑色。

?

七.完整 Demo

完整實例 Demo （建議使用 PC 上的 Firefox、Chrome 等現代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統瀏覽器瀏覽）

?

原文由 Kayo Lee 發表，原文鏈接： http://kayosite.com/web-app-by-jquery-mobile-and-html5-toolbar.html