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

?

也許你會(huì)奇怪，不是有工具欄和導(dǎo)航欄嗎？為什么標(biāo)題只寫(xiě)了工具欄！其實(shí)這里的工具欄和導(dǎo)航欄并不是分開(kāi)的組件，而是統(tǒng)一的一套標(biāo)準(zhǔn)組件，既有工具欄的功能也有導(dǎo)航欄的功能，下文就直接簡(jiǎn)稱(chēng)工具欄了。

?

一.工具欄基礎(chǔ)

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

?

可能在閱讀上面這段話后，童鞋們可能有點(diǎn)迷惑，沒(méi)關(guān)系，下面會(huì)分開(kāi)介紹這些屬性，相信閱讀后便會(huì)理解 jQuery Mobile 的工具欄組件了。

?

二.頭部欄

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

?

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

?

下面給出一個(gè)帶有兩個(gè)按鈕的例子：

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

效果：

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

?

另外開(kāi)發(fā)者也可以使用 CSS class 來(lái)控制按鈕的位置：

ui-btn-left 和 ui-btn-right class 分別是控制按鈕在頭部欄的左邊和右邊，并且設(shè)置相應(yīng)的 class 后，按鈕的位置只根據(jù)類(lèi)來(lái)分配，與它們實(shí)際在 HTML 源碼中的位置無(wú)關(guān)。

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

效果：

?

三.尾部欄

在 jQuery Mobile 中，使用 data-role="footer" 可以產(chǎn)生尾部欄，尾部欄的情況跟頭部欄基本相同，也支持放置按鈕，通過(guò) CSS 類(lèi)調(diào)整按鈕位置，這里給出一個(gè)基本的尾部欄例子：

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

效果：

另外在尾部欄中添加一個(gè)按鈕組可以很方便的做出一個(gè)工具欄，關(guān)于按鈕組的使用可以參見(jiàn) 《 使用 jQuery Mobile 與 HTML5 開(kāi)發(fā) Web App —— jQuery Mobile 按鈕 》中的“按鈕組”部分。

?

四.導(dǎo)航欄

導(dǎo)航欄可以為開(kāi)發(fā)者提供一種簡(jiǎn)便的導(dǎo)航菜單方案，首先給出一個(gè)例子：

          <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>
        

這里說(shuō)明一下，導(dǎo)航欄并不一定需要頭部欄包裹，不過(guò)一般建議放在頭部欄或尾部欄中。要設(shè)置某一個(gè)鏈接為活動(dòng)狀態(tài)（當(dāng)前狀態(tài)），可以給該鏈接添加 "ui-btn-active" 的 class ，如例子中設(shè)置了第一個(gè)鏈接為當(dāng)前活動(dòng)狀態(tài)。

?

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

我們可以給工具欄添加 data-position="fixed" 的屬性，這樣工具欄就會(huì)固定在頁(yè)面中，并不隨頁(yè)面滾動(dòng)而滾動(dòng)了，當(dāng)工具欄滾出屏幕后，可以通過(guò)點(diǎn)擊屏幕使其再次出現(xiàn)。在此基礎(chǔ)上，若再為工具欄添加 data-fullscreen="true" 屬性，則能觸發(fā)工具欄全屏模式，這樣頁(yè)面的主體內(nèi)容會(huì)占滿頁(yè)面，然后通過(guò)點(diǎn)擊屏幕使工具欄出現(xiàn)或消失。也許你會(huì)覺(jué)得這個(gè)情景很熟悉，的確，這種方式在一些 App 上很常見(jiàn)，比如視頻網(wǎng)站的 App ，播放視頻時(shí)顯示進(jìn)度條，音量按鈕，清晰度選擇等，點(diǎn)擊屏幕工具條就會(huì)消失，需要時(shí)再次點(diǎn)擊就會(huì)出現(xiàn)。現(xiàn)在這樣的功能 Web App 也做到了，并且很簡(jiǎn)便，配合出 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>
        

?

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

?

六.主題樣式

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

?

七.完整 Demo

完整實(shí)例 Demo （建議使用 PC 上的 Firefox、Chrome 等現(xiàn)代瀏覽器和 IE9+ 或 Android , iPhone/iPad 的系統(tǒng)瀏覽器瀏覽）

?

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