菜鸟教程 – 学的不仅是技术，更是梦想！

技术网站，更是交流网站

jQuery Mobile 教程

什么是jQuery Mobile ？，怎么用jQuery Mobile

likuolei

jQuery Mobile 教程

jQuery Mobile 是一个基于 jQuery 的移动端 UI 框架，用于快速构建跨平台的移动网页应用（支持触控优化、响应式布局）。虽然现在更推荐使用现代框架（如 Bootstrap 5、Tailwind + Alpine.js 或原生 Web API），但 jQuery Mobile 在旧项目中仍有使用价值。

注意：jQuery Mobile 已于 2021 年停止维护（最后版本 1.4.5）。本教程适用于学习或维护旧系统，不建议用于新项目。

1. 快速入门

步骤 1：引入 jQuery Mobile

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一个 jQM 页面</title>

  <!-- jQuery + 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>
  <!-- 页面内容 -->
</body>
</html>

2. 页面结构（data-role）

jQuery Mobile 使用 data-role 属性定义组件。

<div data-role="page" id="home">
  <div data-role="header">
    <h1>首页</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>欢迎使用 jQuery Mobile！</p>
    <a href="#page2" class="ui-btn">去页面2</a>
  </div>

  <div data-role="footer">
    <h4>页脚 © 2025</h4>
  </div>
</div>

3. 多页面模板

可以把多个页面写在同一个 HTML 文件中：

<!-- 页面1 -->
<div data-role="page" id="page1">
  <div data-role="header"><h1>页面1</h1></div>
  <div data-role="main" class="ui-content">
    <a href="#page2" class="ui-btn">去页面2</a>
  </div>
</div>

<!-- 页面2 -->
<div data-role="page" id="page2">
  <div data-role="header"><h1>页面2</h1></div>
  <div data-role="main" class="ui-content">
    <a href="#page1" class="ui-btn ui-btn-inline">返回</a>
  </div>
</div>

4. 常用组件

按钮

<a href="#" class="ui-btn">普通按钮</a>
<button class="ui-btn ui-corner-all ui-shadow">带样式按钮</button>
<input type="button" value="输入按钮">

列表视图

<ul data-role="listview" data-inset="true">
  <li><a href="#">苹果</a></li>
  <li><a href="#">香蕉</a></li>
  <li data-role="list-divider">水果分类</li>
  <li><a href="#">橙子</a></li>
</ul>

表单元素（自动增强）

<form>
  <label for="txt-name">姓名：</label>
  <input type="text" name="name" id="txt-name">

  <label for="flip-1">开关：</label>
  <select name="flip-1" id="flip-1" data-role="slider">
    <option value="off">关</option>
    <option value="on">开</option>
  </select>

  <button type="submit" class="ui-btn">提交</button>
</form>

5. 主题与样式（Theme）

使用 data-theme="a" 或 b 切换主题：

<div data-role="page" data-theme="b">
  <div data-role="header" data-theme="a">
    <h1>深色标题</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>浅色内容区域</p>
  </div>
</div>

自定义主题：使用 ThemeRoller（已归档，可本地下载）。

6. 事件处理

<script>
$(document).on("pagecreate", function(){
  $("#myButton").on("tap", function(){
    alert("按钮被点击！");
  });
});
</script>

常用移动事件：

  • tap：轻触
  • taphold：长按
  • swipeleft / swiperight：左/右滑动

7. 页面切换与过渡效果

<a href="#page2" data-transition="slide">滑动进入</a>
<a href="#page2" data-transition="flip">翻转</a>
<a href="#page2" data-transition="pop">弹出</a>

支持的过渡：fade, flip, flow, pop, slide, slideup, slidedown, turn, none

8. 响应式网格

<div class="ui-grid-a">
  <div class="ui-block-a"><div class="ui-bar ui-bar-a">左列</div></div>
  <div class="ui-block-b"><div class="ui-bar ui-bar-b">右列</div></div>
</div>
  • ui-grid-a：2列
  • ui-grid-b：3列
  • ui-grid-c：4列
  • ui-grid-d：5列

9. 完整示例：简单应用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Mobile 示例</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>

<div data-role="page" id="home">
  <div data-role="header" data-theme="b">
    <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="slide">关于我们</a></li>
      <li><a href="#contact" data-transition="pop">联系方式</a></li>
    </ul>
  </div>
  <div data-role="footer"><h4>&copy; 2025</h4></div>
</div>

<div data-role="page" id="about">
  <div data-role="header"><h1>关于</h1></div>
  <div data-role="main" class="ui-content">
    <p>这是一个 jQuery Mobile 示例应用。</p>
    <a href="#home" class="ui-btn ui-btn-inline">返回</a>
  </div>
</div>

<div data-role="page" id="contact">
  <div data-role="header"><h1>联系</h1></div>
  <div data-role="main" class="ui-content">
    <form>
      <label>姓名：</label>
      <input type="text">
      <label>邮件：</label>
      <input type="email">
      <button type="submit" class="ui-btn">发送</button>
    </form>
  </div>
</div>

</body>
</html>

学习资源（中文）

资源链接
官方文档（归档）https://api.jquerymobile.com/
w3school 中文教程https://www.w3school.com.cn/jquerymobile/
菜鸟教程https://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
GitHub 项目https://github.com/jquery/jquery-mobile

替代方案（推荐用于新项目）

框架特点
Bootstrap 5响应式、组件丰富、活跃维护
Framework7类似 iOS/Android 原生风格
Ionic混合开发（Angular/React/Vue）
Tailwind CSS + Alpine.js轻量、现代、无框架依赖

总结

内容说明
优点简单易用、组件丰富、触控优化
缺点已停止维护、性能较差、不支持现代 PWA
适用场景维护旧系统、快速原型、内网工具

需要我为你生成一个 可下载的完整项目模板 或 转换成现代框架（如 Bootstrap） 吗？欢迎继续提问！

网站 http://yingjuxia.com
文章已创建 2588

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词，然后按回车进行搜索。按ESC取消。

返回顶部