jQuery Mobile 工具栏

<div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="home">主页</a></li>
        <li><a href="#" data-icon="arrow-r">第二页</a></li>
        <li><a href="#" data-icon="search">搜索</a></li>
      </ul>

    </div>

导航中的图标就像 "ui-btn-icon-position" 类一样 (图标章节有详细说明), 你可以设置图标显示的位置： top（头部）, right（右侧）, bottom（底部） 或 left（左侧）。

图标位置在导航栏容器上设置，使用 data-iconpos 属性来指定位置，如果未指定，图标在上

当导航栏中的某个链接被点击，它将获得被选中（按下）的外观。

如果想在不点击链接时获得这种外观，请使用 class="ui-btn-active"

 <li><a href="#page2" class="ui-btn-active">页面二</a></li>

对于多个页面，您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点，请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class：

<li><a href="#page2" class="ui-btn-active ui-state-persist">页面二</a></li>