标题栏
页眉通常会包含页眉标题/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">转播到新浪微博</a>
<a href="#" data-role="button">转播到腾讯微博</a>
<a href="#" data-role="button">转播到 QQ 空间</a>
</div>
页脚
如果需要按钮居中显示，可以给父级div加上 ui-btn 的类名：
ui-btn
按钮也可以设置垂直或水平排列的方式：
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal"><!--vertical-->
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a>
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a>
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a>
</div>
</div>
一定要加上data-role="controlgroup"，不然即使设置data-type="horizontal"，也会以垂直的方式展现
data-type="horizontal"
data-type="vertical"
定位页眉和页脚
-
inline- 默认。页眉和页脚与页面内容位于行内。 -
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>
上下有间隔，页眉页脚不会遮挡文档内容，向下滚动时，轻触可以隐藏页眉，向上滚动时，轻触可以隐藏页脚。
TIPS：如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性；对于同时拥有 fixed 和 fullscreen 定位，触摸屏幕将同时隐藏或显示页眉及页脚。
