jQuery Mobile框架提供了两种标准类型的工具栏。

1.Headers bar

Headers bar从当视图页面的标题作用。在一般情况下，Headers bar位于一个页面或视图的顶部，数据该页面或视图的第一个元素，通常包含一个标题和两个按钮（分别在标题的两）。

2.Footer bar

Footer bar一般位于一个页面或视图的底部，属于该页面或视图的最后一个元素。相对于Header bar，Footer bar的内容和功能范围相对广泛，它除了包含文本和按钮外，还允许防止导航条、表单元素如选择菜单等。

header区域和footer区域，例如一下代码定义header区域和footer区域：

<div data-role="header"header页眉区域</div>
<div data-role="footer"footer页脚区域</div>

如果使用HTML5标准新元素定义该区域，代码如下:

<header data-role="header"header页眉区域</header>
<footer data-role="header"footer页眉区域</footer>

需要注意的是，在本文中后面介绍的各种工具栏的用法和例子时，将主要使用上述的header元素和footer元素作为页面和页脚的代码元素。但这样并不等于使用div元素定义不好，笔者只是认为使用HTML5新元素更能说明页面的语义。

定义header bar工具栏和footer bar工具栏非常简单，代码如下：

<div data-role="page">
<header data-role="header">
<h1>header bar</h1>
</header>
<div>内容区域</div>
<footer data-role="header">
<h1>footer bar</h1>
</footer>
</div>