toolbar

工具栏元素通常位于头部和尾部内， 让导航易于访问。

头部栏一般包含页面标题或一两个按钮（通常是首页、选项或搜索），我们通过class属性来控制。例如要在标题左侧展示一个主页按钮，若是在右侧则class='ui-btn-icon-right'。如下代码：

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

尾部栏比头部栏更灵活，在整个页面中它们更具功能性和可变性。因此可以包含尽可能多的按钮,还可以将尾部中的按钮进行水平或垂直组合。如下代码：

<div data-role="footer" style="text-align:center;">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">后退</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">主页</a>
    <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">前进</a>
  </div>
</div>

头部和尾部可以通过三种方式进行定位，通过属性data-position来控制：

Inline - 默认。头部栏和尾部栏与页面内容内联。
Fixed - 头部栏和尾部栏固定在页面的顶部和底部。
Fullscreen - 与 Fixed 定位模式基本相同，头部栏和尾部栏固定在页面的顶部和底部。

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>