jQuery Mobile 页面结构详解
jQuery Mobile 的 页面（Page） 是整个框架的核心容器。
一个页面由 data-role="page" 标记，内部通常包含 头部（header）、内容区（main） 和 页脚（footer）。
1. 基本页面结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>我的页面</title>
<!-- jQuery Mobile CDN -->
<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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- ========== 页面开始 ========== -->
<div data-role="page" id="home">
<!-- 头部栏 -->
<div data-role="header" data-position="fixed">
<h1>首页标题</h1>
</div>
<!-- 内容区 -->
<div data-role="main" class="ui-content">
<h2>欢迎使用 jQuery Mobile</h2>
<p>这是一个响应式移动页面。</p>
<a href="#page2" class="ui-btn ui-btn-inline ui-corner-all">去第二页</a>
</div>
<!-- 页脚栏 -->
<div data-role="footer" data-position="fixed">
<h4>© 2025 比利时</h4>
</div>
</div>
<!-- ========== 页面结束 ========== -->
</body>
</html>2. 多页面结构（单文件多页）
在 同一个 HTML 文件 中写多个页面，通过 id 切换：
<!-- 页面 1 -->
<div data-role="page" id="page1">
<div data-role="header"><h1>页面一</h1></div>
<div data-role="main" class="ui-content">
<a href="#page2" data-transition="slide">滑动到页面二</a>
</div>
</div>
<!-- 页面 2 -->
<div data-role="page" id="page2">
<div data-role="header">
<a href="#page1" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
<h1>页面二</h1>
</div>
<div data-role="main" class="ui-content">
<p>你已进入第二页！</p>
</div>
</div>跳转方式：
href="#page-id"+data-transition="效果"
3. 页面属性（data-*）
| 属性 | 值 | 说明 |
|---|---|---|
data-role="page" | — | 定义页面容器 |
data-title="标题" | 字符串 | 设置浏览器标签标题 |
data-theme="a" / b | a/b | 页面主题 |
data-url="url" | 路径 | AJAX 导航时的 URL |
data-add-back-btn="true" | true/false | 自动添加返回按钮 |
<div data-role="page" id="settings" data-title="设置" data-theme="b">
...
</div>4. 固定头部与页脚（data-position="fixed"）
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>固定标题</h1>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active">首页</a></li>
<li><a href="#profile">我的</a></li>
</ul>
</div>
</div>
data-tap-toggle="false"：防止点击内容区时隐藏头部
5. 页面事件（JavaScript）
<script>
$(document).on("pagecreate", "#home", function() {
alert("首页已加载！");
});
$(document).on("pageshow", "#home", function() {
console.log("首页显示完成");
});
$(document).on("pagehide", "#home", function() {
console.log("离开首页");
});
</script>常用事件：
| 事件 | 触发时机 |
|---|---|
pagecreate | 页面 DOM 创建后 |
pageinit | 页面初始化（旧版） |
pageshow | 页面显示完成 |
pagehide | 页面隐藏时 |
pagebeforeshow | 显示前 |
6. 完整多页示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 多页演示</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-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 页面1：首页 -->
<div data-role="page" id="home" data-title="首页">
<div data-role="header" data-position="fixed">
<h1>我的应用</h1>
</div>
<div data-role="main" class="ui-content">
<h3>选择功能</h3>
<ul data-role="listview" data-inset="true">
<li><a href="#about" data-transition="flip">关于我们</a></li>
<li><a href="#contact" data-transition="pop">联系方式</a></li>
<li><a href="#settings">设置</a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
<!-- 页面2：关于 -->
<div data-role="page" id="about">
<div data-role="header">
<a href="#home" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
<h1>关于</h1>
</div>
<div data-role="main" class="ui-content">
<p>这是一个 jQuery Mobile 多页示例。</p>
<p>当前时间：2025年11月17日 02:44（CET）</p>
</div>
</div>
<!-- 页面3：联系 -->
<div data-role="page" id="contact">
<div data-role="header">
<a href="#home" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
<h1>联系方式</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<label for="name">姓名：</label>
<input type="text" id="name">
<label for="email">邮箱：</label>
<input type="email" id="email">
<button type="submit" class="ui-btn ui-shadow ui-corner-all">发送</button>
</form>
</div>
</div>
</body>
</html>7. 页面切换动画（data-transition）
| 效果 | 代码 |
|---|---|
| 滑动 | data-transition="slide" |
| 反向滑动 | data-transition="slide" data-direction="reverse" |
| 翻转 | data-transition="flip" |
| 弹出 | data-transition="pop" |
| 淡入 | data-transition="fade" |
| 上滑 | data-transition="slideup" |
| 无动画 | data-transition="none" |
<a href="#page2" data-transition="slideup">上滑进入</a>8. 最佳实践（Best Practices）
| 建议 | 说明 |
|---|---|
每个页面一个 id | 便于跳转 |
使用 data-position="fixed" | 提升移动端体验 |
添加 data-tap-toggle="false" | 防止误隐藏 |
| 避免过多页面 | 建议单文件 < 10 页 |
外部链接加 rel="external" | 跳出 AJAX 加载 |
<a href="https://www.google.com" rel="external" target="_blank">打开谷歌</a>9. 常见问题
| 问题 | 解决方案 |
|---|---|
| 页面不切换 | 检查 href="#正确id" |
| 内容被遮挡 | 给 ui-content 加 padding |
| 返回按钮没图标 | CDN 自动加载 images/ |
| 页面闪白 | 添加 data-transition="fade" |
总结：页面结构模板
<div data-role="page" id="唯一ID">
<div data-role="header" data-position="fixed">
<h1>标题</h1>
</div>
<div data-role="main" class="ui-content">
<!-- 内容 -->
</div>
<div data-role="footer" data-position="fixed">
<h4>页脚</h4>
</div>
</div>需要我为你生成：
- 可下载的完整多页 ZIP 项目？
- 带导航栏（navbar）的底部菜单？
- 登录页面 + 表单验证 示例？
随时告诉我！
