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