jQuery Mobile 工具栏
jQuery Mobile 工具栏介绍
jQuery Mobile 工具栏是一个可以在不同页面或应用程序中提供常规导航的组件。通常用于添加按钮、菜单以及其他类型的导航。
工具栏基本结构
工具栏组件的基础结构如下：
<div data-role="header">
<h1>工具栏标题</h1>
<a href="#" data-icon="bars" data-iconpos="notext">菜单</a>
<a href="#" data-icon="search" data-iconpos="notext">搜索</a>
</div>
该结构由 data-role="header" 标识出该组件为头部，h1 标签定义工具栏的标题，其他则为工具栏中的按钮，使用 data-icon 属性定义按钮图标，data-iconpos 属性定义图标位置。
工具栏样式
jQuery Mobile 工具栏组件提供了多种预设样式和主题。我们可以使用 data-theme 属性定义样式：
<div data-role="header" data-theme="b">
<h1>工具栏标题</h1>
</div>
其中 data-theme="b" 定义了一个蓝色的工具栏。
同时我们也可以使用 CSS 定义自己的样式，如：
.my-header {
background-color: #fff;
color: #333;
border: none;
}
<div data-role="header" class="my-header">
<h1>工具栏标题</h1>
</div>
工具栏按钮
工具栏中可以包含多个按钮，使用按钮可以实现一些常用的操作，例如返回主页、搜索等。
图标按钮
使用 data-icon 属性定义按钮图标，如：
<a href="#" data-icon="bars" data-iconpos="notext">菜单</a>
文字按钮
在按钮的内部直接使用文字即可，如：
<a href="#">返回</a>
图标 + 文字按钮
使用 data-icon和文字混合创建图标和文字按钮，如：
<a href="#" data-icon="arrow-l">上一页</a>
图标和计数器按钮
在按钮内部添加一个计数器，如：
<a href="#" data-icon="cart" class="ui-btn-right" data-count="3">购物车</a>
工具栏导航
jQuery Mobile 工具栏组件还可以用于创建基于 Ajax 的导航栏，如：
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>jQuery Mobile</h1>
<a href="#" data-icon="bars" id="nav-panel-open">菜单</a>
<a href="#" data-icon="search" class="ui-btn-right">搜索</a>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
工具栏中的 data-role="navbar" 属性标识了这是一个导航栏，ul 中为具体导航栏中的选项。
总结
jQuery Mobile 工具栏组件是一种实现基本导航的实用组件，我们可以根据需求来自定义样式和添加不同功能。相信使用过 jQuery Mobile 的同学都对其非常熟悉，掌握其用法对于网站或应用程序开发非常有帮助。