头部导航栏：
<!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>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- Home Page with Header Navbar -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Header Navbar</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="star">Favorites</a></li>
<li><a href="#" data-icon="gear">Settings</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>This is the content of the page.</p>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
</body>
</html>
在这个例子中，我们在头部创建了一个导航栏，并在导航栏中添加了三个按钮。每个按钮使用了 data-icon 属性来添加图标。导航栏的样式和布局由 jQuery Mobile 自动处理。
底部导航栏：
<!-- Home Page with Footer Navbar -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Home</a></li>
<li><a href="#" data-icon="star">Favorites</a></li>
<li><a href="#" data-icon="gear">Settings</a></li>
</ul>
</div>
<div data-role="content">
<p>This is the content of the page.</p>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
在这个例子中，我们将导航栏放置在底部。与头部导航栏类似，它包含了三个按钮，每个按钮都有一个图标。
这只是 jQuery Mobile 导航栏的基本用法。你可以根据需要在导航栏中添加按钮、链接等元素，并使用相应的数据属性来调整样式和行为。
转载请注明出处：http://www.pingtaimeng.com/article/detail/14451/jQuery Mobile