<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Page</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 -->
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<p>Welcome to the Home Page!</p>
<a href="#about" data-role="button">Go to About Page</a>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
<!-- About Page -->
<div data-role="page" id="about">
<div data-role="header">
<h1>About Page</h1>
</div>
<div data-role="content">
<p>This is the About Page.</p>
<a href="#home" data-role="button">Back to Home Page</a>
</div>
<div data-role="footer">
<h4>© 2023 My App</h4>
</div>
</div>
</body>
</html>
在这个例子中，我们定义了两个页面：Home Page 和 About Page。每个页面都包含了三个主要部分：data-role="header"（头部）、data-role="content"（内容）和data-role="footer"（底部）。
- data-role="page"： 定义一个页面。每个页面都有一个唯一的 id 属性，用于通过链接进行页面导航。
- data-role="header"： 定义页面的头部，通常包含标题。
- data-role="content"： 定义页面的主要内容区域。
- data-role="footer"： 定义页面的底部，通常包含页脚信息。
在内容区域中，我们可以添加各种内容，包括文本、按钮等。通过使用 href 属性来指定页面之间的导航。在上述例子中，我们使用 <a> 元素来链接不同页面，并在按钮上添加了 data-role="button"，以使按钮具有 jQuery Mobile 样式。
这只是一个简单的例子，你可以根据需要扩展页面，并在页面中添加其他 jQuery Mobile 组件和功能。
转载请注明出处：http://www.pingtaimeng.com/article/detail/14445/jQuery Mobile