Toolbar 類型

在jQuery Mobile中, 有兩種標準類型的工具欄： Headers 和 Footers.

Header bar 充當頁面標題的作用, 通常是 mobile page中的第一個元素，一般包含有一個頁面標題和兩個按鈕。

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

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

Toolbar 位置選項

Header 和 footers 可以用不同方式調整他們在頁面中的位置。默認情況下，toolbar 會使用"inline" positioning 模式 ，該模式中，header 和footer 會位于自然文檔流中(即默認的HTML行為)，這樣可以確保它們在所有的設備中可見 (不管設備是否支持JavaScript和css)。

"fixed" positioning 模式提供了一個無視人為滾動頁面保持固定位置的 toolbar，toolbar會像"inline"模式一樣出現在它們在頁面中原始的位置，但是你滾動滾動條使toolbar離開視線時， 框架會通過動態重新調整toolbar的位置好讓toolbar以動畫的效果重新出現在當前瀏覽器視口的頂部或者底部。

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

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

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

頭結構

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

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

<div data-role="header"> 
<h1>頁面標題</h1> 
</div> 

默認 header 的特性

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

Back頁面標題

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

添加按鈕

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

創建自定義后退按鈕

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

默認按鈕定位

header插件會尋找header容器的直接子元素，并自動設置第一個鏈接在左邊的位置，第二個鏈接在右邊。 在以下的例子中，“取消”按鈕會出現在左邊而“保存”會出現在右邊。

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

按鈕會自動適應按鈕所在工具欄的調板顏色，所以在一個調板為“a”的header bar里一個按鈕也會被設置為“a”， 除非你單獨設置按鈕的 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而不是源代碼的順序來控制。當你想按鈕只在右邊時就非常有用。為a標記添加ui-btn-left 或者ui-btn-right class來指定按鈕的位置。

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

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

自定義后退按鈕的文本

如果您想配置后退按鈕的文本，您可以使用 data-back-btn-text="previous" 屬性， 或者以編程方式設置插件的選項：$.mobile.page.prototype.options.backBtnText = "previous";。如果你采用編程方式，請在mobileinit事件的處理程序中設置該選項。

自定義 header配置

如果你要創建一個自定義的header，將你自己的標記包裹在一個 div容器中(在header容器中)， 插件不會應用自動按鈕邏輯，所以你可以編寫自定義樣式來布局你的header內容。#p#

Footer 結構

footer 和 header的基本機構相同，除了它使用data-role="footer"來定義。

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

footer工具欄默認會被設置為"a"調板(黑色)，但是你可以輕松的更改。

Footer content

在配置方面footer和header也非常相似，主要的區別是footer被設計為更輕便的結構來實現更靈活的配置， 所以框架不會像在header中那樣自動排列按鈕。

添加按鈕

任何連接或者合法的按鈕標記都可以添加到footer中并唄自動轉變成一個按鈕。 為了節省空間，工具欄中的按鈕會自動被設置inline styling ，讓按鈕寬度能適應其內容。

默認情況下，工具欄沒有任何空白(padding)位置來填充導航條和其他小部件，要使工具欄包含空白，添加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> 

以下會創建一行包含按鈕的工具欄

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

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

navbar 示例

jQuery Mobile有一個非常基本的Navbar部件非常有用，它提供多達5個按鈕和可選的圖標，通常位于header/footer里面。

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

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

固定工具欄會在你卷動后重新出現

這是一個jQuery Mobile框架里“fixed” header/footer的演示。滾動會導致header和footer消失，停止滾動時會再度出現， 任何時候輕觸屏幕或者滑動屏幕都會使得工具欄重新出現或者消失。

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

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

#p#

[[37221]]

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

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

請記住，在這種模式下，如同demo展示的那樣工具欄會覆蓋頁面內容，當工具欄可見時不是全部內容都能夠看見的。#p#

header 和footer都可以被主題化(默認為a調板)，因為在視覺上工具欄通常是頁面的主要層級。

主題化 headers和footers

要設置主題依然和其他一樣，使用data-theme屬性。例如(b調板，藍色):

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

設置工具欄中的button主題

任何工具欄里的button都會自動被設置為和工具欄一樣的主題色，要額外設置也請使用data-theme 屬性。、 例如我們為header設置的是“C”(亮灰)調板，則button也會變成“c”調板，要設置其他主題，請為button的a標簽設置額外的 data-theme屬性。

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