jQuery Mobile 工具栏

头部栏

头部栏一般包含页面标题/logo 或一两个按钮（通常是首页、选项或搜索）。

您可以添加按钮到头部的左侧或右侧。

下面的代码，将添加一个按钮到头部标题文本的左侧，添加一个按钮到头部标题文本的右侧：

实例

<div data-role="header">
  <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
  <h1>欢迎访问我的主页</h1>
  <a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
</div>

尾部栏

尾部栏比头部栏更灵活 - 在整个页面中它们更具功能性和可变性，因此可以包含尽可能多的按钮：

实例

<div data-role="footer">
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
  <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>

定位头部栏和尾部栏

头部和尾部可以通过三种方式进行定位：

• Inline - 默认。头部栏和尾部栏与页面内容内联。
  Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
  Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。但是当他工具栏滚动出屏幕之外时，不会自动重新显示，除非点击屏幕，这对于图片或视频类有提升代入感的应用是非常有用的。注意这种模式下工具栏会遮住页面内容，所以最好用在比较特殊的场合下。
  使用 data-position 属性来定位头部栏和尾部栏：
  Inline 定位（默认）
  <div data-role="header" data-position="inline"></div>
  <div data-role="footer" data-position="inline"></div>