jQuery Mobile的导航栏
导航条由一组链接，水平对齐，通常在页眉或页脚：
酒吧被编码为一个包裹里面的链接的无序列表<div>有元素data-role="navbar"属性：
例
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
试一试» 默认情况下，导航条中的链接会自动变成一个按钮（不需要class="ui-btn"或data-role="button" ）。
这些按钮是默认情况下，尽可能广泛的内容。 使用一个无序列表平分按钮：1按钮将宽度的100％，2个按钮共享各占50％，3个按键33.3％等。但是，如果你在导航栏指定多于5个按钮，它会换到多行（见下面“更多示例”）。
在导航按钮图标
要将图标添加到您的导航按钮，使用数据图标的属性：
数据图标属性使用相同的值作为“图标”一章中指定的CSS类。 唯一的区别是，而不是指定class="ui-icon- value " ，指定的属性data-icon=" value " 。
| 属性值 | 描述 | 图标 |
|---|---|---|
| data-icon="home" | 家 | |
| data-icon="arrow-r" | 右箭头 | |
| data-icon="search" | 搜索 |
对于所有的jQuery Mobile的按钮图标的完整参考，请访问我们的jQuery Mobile的图标参考 。
定位图标
就像在"ui-btn-icon- position "类（在“图标”一章规定的），你可以选择其中的图标应该定位导航按钮： top, right, bottom或left 。
的图标的位置被设定在导航栏容器上 - 这是不可能的每个单独的按钮的链接位置。 使用data-iconpos属性指定的位置：
| 属性值 | 描述 | 例 |
|---|---|---|
| data-iconpos="top" | 顶部排列图标 | 尝试一下 |
| data-iconpos="right" | 右边的图标排列 | 尝试一下 |
| data-iconpos="bottom" | 底部的图标排列 | 尝试一下 |
| data-iconpos="left" | 左对齐图标 | 尝试一下 |
默认情况下，导航按钮图标放在上面的文字(data-iconpos="top")
活动按钮
当在导航栏的链接被窃听/点击，它就会选择（按下）的样子。
而不必挖掘链接，请使用做到这一点看class="ui-btn-active" ：
对于多页，您可能需要为每个代表页面的用户是按钮，在“选择”的样子。 要做到这一点，添加"ui-state-persist"一流你的链接，以及在"ui-btn-active"类：
更多示例
内容Navbars
如何添加里面一个导航栏data-role="content" 。
在页脚Navbars
如何添加页脚里面一个导航栏。
超过5个按钮
10按钮导航栏演示