標題欄
頁眉通常會包含頁眉標題/LOGO 或一到兩個按鈕（通常是首頁、選項或搜索按鈕）
<div data-role="header">
<a href="#" data-role="button">首頁</a>
<h1>歡迎來到我的主頁</h1>
<!--<a href="#" data-role="button">搜索</a>-->
</div>
兩個按鈕
源碼
查看代碼，可以看到，jquerymobile自動為a鏈接加上了
ui-btn-left/ui-btn-right 的類名。
當我把h1前面的按鈕去掉時，搜索的按鈕依舊顯示在標題的前面
<div data-role="header">
<h1>歡迎來到我的主頁</h1>
<a href="#" data-role="button">搜索</a>
</div>
一個按鈕
源碼
可以看到，就算代碼中將
a 寫在 h1 的后面，默認也會在 a 上加上類名 ui-btn-left，那如果我們需要將按鈕顯示在右邊怎么辦呢？我們可以在
a 上自己寫上類名 ui-btn-right。
<div data-role="page">
<div data-role="header">
<h1>歡迎訪問我的主頁</h1>
<a href="#" data-role="button" data-icon="search" class="ui-btn-right">搜索</a>
</div>
</div>
ui-btn-right
頁腳欄
頁腳可以放置多個按鈕，單個按鈕不會居中顯示
<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>
頁腳
如果需要按鈕居中顯示，可以給父級div加上 ui-btn 的類名：
ui-btn
按鈕也可以設(shè)置垂直或水平排列的方式：
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal"><!--vertical-->
<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>
一定要加上data-role="controlgroup"，不然即使設(shè)置data-type="horizontal"，也會以垂直的方式展現(xiàn)
data-type="horizontal"
data-type="vertical"
定位頁眉和頁腳
-
inline- 默認。頁眉和頁腳與頁面內(nèi)容位于行內(nèi)。 -
fixed- 頁面和頁腳會留在頁面頂部和底部。 -
fullscreen- 與 fixed 類似;頁面和頁腳會留在頁面頂部和底部，but also over the page content. It is also slightly see-through
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>
上下有間隔，頁眉頁腳不會遮擋文檔內(nèi)容，向下滾動時，輕觸可以隱藏頁眉，向上滾動時，輕觸可以隱藏頁腳。
TIPS：如果需要啟用全面定位，請使用 data-position="fixed"，并向該元素添加 data-fullscreen 屬性；對于同時擁有 fixed 和 fullscreen 定位，觸摸屏幕將同時隱藏或顯示頁眉及頁腳。
