导航栏

jQuery Mobile提供了一个非常基本的导航栏组件，可放置多达5个可选图标的按钮。

基本的导航栏

导航栏的代码为一个无序(ul)列表，被一个有data-role="navbar"属性的容器元素包裹。在导航栏上的链接被点击就会获得活动(selected)状态。ui-btn-active类在导航栏中在它被添加到活动链接之前第一个被移除的。给链接增加class="ui-btn-active" 即可。如果是链接到其他页面，该类也会在过渡完成之后移除。

在标签里添加class="ui-btn-active"属性到锚就可以把项目设置为活动状态。另外添加ui-state-persist类可以使框架恢复每次被显示页面存在于DOM中活动状态。

导航栏只有一个项目时,将会被渲染成100%的宽度

导航栏的项目是平均分配的.所以在这种情况下,每个按钮占据浏览器窗口宽度的1/2.

增加第Three个项目会使每个按钮自动占据浏览器窗口宽度的1/3.

增加第四个项目会使每个按钮自动变成浏览器窗口宽度的1/4.

导航栏最多可放置5个项目，每个占据浏览器窗口宽度的1/5.

多行的导航栏

如果超过5个项目被添加，导航栏将转换成两列多行的顺序排列。

头部的导航栏

如果要给页面头部增加一个导航栏，你也可以保留头部栏的页面标题和按钮。只需要把导航栏容器放进头部栏容器内的标题和按钮源顺序之后。

底部的导航栏

如果你想一个导航栏添加到页面的底部，它更像一个标签栏，只需将导航栏放在一个有data-role="footer"属性的容器内。

持久化

持久化导航栏被设计成跨页固定的标签栏。在标签里添加class="ui-btn-active" 到对应的锚就可以把导航栏初始化设置为活动状态。 另外添加ui-state-persist类可以使框架恢复每次被显示页面存在于DOM中活动状态。

图标

给导航栏的列表项链接增加data-icon属性，可以给链接设置一个标准的移动网站的图标。默认情况下，给列表项链接增加data-iconpos="top"属性，可以给链接的图标位置设置为文字上方。下面的例子是添加图标至页脚导航栏上。

图标位置

图标位置上导航栏的容器上设置，而不是视觉效果一致的单个链接组成。例如，要把把图标放在标签的下面的，添加data-iconpos="bottom"属性到导航栏的容器。

图标位置可被设置为data-iconpos="left":

或者将图标位置设置为 data-iconpos="right":

第三方图标设置

您可以添加任何流行的图标库如 Glyphish的实现了iOS风格的标签，有堆叠在文字标签上方的大图标。所有这一切需要的是一个有点自定义样式链接到的图标和它们在导航栏的位置。这里是我们的导航栏使用Glyphish图标和自定义样式（查看页面源代码的样式）的例子：

Icons by Joseph Wain / glyphish.com. Licensed under the Creative Commons Attribution 3.0 United States License.

主题

导航栏像按钮一样继承父容器的主题样式。如果导航栏放置在页眉或页脚工具栏，它将继承默认的工具栏样式“a”，除非你在这个标记中设置。

这里有各种容器色板，可以自动继承其父的色板信集Navbars的几个例子。请注意，不是使用的data-theme属性，而是我们手动添加色板样式应用body色板（ui-body-a），而在这些例子中，要添加的类别标准体填充（ui-body），但继承的工作方式相同：

要为导航栏项目设计主题颜色，只需在单个链接上添加data-theme属性并制定一个主题色。需要注意的是应用主题色的导航栏容器是不支持的。