jQuery Mobile 导航栏

jQuery Mobile 导航栏

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部。

默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。

请使用 data-role="navbar" 属性来定义导航栏：

实例

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

提示：按钮的宽度，默认地，与其内容一致。使用无序列表来均等地划分按钮：一个按钮占据 100% 的宽度，两个按钮各分享 50% 的宽度，三个按钮 33.3%，以此类推。不过，如果您在导航栏中规定了五个以上的按钮，那么它会弯折为多行（参加页面底部的“更多实例”）。

活动按钮

当导航栏中的链接被点击时，会获得选取外观（按下）。

如需在不点击链接时实现此外观，请使用 class="ui-btn-active"：

实例

<li><a href="#anylink" class="ui-btn-active">首页</a></li>

对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类：

实例

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

更多实例

内容中的导航栏

如何在 data-role="content" 中添加导航栏。

页脚中的导航栏

如何在页脚中添加导航栏。

在导航栏中定位图标

如何在页脚内部的导航栏中放置图标。

五个以上的按钮

演示在导航栏中的十个按钮。