jQuery Mobile 是一个强大且流行的框架，用于在智能手机、平板电脑和桌面设备上构建响应式、可访问的 Web 应用程序，它基于“写一次，随处运行”的理念，利用 HTML5、CSS3、JavaScript 和 AJAX 来处理各种平台和设备。

jquery mobile网站模板
（图片来源网络，侵删）

下面我将从 核心概念、模板结构、快速上手、以及寻找现成模板的途径 几个方面来为您详细说明。

jQuery Mobile 的核心概念（理解模板的基础）

在深入模板之前，理解 jQuery Mobile 的基本工作原理至关重要,因为所有模板都遵循这些规则。

a. 多页模板

这是 jQuery Mobile 最具特色的功能之一，你可以在一个 HTML 文件中定义多个“页面”，并通过 data-role="page" 属性来标识，浏览器在加载时只会渲染第一个页面，当通过链接跳转时，它会使用 AJAX 动态加载并“插入”下一个页面,实现无刷新的流畅体验。

示例结构：

jquery mobile网站模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>多页示例</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 第一页 -->
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>第一页</h1>
    </div>
    <div role="main" class="ui-content">
        <p>这是第一页的内容。</p>
        <a href="#page2" class="ui-btn ui-btn-inline">去第二页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
<!-- 第二页 -->
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>第二页</h1>
    </div>
    <div role="main" class="ui-content">
        <p>这是第二页的内容。</p>
        <a href="#page1" class="ui-btn ui-btn-inline">返回第一页</a>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

b. 数据角色

jQuery Mobile 通过一系列 data-* 属性来定义页面的结构和组件，这是其“移动优先”设计的核心。

  • data-role="page": 定义一个独立的页面视图。
  • data-role="header": 定义页面顶部的导航栏。
  • data-role="content" 或 role="main" class="ui-content": 定义页面的主要内容区域。
  • data-role="footer": 定义页面底部的页脚。
  • data-role="listview": 将一个无序列表 <ul> 转换成一个可点击、可过滤的列表视图。
  • data-role="navbar": 在页眉或页脚中创建一个导航栏按钮组。
  • data-role="collapsible" / data-role="collapsible-set": 创建可折叠的内容区域。
  • data-role="button": 将链接或按钮 <a> 样式化为触摸友好的按钮。

c. 主题

jQuery Mobile 内置了 5 种默认主题（A, B, C, D, E），通过 data-theme 属性应用到组件上，可以轻松实现视觉风格的统一和切换。<div data-role="header" data-theme="b">。

一个完整的 jQuery Mobile 模板结构

一个标准的 jQuery Mobile 项目通常包含以下文件：

my-jqm-app/
├── index.html           # 主 HTML 文件，可以包含多个页面
├── css/
│   └── custom.css       # 自定义样式，覆盖或扩展默认主题
├── js/
│   └── custom.js        # 自定义 JavaScript 逻辑
└── images/
    └── logo.png         # 项目图片资源

index.html 的基本骨架：

jquery mobile网站模板
（图片来源网络，侵删）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">我的 jQuery Mobile 应用</title>
    <!-- 1. 引入 jQuery Mobile CSS -->
    <link rel="stylesheet" href="path/to/jquery.mobile-1.4.5.min.css">
    <!-- 2. 引入 jQuery -->
    <script src="path/to/jquery-1.11.1.min.js"></script>
    <!-- 3. 引入 jQuery Mobile JS -->
    <script src="path/to/jquery.mobile-1.4.5.min.js"></script>
    <!-- 4. 引入自定义 CSS (放在 jQuery Mobile CSS 之后，以便覆盖) -->
    <link rel="stylesheet" href="css/custom.css">
</head>
<body>
<!-- 页面 1 -->
<div data-role="page" id="home">
    <div data-role="header" data-position="inline">
        <h1>首页</h1>
    </div>
    <div role="main" class="ui-content">
        <!-- 页面内容 -->
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#home" class="ui-btn-active ui-state-persist">首页</a></li>
                <li><a href="#about">lt;/a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 页面 2 -->
<div data-role="page" id="about">
    <div data-role="header">
        <a href="#" data-rel="back" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">返回</a>
        <h1>关于我们</h1>
    </div>
    <div role="main" class="ui-content">
        <!-- 关于页面的内容 -->
    </div>
</div>
<!-- 5. 引入自定义 JS (放在 jQuery Mobile JS 之后，确保 DOM 已加载) -->
<script src="js/custom.js"></script>
</body>
</html>

如何快速开始（使用 CDN）

最快的方式是使用 CDN（内容分发网络）来引入 jQuery Mobile 的文件，这样你无需下载任何东西,可以直接开始编写代码。

直接复制以下代码到一个 .html 文件中即可运行：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">快速开始</title>
    <!-- 引入 jQuery Mobile 样式 -->
    <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.1.min.js"></script>
    <!-- 引入 jQuery Mobile 脚本 -->
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>我的第一个页面</h1>
    </div>
    <div role="main" class="ui-content">
        <p>这是一个段落。</p>
        <a href="#second-page" class="ui-btn ui-btn-b">去第二页</a>
    </div>
    <div data-role="footer">
        <h4>页脚文本</h4>
    </div>
</div>
<div data-role="page" id="second-page">
    <div data-role="header">
        <a href="#" data-rel="back" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">返回</a>
        <h1>第二页</h1>
    </div>
    <div role="main" class="ui-content">
        <p>这是第二页的内容。</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-a" data-rel="back">返回首页</a>
    </div>
</div>
</body>
</html>

寻找和下载现成的 jQuery Mobile 模板

如果您不想从零开始,可以从以下网站寻找高质量的免费或付费模板：

a. 官方示例和主题库

  • jQuery Mobile Demos: https://demos.jquerymobile.com/1.4.5/

    这里包含了所有官方组件的示例代码，是学习和寻找灵感最好的地方，你可以查看源代码,直接复制使用。

b. 开源模板网站

  • BootstrapZero: https://www.bootstrapzero.com/ (虽然主要是 Bootstrap,但有很多类似风格的移动端模板)
  • GitHub: 在 GitHub 上搜索 "jQuery Mobile template"，可以找到很多开源项目，搜索 jquery-mobile-template。
  • CodePen / JSFiddle: 在这些平台上搜索 "jQuery Mobile"，可以找到大量开发者分享的、可交互的片段和完整模板。

c. 付费模板市场

  • ThemeForest (Envato Market): https://themeforest.net/

    在这里可以找到由专业设计师制作的、功能丰富的 jQuery Mobile 主题和模板，通常它们包含更复杂的布局、动画和自定义选项。

重要提醒：jQuery Mobile 的现状

jQuery Mobile 1.4.5 是最后一个稳定版本，自 2025 年以来已不再进行积极维护，这意味着它可能不再与最新的浏览器或 Web 标准完全兼容,也可能存在未修复的安全漏洞。

替代方案推荐

如果您正在启动一个新项目,强烈建议考虑以下现代替代方案：

  1. Bootstrap (with Mobile-First): Bootstrap 5 是目前最流行的前端框架，其移动优先的设计理念天然支持响应式布局，并且社区活跃,组件丰富。
  2. Tailwind CSS: 一个功能优先的实用工具类 CSS 框架，提供了极高的灵活性,让你可以完全按照自己的设计构建界面。
  3. 原生 Web 技术 (HTML5, CSS3, JavaScript): 对于简单的应用，直接使用现代浏览器的 API 和 CSS 特性（如 Flexbox, Grid）是最佳选择，性能最好,体积最小。
  4. 现代 JavaScript 框架 (React, Vue, Angular): 对于构建复杂的单页应用,这些框架提供了更强大的组件化开发体验和状态管理能力。
  • 学习/旧项目维护: jQuery Mobile 仍然是一个很好的选择，特别是对于需要快速构建、兼容性要求高的旧项目或学习移动 Web 开发基础。
  • 新项目启动: 优先考虑 Bootstrap 或 Tailwind CSS 等现代框架。

希望这份详细的指南能帮助您快速上手 jQuery Mobile 模板开发！