Toolbar 類型

在jQuery Mobile中, 有兩種標(biāo)準(zhǔn)類型的工具欄： Headers 和 Footers.

Header bar 充當(dāng)頁面標(biāo)題的作用, 通常是 mobile page中的第一個(gè)元素，一般包含有一個(gè)頁面標(biāo)題和兩個(gè)按鈕。

Footer bar 通常是最后一個(gè)元素，相比于header在內(nèi)容和功能上面更加自由， 但是一般包含一些文字和按鈕。

在header/footer中一個(gè)水平的導(dǎo)航欄或者tab頁是非常常見的;jQuery Mobile包含了 導(dǎo)航條部件 ，該部件能將一個(gè)無序列表(ul)鏈接變成一個(gè)水平分布的按鈕欄。 /p>

Toolbar 位置選項(xiàng)

Header 和 footers 可以用不同方式調(diào)整他們?cè)陧撁嬷械奈恢?。默認(rèn)情況下，toolbar 會(huì)使用"inline" positioning 模式 ，該模式中，header 和footer 會(huì)位于自然文檔流中(即默認(rèn)的HTML行為)，這樣可以確保它們?cè)谒械脑O(shè)備中可見 (不管設(shè)備是否支持JavaScript和css)。

"fixed" positioning 模式提供了一個(gè)無視人為滾動(dòng)頁面保持固定位置的 toolbar，toolbar會(huì)像"inline"模式一樣出現(xiàn)在它們?cè)陧撁嬷性嫉奈恢茫悄銤L動(dòng)滾動(dòng)條使toolbar離開視線時(shí)， 框架會(huì)通過動(dòng)態(tài)重新調(diào)整toolbar的位置好讓toolbar以動(dòng)畫的效果重新出現(xiàn)在當(dāng)前瀏覽器視口的頂部或者底部。

在任何時(shí)候，輕按屏幕會(huì)切換固定工具欄的可視性：輕按一次顯示，再按一次隱藏。 這使用戶可以選擇隱藏工具欄， 來使得屏幕顯示的內(nèi)容更多。

要為header或footer設(shè)置此行為，為toolbar的容器添加 data-position="fixed" 屬性。

"fullscreen" position 模式 和固定模式一樣， 但是不會(huì)在頂部和底部出現(xiàn)，除非你點(diǎn)擊頁面。 在創(chuàng)建沉浸式應(yīng)用時(shí)(如照片或視頻瀏覽器)非常有用，你可以全屏瀏覽， 而toolbar會(huì)在你需要時(shí)輕觸屏幕來唄喚出。請(qǐng)記住，在這種模式下，toolbar出現(xiàn)時(shí)會(huì)覆蓋頁面內(nèi)容，因此最好是在特定情況下使用此模式。#p#

頭結(jié)構(gòu)

header通常是頁面頂部包含頁面標(biāo)題文字和可選按鈕以及定位到左側(cè)和/或右導(dǎo)航的工具條。

標(biāo)題文本通常是一個(gè)H1標(biāo)題元素，但它可以使用任何級(jí)別的標(biāo)題(H1 - H6)的，以體現(xiàn)語義的靈活性。 例如，一個(gè)頁面包含多個(gè) 'page '時(shí)，可以使用H1表示的‘首頁’的標(biāo)題，H2元素表示二級(jí)‘頁面’的標(biāo)題。 默認(rèn)情況下所有標(biāo)題級(jí)別是相同的風(fēng)格，以保持視覺上的一致性。

<div data-role="header"> 
<h1>頁面標(biāo)題</h1> 
</div> 

默認(rèn) header 的特性

header工具欄默認(rèn)被設(shè)置為'a'主題調(diào)板(黑色)，但是你可以方便的 設(shè)置主題調(diào)板.

Back頁面標(biāo)題

看到 "back" 按鈕沒?框架會(huì)自動(dòng)在每個(gè)頁面生成該按鈕， 以簡(jiǎn)化創(chuàng)建通用導(dǎo)航條的過程，要阻止header中自動(dòng)添加該按鈕，你可以自行在左邊添加按鈕 或者為header容器添加 data-backbtn="false" 屬性。

添加按鈕

在標(biāo)準(zhǔn)header配置中,文本旁邊有很多位置可供添加按鈕。每個(gè)按鈕通常都是一個(gè) a標(biāo)簽，但是任何可用的按鈕標(biāo)簽都可以添加。 為了節(jié)省空間，在工具欄中按鈕被設(shè)置為inline styling ， 所以按鈕的寬度會(huì)和它所包含了文本、按鈕所匹配。

創(chuàng)建自定義后退按鈕

如果你對(duì)a標(biāo)記使用data-rel="back"屬性，任何在此a上的點(diǎn)擊都會(huì)模擬后退按鈕， 和瀏覽器的歷史按鈕一樣，并會(huì)忽略a標(biāo)記本身的href。當(dāng)鏈接到一個(gè)已有頁面，比如“主頁”， 或者生成后退按鈕時(shí)或者一個(gè)按鈕來關(guān)閉一個(gè)對(duì)話框時(shí)，該屬性十分有用。當(dāng)在你的源文件中使用此特性時(shí)， 請(qǐng)確保提供一個(gè)有意義的href來指向引用頁的URL(這樣才能使得用戶在C級(jí)瀏覽器中也能使用該特性)。 同樣的，請(qǐng)記住如果你只是想要一個(gè)反向過渡而并不實(shí)際回到上一頁，你應(yīng)該使用data-direction="reverse"屬性來替代。

默認(rèn)按鈕定位

header插件會(huì)尋找header容器的直接子元素，并自動(dòng)設(shè)置第一個(gè)鏈接在左邊的位置，第二個(gè)鏈接在右邊。 在以下的例子中，“取消”按鈕會(huì)出現(xiàn)在左邊而“保存”會(huì)出現(xiàn)在右邊。

<div data-role="header" data-position="inline"> 
<a href="index.html" data-icon="delete">取消</a> 
<h1>Edit Contact</h1> 
<a href="index.html" data-icon="check">保存</a> 
</div> 

按鈕會(huì)自動(dòng)適應(yīng)按鈕所在工具欄的調(diào)板顏色，所以在一個(gè)調(diào)板為“a”的header bar里一個(gè)按鈕也會(huì)被設(shè)置為“a”， 除非你單獨(dú)設(shè)置按鈕的 data-theme屬性為其他值(例如b)。

<div data-role="header" data-position="inline"> 
<a href="index.html" data-icon="delete">Cancel</a> 
<h1>Edit Contact</h1> 
<a href="index.html" data-icon="check" data-theme="b">Save</a> 
</div> 

用class控制按鈕的位置

按鈕位置同樣可以用class而不是源代碼的順序來控制。當(dāng)你想按鈕只在右邊時(shí)就非常有用。為a標(biāo)記添加ui-btn-left 或者ui-btn-right class來指定按鈕的位置。

在以下例子中，我們只在右邊添加了一個(gè)按鈕，所以必須要添加 data-backbtn="false" 來防止出現(xiàn)后退按鈕，而右邊的按鈕則需要添加ui-btn-right class 。

<div data-role="header" data-position="inline" data-backbtn="false"> 
<h1>頁面標(biāo)題</h1> 
<a href="index.html" data-icon="gear" class="ui-btn-right">選項(xiàng)</a> 
</div> 

自定義后退按鈕的文本

如果您想配置后退按鈕的文本，您可以使用 data-back-btn-text="previous" 屬性， 或者以編程方式設(shè)置插件的選項(xiàng)：$.mobile.page.prototype.options.backBtnText = "previous";。如果你采用編程方式，請(qǐng)?jiān)趍obileinit事件的處理程序中設(shè)置該選項(xiàng)。

自定義 header配置

如果你要?jiǎng)?chuàng)建一個(gè)自定義的header，將你自己的標(biāo)記包裹在一個(gè) div容器中(在header容器中)， 插件不會(huì)應(yīng)用自動(dòng)按鈕邏輯，所以你可以編寫自定義樣式來布局你的header內(nèi)容。#p#

Footer 結(jié)構(gòu)

footer 和 header的基本機(jī)構(gòu)相同，除了它使用data-role="footer"來定義。

<div data-role="footer">  
    <h4>Footer content</h4>  
</div>  

footer工具欄默認(rèn)會(huì)被設(shè)置為"a"調(diào)板(黑色)，但是你可以輕松的更改。

Footer content

在配置方面footer和header也非常相似，主要的區(qū)別是footer被設(shè)計(jì)為更輕便的結(jié)構(gòu)來實(shí)現(xiàn)更靈活的配置， 所以框架不會(huì)像在header中那樣自動(dòng)排列按鈕。

添加按鈕

任何連接或者合法的按鈕標(biāo)記都可以添加到footer中并唄自動(dòng)轉(zhuǎn)變成一個(gè)按鈕。 為了節(jié)省空間，工具欄中的按鈕會(huì)自動(dòng)被設(shè)置inline styling ，讓按鈕寬度能適應(yīng)其內(nèi)容。

默認(rèn)情況下，工具欄沒有任何空白(padding)位置來填充導(dǎo)航條和其他小部件，要使工具欄包含空白，添加class="ui-bar" 。

  
<div data-role="footer" class="ui-bar"> 
    <a href="index.html" data-role="button" data-icon="delete">Remove</a> 
    <a href="index.html" data-role="button" data-icon="plus">Add</a> 
    <a href="index.html" data-role="button" data-icon="arrow-u">Up</a> 
    <a href="index.html" data-role="button" data-icon="arrow-d">Down</a> 
</div> 

以下會(huì)創(chuàng)建一行包含按鈕的工具欄

要為按鈕分組的話請(qǐng)將連接包裹在一個(gè)wrapper(通常是div)中并為其添加 data-role="controlgroup" 和 data-type="horizontal" 屬性。

<div data-role="controlgroup" data-type="horizontal"> 

navbar 示例

jQuery Mobile有一個(gè)非?；镜腘avbar部件非常有用，它提供多達(dá)5個(gè)按鈕和可選的圖標(biāo)，通常位于header/footer里面。

navbar通常是一個(gè)包裹在一個(gè)容器里的無序鏈接列表，容器設(shè)置data-role="navbar" 屬性。 要設(shè)置其中一個(gè)鏈接是激活(被選擇)的狀態(tài)，為鏈接添加 class="ui-btn-active" 。 在下面這個(gè)例子中我們有一個(gè)位于footer中包含兩個(gè)按鈕的navbar，其中一個(gè)被設(shè)置為激活狀態(tài)：

<div data-role="footer"> 
    <div data-role="navbar"> 
        <ul> 
            <li><a href="a.html" class="ui-btn-active">One</a></li> 
            <li><a href="b.html">Two</a></li> 
        </ul> 
    </div><!-- /navbar --> 
</div><!-- /footer --> 

#p#

固定工具欄會(huì)在你卷動(dòng)后重新出現(xiàn)

這是一個(gè)jQuery Mobile框架里“fixed” header/footer的演示。滾動(dòng)會(huì)導(dǎo)致header和footer消失，停止?jié)L動(dòng)時(shí)會(huì)再度出現(xiàn)， 任何時(shí)候輕觸屏幕或者滑動(dòng)屏幕都會(huì)使得工具欄重新出現(xiàn)或者消失。

該行為使用 data-position="fixed"屬性來設(shè)置。

<div data-role="header" data-position="fixed"> 
    <h1>Fixed toolbars</h1> 
</div> 

#p#

[[37221]]

這個(gè)頁面演示了“全屏”工具欄模式。 這個(gè)工具欄是用來處理在特殊情況下， 你想用內(nèi)容來填充整個(gè)屏幕，并且希望header和footer 工具欄在點(diǎn)擊屏幕的時(shí)候出現(xiàn)或消失時(shí)所使用的模式 -- 通常適用于照片，圖像或者視頻瀏覽的情況。

要開啟該特性，你需要將data-fullscreen="true" 添加到你的 page(data-role="page"的div)中，并且為header和footer容器(div) 同時(shí)添加data-position="fixed" 屬性。

請(qǐng)記住，在這種模式下，如同demo展示的那樣工具欄會(huì)覆蓋頁面內(nèi)容，當(dāng)工具欄可見時(shí)不是全部?jī)?nèi)容都能夠看見的。#p#

header 和footer都可以被主題化(默認(rèn)為a調(diào)板)，因?yàn)樵谝曈X上工具欄通常是頁面的主要層級(jí)。

主題化 headers和footers

要設(shè)置主題依然和其他一樣，使用data-theme屬性。例如(b調(diào)板，藍(lán)色):

<div data-role="header" data-theme="b">  
    <h1>Page Title</h1>  
</div>  

設(shè)置工具欄中的button主題

任何工具欄里的button都會(huì)自動(dòng)被設(shè)置為和工具欄一樣的主題色，要額外設(shè)置也請(qǐng)使用data-theme 屬性。、 例如我們?yōu)閔eader設(shè)置的是“C”(亮灰)調(diào)板，則button也會(huì)變成“c”調(diào)板，要設(shè)置其他主題，請(qǐng)為button的a標(biāo)簽設(shè)置額外的 data-theme屬性。

<a href="add-user.php" data-theme="b">Save</a>