头部工具栏：
<!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>
<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 Toolbar -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Header Toolbar</h1>
</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>
在这个例子中，我们创建了一个简单的页面，包含了一个头部工具栏。头部工具栏通常包括页面的标题。你可以在头部工具栏中添加导航按钮、额外的标题等。
底部工具栏：
<!-- Home Page with Footer Toolbar -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>This is the content of the page.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer Toolbar</h4>
</div>
</div>
在这个例子中，我们创建了一个底部工具栏，并使用了 data-position="fixed" 属性将其固定在页面底部。底部工具栏通常包含导航链接、按钮等。
工具栏按钮：
<!-- Home Page with Toolbar Buttons -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Page Title</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>
在这个例子中，我们在头部工具栏中创建了一个简单的导航栏（Navbar），包含了几个工具栏按钮。每个按钮都使用了 data-icon 属性来添加图标。
这只是 jQuery Mobile 工具栏的基本用法。你可以根据需要在工具栏中添加按钮、标题、导航栏等元素，并使用相应的数据属性来调整样式和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/14450/jQuery Mobile