jQuery Mobile 工具栏

标题栏

页眉通常会包含页眉标题/LOGO 或一到两个按钮（通常是首页、选项或搜索按钮）

  首页
  
欢迎来到我的主页
  

两个按钮

源码

查看代码，可以看到，jquerymobile自动为a链接加上了 ui-btn-left/ui-btn-right 的类名。

当我把h1前面的按钮去掉时，搜索的按钮依旧显示在标题的前面

  
欢迎来到我的主页
  搜索

一个按钮

源码

可以看到，就算代码中将 a 写在 h1 的后面，默认也会在 a 上加上类名 ui-btn-left，那如果我们需要将按钮显示在右边怎么办呢？
我们可以在 a 上自己写上类名 ui-btn-right。

  
  
    
欢迎访问我的主页
    搜索
  

ui-btn-right

---

页脚栏

页脚可以放置多个按钮，单个按钮不会居中显示

  转播到新浪微博
  转播到腾讯微博
  转播到 QQ 空间

页脚

如果需要按钮居中显示，可以给父级div加上 ui-btn 的类名：

ui-btn

按钮也可以设置垂直或水平排列的方式：

    

      转播到新浪微博
      转播到腾讯微博
      转播到QQ空间
    
  

一定要加上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

上下有间隔，页眉页脚不会遮挡文档内容，向下滚动时，轻触可以隐藏页眉，向上滚动时，轻触可以隐藏页脚。

TIPS：如果需要启用全面定位，请使用 data-position="fixed"，并向该元素添加 data-fullscreen 属性；对于同时拥有 fixed 和 fullscreen 定位，触摸屏幕将同时隐藏或显示页眉及页脚。