<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>
<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>