jQuery Mobile 教程：构建移动 Web 应用的经典框架
目录
- 什么是 jQuery Mobile？
- 为什么选择 jQuery Mobile？（以及为什么现在可能不推荐）
- 快速入门：你的第一个页面
- 核心概念
- 页面结构与多页模板
- UI 组件
- 主题与样式
- 事件处理
- 实战：创建一个简单的任务列表应用
- 进阶主题
- 对话框
- 列表视图
- 表单与输入组件
- 页面转场动画
- 重要提醒：jQuery Mobile 的现状与未来
- 学习资源与总结
什么是 jQuery Mobile？
jQuery Mobile 是一个基于 HTML5、CSS3 和 jQuery 的跨平台移动 Web 应用开发框架，它的核心目标是“写一次，随处运行”（Write less, do more, everywhere），让开发者能够使用熟悉的 Web 技术（HTML, CSS, JavaScript）快速构建出在智能手机、平板电脑和桌面浏览器上都能良好运行的 Web 应用。
（图片来源网络，侵删）
它主要解决了移动端开发的几个痛点：
- 浏览器兼容性：自动处理不同移动浏览器（如 iOS Safari, Android Chrome,旧版 IE Mobile）的差异。
- 触摸优化：组件和交互都针对触摸屏进行了优化，提供了大按钮、易于滑动的列表等。
- 响应式设计：能自适应不同尺寸的屏幕。
- 丰富的 UI 组件：提供了大量开箱即用的 UI 组件，如按钮、工具栏、列表、表单控件等，无需从零编写 CSS。
为什么选择 jQuery Mobile？（以及为什么现在可能不推荐）
选择它的理由（适用于学习或维护旧项目）：
- 上手极快：如果你已经了解 HTML 和 jQuery,学习曲线非常平缓。
- 文档完善：官方文档非常详尽,有大量示例。
- 兼容性极佳：对非常老旧的移动设备和浏览器有很好的支持。
- 组件丰富：快速搭建标准移动界面非常高效。
为什么不推荐用于新项目（重要提醒）：
- 项目已停止维护：jQuery Mobile 的核心开发团队已经停止了主要功能的更新，这意味着它不会再有新特性,也不会修复新出现的安全漏洞或兼容性问题。
- 性能问题：与现代框架（如 Vue, React, Angular）相比，其性能（尤其是页面切换和渲染速度）相对较差。
- 设计风格陈旧：其默认的视觉风格是典型的“原生模拟”风格，可能不符合现代、扁平化的设计趋势。
- 社区萎缩：社区活跃度低,遇到问题时很难找到最新的解决方案。
jQuery Mobile 是一个优秀的历史性框架，非常适合学习移动 Web 开发的演进历史，或者用于维护现有的旧项目，但对于全新的项目，强烈建议考虑使用 Vue.js、React、Angular 等现代前端框架，或者专注于 PWA (Progressive Web App) 技术。
快速入门：你的第一个页面
让我们创建一个最简单的 jQuery Mobile 页面。
步骤 1：引入文件 你需要引入 jQuery、jQuery Mobile 的 CSS 和 JavaScript 文件，最简单的方式是通过 CDN（内容分发网络）。
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">My First jQuery Mobile Page</title>
<!-- 引入 jQuery Mobile CSS -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- 引入 jQuery Mobile JS -->
<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">
<h1>欢迎</h1>
</div>
<div role="main" class="ui-content">
<p>这是我的第一个 jQuery Mobile 页面！</p>
<a href="#about" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">关于我们</a>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
<!-- 第二个页面 -->
<div data-role="page" id="about">
<div data-role="header">
<a href="#home" class="ui-btn ui-icon-home ui-btn-icon-left">返回</a>
<h1>关于我们</h1>
</div>
<div role="main" class="ui-content">
<p>这是一个关于页面的示例。</p>
</div>
<div data-role="footer">
<h4>页脚</h4>
</div>
</div>
</body>
</html>
代码解析：
data-role="page": 定义了一个独立的页面视图，一个 HTML 文件可以包含多个page，通过 JavaScript 进行切换。data-role="header": 页面头部,通常用于放置标题和导航按钮。role="main" class="ui-content": 页面的主要内容区域。data-role="footer": 页面底部。<a href="#about" ...>: 链接到另一个页面（通过其id），jQuery Mobile 会自动拦截这个点击事件，使用 AJAX 加载并切换页面,而不是传统的整页刷新。data-role="navbar": (未在上例中展示) 用于在 header 或 footer 中创建导航栏。
核心概念
页面结构与多页模板
如上例所示，你可以在一个 HTML 文件中定义多个 div data-role="page"，jQuery Mobile 会将它们视为独立的页面，并通过 JavaScript 进行管理,实现快速的单页应用体验。
UI 组件
jQuery Mobile 的核心魅力在于其丰富的 UI 组件，它们都通过 data-* 属性来配置。
- 按钮:
<a href="#" data-role="button">按钮</a>或<button data-role="button">按钮</button> - 工具栏:
<div data-role="header">或<div data-role="footer"> - 内容块:
<div class="ui-content"> - 列表:
<ul data-role="listview" data-inset="true"> <li><a href="#">项目一</a></li> <li><a href="#">项目二</a></li> <li><a href="#">项目三</a></li> </ul>data-role="listview": 将普通列表转换为可触摸的列表视图。data-inset="true": 让列表有圆角和内边距,看起来像是一个独立的卡片。
- 表单控件: 只需给标准的 HTML 表单元素添加
data-role="..."属性即可美化。<label for="slider">滑块:</label> <input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true">
主题与样式
jQuery Mobile 使用一套 CSS 主题系统，通过 data-theme 属性轻松切换颜色方案。
（图片来源网络，侵删）
- 默认提供 5 种主题：a, b, c, d, e (a 是默认主题)。
- 应用: 只需在组件上添加
data-theme="b"即可应用 b 主题的样式。<a href="#" data-role="button" data-theme="b">蓝色按钮</a> <a href="#" data-role="button" data-theme="e">黑色按钮</a>
事件处理
jQuery Mobile 在原生 JavaScript 事件的基础上,封装了一套移动端专用的事件。
tap: 轻触。taphold: 按住约一秒。swipeleft/swiperight: 向左/向右滑动。pagebeforehide/pagehide: 页面隐藏前/后触发。pagebeforeshow/pageshow: 页面显示前/后触发。
示例：监听滑动事件
$(document).on('swiperight', '#home', function(){
// 当在 #home 页面向右滑动时，返回上一页
$.mobile.changePage("#home", { reverse: true });
});
实战：创建一个简单的任务列表应用
让我们结合所学知识,做一个可以添加和删除任务的简单应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">任务列表</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.3.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="main-page">
<div data-role="header">
<h1>我的任务</h1>
</div>
<div role="main" class="ui-content">
<form id="add-task-form">
<input type="text" name="task-input" id="task-input" placeholder="输入新任务...">
<button type="submit" data-theme="b" class="ui-btn ui-icon-plus ui-btn-icon-left">添加</button>
</form>
<ul data-role="listview" data-inset="true" id="task-list">
<!-- 任务项将通过 JavaScript 动态添加 -->
</ul>
</div>
</div>
<script>
$(document).on("pageinit", "#main-page", function() {
// 从 localStorage 加载任务
loadTasks();
// 添加任务表单提交事件
$("#add-task-form").on("submit", function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var taskText = $("#task-input").val().trim();
if (taskText) {
addTask(taskText);
$("#task-input").val(""); // 清空输入框
}
});
});
// 添加任务函数
function addTask(text) {
var taskId = Date.now(); // 使用时间戳作为唯一ID
var listItem = "<li data-task-id='" + taskId + "'><a href='#'>" + text + "</a><a href='#' data-icon='delete' data-iconpos='right' class='delete-task-btn'>删除</a></li>";
// 添加到列表头部
$("#task-list").prepend(listItem).listview("refresh");
// 保存到 localStorage
saveTask(taskId, text);
}
// 删除任务函数
$(document).on("click", ".delete-task-btn", function(e) {
e.preventDefault();
var $li = $(this).closest("li");
var taskId = $li.data("task-id");
$li.hide("slide", function() {
$(this).remove();
// 从 localStorage 中移除
removeTask(taskId);
});
});
// 保存任务到 localStorage
function saveTask(id, text) {
var tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
tasks.push({id: id, text: text});
localStorage.setItem("tasks", JSON.stringify(tasks));
}
// 从 localStorage 加载任务
function loadTasks() {
var tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
tasks.forEach(function(task) {
addTask(task.text);
});
}
// 从 localStorage 移除任务
function removeTask(id) {
var tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
tasks = tasks.filter(task => task.id !== id);
localStorage.setItem("tasks", JSON.stringify(tasks));
}
</script>
</body>
</html>
代码解析：
- HTML 结构: 包含一个输入框、一个提交按钮和一个空的列表。
pageinit事件: 当页面初始化完成后触发,我们在这里绑定事件和加载数据。localStorage: 使用浏览器的本地存储来保存任务,这样刷新页面后任务不会丢失。listview("refresh"): 当我们动态地向列表中添加或删除项后，必须调用这个方法来告诉 jQuery Mobile 重新渲染列表视图,否则样式可能不正确。- 事件委托:
$(document).on("click", ".delete-task-btn", ...)用于处理动态生成的删除按钮的点击事件。
进阶主题
-
对话框: 通过
data-rel="dialog"和data-position-to="window"属性可以将链接弹出一个全屏的对话框。<a href="#popupBasic" data-rel="popup" data-position-to="window" class="ui-btn">打开对话框</a> <div data-role="popup" id="popupBasic"> <p>这是一个简单的对话框。</p> </div> -
列表视图: 除了基本的列表，还有可折叠列表、分割按钮列表、带图标的列表等,都非常实用。
-
表单与输入组件: 提供了开关、滑块、单选/复选按钮组、可选择的下拉框等,都针对触摸进行了优化。
-
页面转场: 通过
data-transition属性可以指定页面切换的动画效果，如slide、slideup、fade、pop等。<a href="#next-page" data-transition="slide">下一页</a>
重要提醒：jQuery Mobile 的现状与未来
再次强调，jQuery Mobile 已经是一个“退休”的项目,它不再被积极维护。
- 如果你是初学者：建议直接学习现代前端框架（Vue, React, Svelte）或 PWA 技术,它们是当前和未来的主流。
- 如果你是维护旧项目：这份教程将帮助你理解代码结构，并能进行有效的修改和 bug 修复。
学习资源与总结
官方资源
- jQuery Mobile 官方网站: https://jquerymobile.com/
- 官方文档: https://api.jquerymobile.com/ (非常详尽的 API 参考)
- 官方主题定制器: https://themeroller.com/jquerymobile/ (用于自定义主题颜色)
jQuery Mobile 是一个里程碑式的框架，它极大地降低了移动 Web 开发的门槛，让无数开发者能够快速构建出功能完善的移动应用，它优雅地利用了 HTML5 的 data-* 属性，实现了声明式的 UI 构建,理念非常先进。
尽管它已不再是新项目的首选，但通过学习它,你可以：
- 了解移动 Web 开发的发展历程。
- 掌握一种快速原型开发或维护旧系统的技能。
- 对比现代框架,理解前端技术的演进方向。
希望这份教程对你有帮助！
