jQuery Mobile 工具栏

标题栏

页眉通常会包含页眉标题/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"

---

定位页眉和页脚

1. inline - 默认。页眉和页脚与页面内容位于行内。
2. fixed - 页面和页脚会留在页面顶部和底部。
3. 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 定位，触摸屏幕将同时隐藏或显示页眉及页脚。