jQuery Mobile 导航栏

导航栏

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

导航一行最多显示5个按钮，5个以内会平均的显示，当多于5个时，会折行显示

navbar

navbar

data-iconpos="left" 会将文字定位在按钮的右边：

    <div data-role="navbar" data-iconpos="left">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>

data-iconpos="left"

活动按钮
class="ui-btn-active"，即当前选中状态；
对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面，需要向链接添加ui-state-persist" 类，以及 "ui-btn-active" 类。

<div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">首页</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
        <li><a href="#pagethree" data-icon="arrow-r">页面三</a></li>
        <li><a href="#pagefour" data-icon="arrow-r">页面四</a></li>
      </ul>
    </div>

ui-btn-active ui-state-persist

内容中的导航

  <div data-role="content">
    <div data-role="navbar">
      <ul>
        <li><a href="#" data-icon="plus">更多</a></li>
        <li><a href="#" data-icon="minus">更少</a></li>
        <li><a href="#" data-icon="delete">删除</a></li>
        <li><a href="#" data-icon="check">喜爱</a></li>
        <li><a href="#" data-icon="info">信息</a></li>
      </ul>
    </div>
    <p>该例演示内容中的导航栏。</p>
  </div>

默认是没有选中状态的，当点击后，会呈现出来：

navbar