工具欄元素通常位于頭部和尾部?jī)?nèi) - 讓導(dǎo)航易于訪問(wèn)：
頭部欄
頭部欄一般包含頁(yè)面標(biāo)題/logo 或一兩個(gè)按鈕（通常是首頁(yè)、選項(xiàng)或搜索）。
您可以添加按鈕到頭部的左側(cè)或右側(cè)。
下面的代碼，將添加一個(gè)按鈕到頭部標(biāo)題文本的左側(cè)，添加一個(gè)按鈕到頭部標(biāo)題文本的右側(cè)：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主頁(yè)</a> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>注意我們?cè)陬^部按鈕上添加了 "ui-corner-all" 和 "ui-shadow" 類，使他看起來(lái)更美觀點(diǎn)。</p> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
下面的代碼，將添加一個(gè)按鈕到頭部標(biāo)題文本的左側(cè)：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主頁(yè)</a> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
但是，如果您把按鈕鏈接放置在 <h1> 元素之后，將無(wú)法顯示右側(cè)的文本。要添加一個(gè)按鈕到頭部標(biāo)題的右側(cè)，請(qǐng)指定 class 為 "ui-btn-right"：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
| 頭部可以包含一個(gè)或兩個(gè)按鈕，而尾部沒有限制。 |
尾部欄
尾部欄比頭部欄更靈活 - 在整個(gè)頁(yè)面中它們更具功能性和可變性，因此可以包含盡可能多的按鈕：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主頁(yè)</a> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a> </div> <div data-role="main" class="ui-content"> <p>該按鈕僅用于演示，不會(huì)有任何效果。</p> <p>注意我們?cè)陬^部按鈕上添加了 "ui-corner-all" 和 "ui-shadow" 類，使他看起來(lái)更美觀點(diǎn)。</p> </div> <div data-role="footer"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上關(guān)注我</a> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
注意：尾部的樣式與頭部不同（沒有內(nèi)邊距和空間，且按鈕不居中）。我們可以使用簡(jiǎn)單的樣式來(lái)解決這個(gè)問(wèn)題：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主頁(yè)</a> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>該按鈕僅用于演示，不會(huì)有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram關(guān)注我</a> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
您還可以將尾部中的按鈕進(jìn)行水平或垂直組合：
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主頁(yè)</a> <h1>歡迎訪問(wèn)我的主頁(yè)</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>該按鈕僅用于演示，不會(huì)有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上關(guān)注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上關(guān)注我</a> </div> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
定位頭部欄和尾部欄
頭部和尾部可以通過(guò)三種方式進(jìn)行定位：
Inline - 默認(rèn)。頭部欄和尾部欄與頁(yè)面內(nèi)容內(nèi)聯(lián)。
Fixed - 頭部欄和尾部欄固定在頁(yè)面的頂部和底部。
Fullscreen - 與 Fixed 定位模式基本相同，頭部欄和尾部欄固定在頁(yè)面的頂部和底部。但是當(dāng)他工具欄滾動(dòng)出屏幕之外時(shí)，不會(huì)自動(dòng)重新顯示，除非點(diǎn)擊屏幕，這對(duì)于圖片或視頻類有提升代入感的應(yīng)用是非常有用的。注意這種模式下工具欄會(huì)遮住頁(yè)面內(nèi)容，所以最好用在比較特殊的場(chǎng)合下。
使用 data-position 屬性來(lái)定位頭部欄和尾部欄：
Inline 定位（默認(rèn)）
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline"> <h1>行內(nèi)頁(yè)眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b> 如果要看到效果，則需要調(diào)整窗口大小使?jié)L動(dòng)條可用。</p> <p>可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.</p> </div> <div data-role="footer" data-position="inline"> <h1>行內(nèi)頁(yè)腳</h1> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
Fixed 定位
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Fixed 頁(yè)眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b>如果要看到效果，則需要調(diào)整窗口大小使?jié)L動(dòng)條可用。</p> <p><b>提示：</b> 如果滾動(dòng)條可用，那么敲擊屏幕將隱藏或顯示頁(yè)眉/頁(yè)腳。效果會(huì)根據(jù)您在頁(yè)面上的位置而變化。</p> <p>可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.</p> </div> <div data-role="footer" data-position="fixed"> <h1>Fixed 頁(yè)腳</h1> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
要啟用全屏定位，請(qǐng)使用 data-position="fixed"，并添加 data-fullscreen 屬性到元素：
Fullscreen 定位
實(shí)例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 頁(yè)眉</h1> </div> <div data-role="main" class="ui-content"><br><br> <p><b>提示:</b> T如果要看到效果，則需要調(diào)整窗口大小使?jié)L動(dòng)條可用。</p> <p><b>提示:</b> 敲擊屏幕會(huì)隱藏或顯示頁(yè)眉和頁(yè)腳。</p> <p>可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.可滾動(dòng)的文本.</p> </div> <div data-role="footer" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 頁(yè)腳</h1> </div> </div> </body> </html>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
提示：全屏定位適用于照片、圖像和視頻。
提示：固定定位和全屏定位中，通過(guò)點(diǎn)擊屏幕將隱藏和顯示頭部欄和尾部欄。
更多實(shí)例
在工具欄上只顯示圖標(biāo)
在工具欄上只顯示圖標(biāo)可以使用 ui-btn-icon-notext 類。