异常教程

jQuery Mobile 实例（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 jQuery Mobile？

在移动互联网时代，快速构建跨平台响应式应用的需求日益增长。jQuery Mobile 作为一款基于 HTML5、CSS3 和 JavaScript 的开源框架，凭借其组件化设计和触屏优化特性，成为开发者入门移动开发的理想工具。本文将通过具体实例，带领读者逐步掌握如何利用 jQuery Mobile 构建交互流畅的移动应用。

一、基础页面结构搭建

1.1 核心文件引入

所有 jQuery Mobile 项目均需引入以下核心资源：

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/mobile/1.5.0/jquery.mobile-1.5.0.min.js"></script>

类比说明：这就像搭建乐高积木时先铺好底板，框架文件提供了所有组件的基础"积木块"。

1.2 最简页面模板

<div data-role="page" id="home">
  <div data-role="header">
    <h1>我的首页</h1>
  </div>
  <div data-role="content">
    这是内容区域
  </div>
  <div data-role="footer">
    <h4>© 2023</h4>
  </div>
</div>
  • data-role 属性定义了页面（page）、页眉（header）、内容（content）、页脚（footer）的组件类型
  • 每个页面容器需唯一 ID 以便后续跳转操作

二、核心交互组件实战

2.1 触摸友好的按钮组件

<button data-role="button" data-icon="star" data-inline="true">收藏</button>
  • data-icon 添加图标按钮（需配合主题包含的图标集）
  • data-inline 使按钮与文本行内显示
  • 类比说明：就像给普通按钮穿上"触控友好"的外衣，自动适配不同屏幕尺寸

2.2 响应式表单构建

<form>
  <div data-role="fieldcontain">
    <label for="username">用户名：</label>
    <input type="text" name="username" id="username" data-clear-btn="true">
  </div>
  <div data-role="fieldcontain">
    <select name="country" id="country">
      <option value="CN">中国</option>
      <option value="US">美国</option>
    </select>
  </div>
</form>
  • data-clear-btn 在输入框右侧添加清除按钮
  • <select> 元素会自动转换为触屏友好的下拉菜单

三、页面切换与导航管理

3.1 基础页面跳转

<!-- 首页 -->
<div data-role="page" id="page1">
  <a href="#page2" data-role="button">跳转到第二页</a>
</div>

<!-- 目标页面 -->
<div data-role="page" id="page2">
  <a href="#page1" data-role="button">返回首页</a>
</div>
  • 框架默认使用 AJAX 加载页面，实现无缝切换效果
  • 类比说明：就像翻动书籍的页面，内容在后台预加载，保持用户体验流畅

3.2 动态页面加载

// 动态创建新页面
$.mobile.pageContainer.pagecontainer("change", "#dynamicPage", {
  transition: "slideup",
  reverse: false,
  showLoadMsg: true
});
  • transition 参数可选 13 种动画效果（slide/fade/pop 等）
  • showLoadMsg 显示加载提示信息

四、表单验证与数据交互

4.1 客户端验证

<script>
$(document).on("pagecreate", "#contactPage", function(){
  $("form").on("submit", function(event){
    event.preventDefault();
    var name = $("#name").val();
    if(name.length < 3) {
      alert("姓名至少3个字符");
      return false;
    }
    // 提交逻辑
  });
});
</script>
  • 使用 pagecreate 事件确保 DOM 元素就绪
  • 类比说明：就像快递员在发货前检查包裹是否符合标准

4.2 与服务器通信

$.ajax({
  url: "api/data.json",
  dataType: "json",
  beforeSend: function() {
    $.mobile.loading("show");
  },
  success: function(data) {
    $.each(data.items, function(index, item) {
      $("#content").append("<p>"+item.title+"</p>");
    });
  },
  complete: function() {
    $.mobile.loading("hide");
  }
});
  • beforeSend 和 complete 处理加载状态
  • 通过 $.each 遍历 JSON 数据填充页面

五、自定义主题开发

5.1 基础样式覆盖

/* 覆盖按钮背景色 */
.ui-btn {
  background-color: #4CAF50 !important;
  color: white;
}

/* 自定义页眉样式 */
#home .ui-header {
  background-image: linear-gradient(to bottom, #0072ff, #00c6ff);
}
  • 使用 !important 确保覆盖框架默认样式
  • 类比说明：就像给乐高积木涂上个性化的颜料

5.2 使用 ThemeRoller 工具

访问官方 ThemeRoller 网站（themeroller.jquerymobile.com ）：

  1. 选择基础色系
  2. 定制按钮、表单等组件样式
  3. 下载包含自定义 CSS 的压缩包
  4. 替换原有 CSS 文件即可应用主题

六、性能优化与调试技巧

6.1 加载性能优化

<!-- 仅加载必要的组件 -->
<script src="jquery.mobile.min.js"></script>
<script>
$.mobile.buttonMarkup.hoverDelay = 80; // 缩短悬停延迟
$.mobile.ajaxEnabled = false; // 禁用 AJAX 页面加载
</script>
  • 通过配置项调整框架行为
  • 类比说明：就像给汽车减重以提升速度

6.2 调试工具使用

  1. 开发者工具控制台查看 AJAX 请求
  2. 使用 $.mobile.changepage 调试页面跳转
  3. 检查 data-ajax="false" 避免意外页面加载

结论：持续学习与实践建议

通过本文的实例演示，读者已掌握从基础页面搭建到复杂交互实现的完整流程。建议：

  1. 动手实践：使用官方 Kitchen Sink 示例应用探索更多组件
  2. 关注更新：定期查阅 jQuery Mobile 官方文档
  3. 社区交流：参与 Stack Overflow 相关技术讨论
  4. 项目实践：尝试开发简易移动应用（如待办事项列表、天气查询等）

记住，掌握框架的最好方式就是不断编码！当您完成本文中的所有实例后，不妨尝试将现有 Web 应用的移动端版本迁移到 jQuery Mobile 架构中，这将极大提升您的实战能力。

最新发布

查看更多文章