jQuery Mobile经典... 登陆
jQuery Mobile经典教程
作者:php中文网  更新时间:2022-04-11 13:58:34

jQuery Mobile 导航栏


导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内。

默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button")。

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

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#">主页</a></li>
        <li><a href="#">第二页</a></li>
        <li><a href="#">搜索</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>我的内容..</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 


</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

lamp默认情况下,按钮的宽度与它的内容一样。使用一个无序列表来平均地划分按钮的宽度:1 个按钮占 100% 宽度,2 个按钮则各占 50% 的宽度,3 个按钮则每个占 33,3% 的宽度,依此类推。然而,如果您在导航栏中指定了超过 5 个按钮,将会拆成多行(查看"更多实例")。

导航按钮图标

我们可以使用 data-icon 属性为导航按钮添加图标:

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <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>
  </div>

  <div data-role="main" class="ui-content">
    <p>我的内容..</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

data-icon 属性与在图标章节中的 CSS 类使用相同的值。CSS 类使用方法 class="ui-icon-value", data-icon 属性使用方法 data-icon="value"。




属性值描述图标
data-icon="home"首页nyhome3.jpg
data-icon="arrow-r"右边箭头arrow-r.jpg
data-icon="search"搜索search.jpg

如需查看所有 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":

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#" class="ui-btn-active" data-icon="home">首页</a></li>
        <li><a href="#pagetwo" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本例设有 ui-btn-active 类,请注意首页按钮时突出显示的(已选)。</p>
    <p>如果点击页面二,您会注意到按钮不会突出显示。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎访问我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本页中没有被预选的按钮(突出显示)。</p> 
    <p>如需让按钮被选的外观表示当前正在访问页面,请返回导航栏教程,继续向下阅读。</p>
  </div>

  <div data-role="footer">
     <h1>我的页脚</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

对于多个页面,您可能想要每个按钮的选中外观代表当前用户所在的页面。要做到这一点,请添加 "ui-state-persist" 和 "ui-btn-active" 到链接的 class:

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <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>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>本例设有 ui-btn-active 类,请注意首页按钮时突出显示的(已选)。</p>
    <p>请点击页面二按钮,看看会发生什么。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div> 
</div> 

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
    <div data-role="navbar">
      <ul>
        <li><a href="#pageone" data-icon="home">首页</a></li>
        <li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">页面二</a></li>
      </ul>
    </div>
  </div>

  <div data-role="main" class="ui-content">
    <p>该页面的按钮也会被突出显示,归功于 ui-btn-active 类。</p> 
    <p>如果返回首页,您会发现页面将保持状态,归功于 ui-state-persist 类。</p>
  </div>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

更多实例

内容中的导航栏

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-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>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

尾部中的导航栏

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-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>

  <div data-role="footer">
    <h1>我的页脚</h1>
  </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如何在尾部内添加导航栏。

导航栏中的定位图标

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <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>
    <p>该例演示页脚中的导航栏中的图标定位。</p>
    <p>data-iconpos="left" 将把图标定位到按钮的左侧。</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如何在尾部内的导航栏中定位图标。

超过 5 个按钮

实例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>欢迎来到我的首页</h1>
  </div>

  <div data-role="main" class="ui-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>
        <li><a href="#" data-icon="forward">向前</a></li>
        <li><a href="#" data-icon="back">向后</a></li>
        <li><a href="#" data-icon="star">星形</a></li>
        <li><a href="#" data-icon="gear">选项</a></li>
        <li><a href="#" data-icon="search">搜索</a></li>
      </ul>
    </div>
  <p>该例演示当导航栏包含超过五个按钮时的情况。</p>
  </div>

  <div data-role="footer">
    <h1>我的底部</h1>
  </div>
</div> 

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

导航栏中 10 个按钮的演示。

PHP中文网