1. 顶部工具栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Toolbar</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 Toolbar</h1>
<a href="#" data-icon="gear" data-iconpos="notext" class="ui-btn-right">Settings</a>
</div>
<div data-role="content">
<p>Content goes here.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer Text</h4>
</div>
</div>
</body>
</html>
在这个例子中，我们使用 data-role="header" 定义了一个顶部工具栏。data-position="fixed" 用于使工具栏固定在屏幕顶部。工具栏内包含一个标题和一个设置按钮。data-icon 和 data-iconpos 用于添加设置图标和指定图标位置。
2. 底部工具栏
<div data-role="footer" data-position="fixed">
<h4>Bottom Toolbar</h4>
<a href="#" data-icon="home" data-iconpos="notext" class="ui-btn-left">Home</a>
<a href="#" data-icon="grid" data-iconpos="notext" class="ui-btn-right">Grid</a>
</div>
在这个例子中，我们使用 data-role="footer" 定义了一个底部工具栏。同样，data-position="fixed" 用于使工具栏固定在屏幕底部。工具栏内包含一个标题和两个按钮。
你可以根据实际需求在工具栏中添加标题、按钮、图标等元素。 jQuery Mobile 提供了丰富的样式和主题选项，以便你更好地定制工具栏的外观和行为。详细的文档和示例可以在[官方文档](https://demos.jquerymobile.com/1.4.5/toolbar/)中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9421/jQuery Mobile