1. 顶部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Navbar</title>
<!-- 引入 jQuery 核心库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 jQuery Mobile 样式表 -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery Mobile 脚本文件 -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Top Navbar</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>Content goes here.</p>
</div>
</div>
</body>
</html>
在这个例子中，我们使用 data-role="header" 定义了一个顶部导航栏。data-position="fixed" 用于使导航栏固定在屏幕顶部。导航栏内包含一个标题和三个导航链接。通过给其中一个链接添加 class="ui-btn-active"，我们可以指定默认选中的导航链接。
2. 底部导航栏
<div data-role="footer" data-position="fixed">
<h4>Bottom Navbar</h4>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
在这个例子中，我们使用 data-role="footer" 定义了一个底部导航栏。同样，data-position="fixed" 用于使导航栏固定在屏幕底部。导航栏内包含一个标题和三个导航链接。
你可以根据实际需求在导航栏中添加标题、导航链接等元素。 jQuery Mobile 提供了丰富的样式和主题选项，以便你更好地定制导航栏的外观和行为。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/navbar/)中找到。
转载请注明出处：http://www.zyzy.cn/article/detail/9422/jQuery Mobile