jQuery Mobile的工具栏
工具栏元素通常放在里面的页眉和页脚 - 为“易于访问的”导航：
标题栏
首标位于页面的顶部，并且通常包含一个页面名称/标志或者一个或两个按钮（通常在家，选项或搜索）。
可以添加按钮的左侧和/或右侧的标题。
下面的代码，将增加一个“Home”按钮，向左和“搜索”按钮，标题标题文本的权利：
例
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> 试一试» 下面的代码将只添加一个按钮，标题标题的左边：
例
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> 试一试» 下面的代码将只添加一个按钮，标题标题的右侧：
例
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> 试一试» 一个头可包含一个或两个按钮，而尾没有限制。
页脚酒吧
页脚位于页面底部。
页脚比头更灵活 - 它是多个官能和整个页多变，并根据需要可以因此包含许多按钮：
例
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> 试一试» 提示：在页脚的按钮默认情况下不居中。 为了解决这个问题，只需使用CSS：
您在页脚也可以组按钮水平或垂直：
例
<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">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> 试一试» 定位页眉和页脚
页眉和页脚可以定位在三个方面：
- Inline -默认。 页眉和页脚是内嵌在网页内容
- Fixed -页眉和页脚将继续定位在页面的顶部和底部
- Fullscreen -行为类似固定; 页眉和页脚将保持定位在顶部和底部，而且在网页内容。 它也稍微看穿
使用数据位置属性来定位你的页眉和页脚：
列式位置（默认）
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div> 试一试» 固定位置
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div> 试一试» 要启用全屏位置，使用的数据位置=“固定”和数据全屏属性添加到元素：
全屏位置
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div> 试一试» 提示：全屏位置是理想的照片，图像和视频。
提示：轻击屏幕会隐藏和显示页眉和页脚固定和全屏位置。
更多示例
仅显示工具栏的图标
使用ui-btn-icon-notext类只显示在页眉和页脚按钮的图标。