步骤1：准备工作
确保你的项目中包含了 jQuery 核心库和 jQuery Mobile 库。你可以通过以下方式引入它们：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My jQuery Mobile App</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>
<!-- Your content goes here -->
</body>
</html>
步骤2：创建页面
使用 jQuery Mobile，你可以使用简单的 HTML 结构创建页面。页面的内容通常包裹在 data-role="page" 的 <div> 元素中：
<div data-role="page" id="home">
<div data-role="header">
<h1>Home Page</h1>
</div>
<div data-role="content">
<p>Welcome to my jQuery Mobile App!</p>
</div>
<div data-role="footer">
<h4>Footer Text</h4>
</div>
</div>
步骤3：导航
通过使用 data-role="page" 定义的页面之间的导航，可以创建多个页面。例如，从主页导航到另一个页面：
<a href="#second-page" data-transition="slide">Go to Second Page</a>
步骤4：处理事件
使用 jQuery Mobile，你可以轻松处理触摸事件。例如，处理页面创建时的事件：
$(document).on("pagecreate", "#home", function() {
// Your code here
alert("Home page is created!");
});
步骤5：主题
通过使用主题，你可以轻松更改应用程序的外观。你可以在页面级别或全局级别应用主题。
<div data-role="page" id="themed-page" data-theme="b">
<!-- Content with theme 'b' -->
</div>
这只是一个简单的 jQuery Mobile 入门教程。在实际项目中，你可能需要深入了解更多的组件、事件处理、动画效果等功能。请查阅 [jQuery Mobile 官方文档](https://demos.jquerymobile.com/1.4.5/) 以获取更详细的信息和示例。注意，版本号可能会有所变化，建议查阅最新文档。
转载请注明出处：http://www.pingtaimeng.com/article/detail/9413/jQuery Mobile