jQuery Mobile 工具欄
工具欄元素常被放置于頁眉和頁腳中 - 以實(shí)現(xiàn)“已訪問”的導(dǎo)航：
標(biāo)題欄
頁眉通常會(huì)包含頁眉標(biāo)題/LOGO 或一到兩個(gè)按鈕（通常是首頁、選項(xiàng)或搜索按鈕）。
您可以在頁眉中向左側(cè)或/以及右側(cè)添加按鈕。
下面的代碼，將向頁眉標(biāo)題文本的左側(cè)添加一個(gè)按鈕，并向右側(cè)添加一個(gè)按鈕：
實(shí)例
<div data-role="header"> <a href="#" data-role="button">首頁</a> <h1>歡迎來到我的主頁</h1> <a href="#" data-role="button">搜索</a> </div>
親自試一試
下面的代碼將向頁眉標(biāo)題的左側(cè)添加一個(gè)按鈕：
<div data-role="header"> <a href="#" data-role="button">首頁</a> <h1>歡迎來到我的主頁</h1> </div>
不過，如果您在 <h1> 元素之后放置按鈕鏈接，那么它不會(huì)顯示在文本右側(cè)。如需向頁眉標(biāo)題的右側(cè)添加按鈕，請(qǐng)規(guī)定類名 "ui-btn-right"：
實(shí)例
<div data-role="header"> <h1>歡迎來到我的主頁</h1> <a href="#" data-role="button" class="ui-btn-right">搜索</a> </div>
親自試一試
提示：頁眉可包含一個(gè)或兩個(gè)按鈕，然而頁腳沒有限制。
頁腳欄
與頁眉相比，頁腳更具伸縮性 - 它們更實(shí)用且多變，所以能夠包含所需數(shù)量的按鈕：
實(shí)例
<div data-role="footer"> <a href="#" data-role="button">轉(zhuǎn)播到新浪微博</a> <a href="#" data-role="button">轉(zhuǎn)播到騰訊微博</a> <a href="#" data-role="button">轉(zhuǎn)播到 QQ 空間</a> </div>
親自試一試
注釋：頁腳與頁眉的樣式不同（它會(huì)減去一些內(nèi)邊距和空白，并且按鈕不會(huì)居中）。如果要修正該問題，請(qǐng)?jiān)陧撃_設(shè)置類名 "ui-btn"：
實(shí)例
<div data-role="footer" class="ui-btn">
親自試一試
您也能夠選擇在頁腳中水平還是垂直地組合按鈕：
實(shí)例
<div data-role="footer" class="ui-btn"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到新浪微博</a> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到騰訊微博</a> <a href="#" data-role="button" data-icon="plus">轉(zhuǎn)播到 QQ 空間</a> </div> </div>
親自試一試
定位頁眉和頁腳
放置頁眉和頁腳的方式有三種：
- Inline - 默認(rèn)。頁眉和頁腳與頁面內(nèi)容位于行內(nèi)。
- Fixed - 頁面和頁腳會(huì)留在頁面頂部和底部。
- Fullscreen - 與 fixed 類似;頁面和頁腳會(huì)留在頁面頂部和底部，but also over the page content. It is also slightly see-through
請(qǐng)使用 data-position 屬性來定位頁眉和頁腳：
Inline 定位（默認(rèn)）
<div data-role="header" data-position="inline"></div> <div data-role="footer" data-position="inline"></div>
親自試一試
Fixed 定位
<div data-role="header" data-position="fixed"></div> <div data-role="footer" data-position="fixed"></div>
親自試一試
如果需要啟用全面定位，請(qǐng)使用 data-position="fixed"，并向該元素添加 data-fullscreen 屬性：
Fullscreen 定位
<div data-role="header" data-position="fixed" data-fullscreen="true"></div> <div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
親自試一試
提示：fullscreen 對(duì)于照片、圖像和視頻非常理想。
提示：對(duì)于 fixed 和 fullscreen 定位，觸摸屏幕將隱藏和顯示頁眉及頁腳。