jQuery Mobile的工具欄
工具欄元素通常放在裡面的頁眉和頁腳 - 為“易於訪問的”導航：
標題欄
首標位於頁面的頂部，並且通常包含一個頁面名稱/標誌或者一個或兩個按鈕（通常在家，選項或搜索）。
可以添加按鈕的左側和/或右側的標題。
下面的代碼，將增加一個“Home”按鈕，向左和“搜索”按鈕，標題標題文本的權利：
例
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> 試一試» 下面的代碼將只添加一個按鈕，標題標題的左邊：
例
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> 試一試» 下面的代碼將只添加一個按鈕，標題標題的右側：
例
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> 試一試» 一個頭可包含一個或兩個按鈕，而尾沒有限制。
頁腳酒吧
頁腳位於頁面底部。
頁腳比頭更靈活 - 它是多個官能和整個頁多變，並根據需要可以因此包含許多按鈕：
例
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> 試一試» 提示：在頁腳的按鈕默認情況下不居中。 為了解決這個問題，只需使用CSS：
您在頁腳也可以組按鈕水平或垂直：
例
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> 試一試» 定位頁眉和頁腳
頁眉和頁腳可以定位在三個方面：
- Inline -默認。 頁眉和頁腳是內嵌在網頁內容
- Fixed -頁眉和頁腳將繼續定位在頁面的頂部和底部
- Fullscreen -行為類似固定; 頁眉和頁腳將保持定位在頂部和底部，而且在網頁內容。 它也稍微看穿
使用數據位置屬性來定位你的頁眉和頁腳：
列式位置（默認）
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> 試一試» 固定位置
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> 試一試» 要啟用全屏位置，使用的數據位置=“固定”和數據全屏屬性添加到元素：
全屏位置
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> 試一試» 提示：全屏位置是理想的照片，圖像和視頻。
提示：輕擊屏幕會隱藏和顯示頁眉和頁腳固定和全屏位置。
更多示例
僅顯示工具欄的圖標
使用ui-btn-icon-notext類只顯示在頁眉和頁腳按鈕的圖標。