jQuery Mobile 项目已于 2025 年进入维护模式，不再进行重大功能更新。 尽管如此，它仍然是一个非常适合创建移动优先、跨平台网页的强大框架,尤其适合快速开发原型或对旧浏览器有兼容性要求的简单项目。

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

下面我将从 核心结构、页面模板、组件模板 三个方面为你提供一个全面的指南。

核心 HTML 模板（基础骨架）

这是任何 jQuery Mobile 页面的起点，它包含了所有必需的 CSS 和 JavaScript 文件链接，以及一个 data-role="page" 的容器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- jQuery Mobile CSS -->
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- jQuery and jQuery Mobile JS -->
    <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>
我的 jQuery Mobile 应用</title>
</head>
<body>
    <!-- 页面容器 -->
    <div data-role="page">
        <!-- 页头 -->
        <div data-role="header">
            <h1>页面标题</h1>
        </div><!-- /header -->
        <!-- 内容区域 -->
        <div role="main" class="ui-content">
            <p>这里是页面的主要内容。</p>
        </div><!-- /content -->
        <!-- 页脚 -->
        <div data-role="footer">
            <h4>页脚信息</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
</body>
</html>

关键点解释：

  • viewport meta 标签：至关重要！它告诉浏览器如何控制页面的尺寸和缩放,确保在移动设备上正确显示。
  • data-role="page"：每个可见的屏幕都必须包裹在一个 div 中，并设置此属性，一个 HTML 文件可以包含多个 page，它们会通过 AJAX 在后台切换。
  • data-role="header"：通常包含标题、按钮或搜索框。
  • role="main" class="ui-content"：页面的主要内容区域。ui-content 类为内容添加了适当的内边距和样式。
  • data-role="footer"：通常包含版权信息、标签栏或操作按钮。

多页面模板（单文件多页）

这是 jQuery Mobile 的一个强大特性，你可以在一个 HTML 文件中定义多个“页面”,它们会像原生应用一样流畅切换。

jquery mobile模板
（图片来源网络，侵删）
<!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="page1">
        <div data-role="header">
            <h1>首页</h1>
        </div>
        <div role="main" class="ui-content">
            <p>这是第一页的内容。</p>
            <!-- 链接到第二页，使用 data-rel="page" -->
            <a href="#page2" class="ui-btn ui-btn-inline" data-rel="page">去第二页</a>
        </div>
        <div data-role="footer">
            <h4>页脚</h4>
        </div>
    </div><!-- /page1 -->
    <!-- 第二页 -->
    <div data-role="page" id="page2">
        <div data-role="header">
            <!-- 添加返回按钮 -->
            <a href="#" data-rel="back" class="ui-btn ui-icon-back ui-btn-icon-left ui-shadow ui-corner-all ui-btn-inline">返回</a>
            <h1>第二页</h1>
        </div>
        <div role="main" class="ui-content">
            <p>这是第二页的内容，点击返回按钮可以回到第一页。</p>
        </div>
        <div data-role="footer">
            <h4>页脚</h4>
        </div>
    </div><!-- /page2 -->
</body>
</html>

关键点解释：

  • 页面 ID：每个 page div 必须有一个唯一的 id（如 id="page1"）。
  • 页面链接：从一个页面链接到另一个页面，只需将 href 指向目标页面的 id（如 href="#page2"）。
  • data-rel="back"：在链接上添加此属性，会创建一个返回到上一页的按钮,非常方便。
  • data-rel="page"：明确告诉 jQuery Mobile 这是一个页面到页面的链接,虽然通常默认行为就是这样。

常用组件模板

jQuery Mobile 提供了大量预置的 UI 组件，你只需要添加相应的 data-* 属性即可。

按钮

<!-- 基础按钮 -->
<a href="#" class="ui-btn">基础按钮</a>
<!-- 带图标的按钮 -->
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">搜索</a>
<!-- 内联按钮（与其他元素在同一行） -->
<a href="#" class="ui-btn ui-btn-inline">按钮1</a>
<a href="#" class="ui-btn ui-btn-inline">按钮2</a>
<!-- 微型按钮 -->
<a href="#" class="ui-btn ui-btn-inline ui-mini">微型按钮</a>

列表视图

<!-- 无序列表 -->
<ul data-role="listview">
    <li><a href="#">列表项 1</a></li>
    <li><a href="#">列表项 2</a></li>
    <li><a href="#">列表项 3</a></li>
</ul>
<!-- 带图标的列表 -->
<ul data-role="listview">
    <li><a href="#"><img src="icon1.png" class="ui-li-icon">带图标的项</a></li>
    <li><a href="#"><img src="icon2.png" class="ui-li-icon">另一个图标</a></li>
</ul>
<!-- 带计数气泡的列表 -->
<ul data-role="listview">
    <li><a href="#">消息 <span class="ui-li-count">3</span></a></li>
    <li><a href="#">邮件 <span class="ui-li-count">12</span></a></li>
</ul>
<!-- 可折叠列表 -->
<div data-role="collapsible">
    <h4>点击我展开</h4>
    <ul data-role="listview">
        <li><a href="#">子项 1</a></li>
        <li><a href="#">子项 2</a></li>
    </ul>
</div>

表单元素

jQuery Mobile 会自动增强所有表单控件。

<form>
    <div class="ui-field-contain">
        <label for="name">文本输入:</label>
        <input type="text" name="name" id="name" placeholder="请输入姓名">
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="请输入密码">
        <label for="select-choice-1">下拉选择:</label>
        <select name="select-choice-1" id="select-choice-1">
            <option value="choice-1">选项 1</option>
            <option value="choice-2">选项 2</option>
            <option value="choice-3">选项 3</option>
        </select>
        <label for="flip">开关:</label>
        <select name="flip" id="flip" data-role="slider">
            <option value="off">关</option>
            <option value="on">开</option>
        </select>
        <label for="textarea">文本域:</label>
        <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea>
        <button type="submit" class="ui-btn ui-corner-all ui-shadow ui-btn-b">提交</button>
    </div>
</form>

弹出框

<!-- 1. 在页面中放置一个弹出框容器 -->
<div data-role="popup" id="myPopup" class="ui-content">
    <p>这是一个弹出框！点击外部区域可以关闭。</p>
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">关闭</a>
</div>
<!-- 2. 创建一个按钮来触发弹出框 -->
<a href="#myPopup" class="ui-btn ui-btn-inline" data-rel="popup" data-transition="pop">打开弹出框</a>

如何开始：一个完整的“Hello World”示例

这是一个将上述所有元素组合起来的完整、可运行的模板。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">Hello 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.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="home">
        <div data-role="header">
            <h1>欢迎</h1>
        </div>
        <div role="main" class="ui-content">
            <p>欢迎使用 jQuery Mobile！</p>
            <h3>按钮示例</h3>
            <a href="#about" class="ui-btn ui-btn-b">关于我们</a>
            <a href="#contact" class="ui-btn ui-btn-inline ui-icon-phone ui-btn-icon-left">联系我们</a>
            <h3>列表示例</h3>
            <ul data-role="listview" data-inset="true">
                <li><a href="#">新闻</a></li>
                <li><a href="#">博客</a></li>
                <li><a href="#">产品 <span class="ui-li-count">5</span></a></li>
            </ul>
            <h3>表单示例</h3>
            <form>
                <div class="ui-field-contain">
                    <label for="name">您的名字:</label>
                    <input type="text" name="name" id="name">
                    <button type="submit" class="ui-btn">提交</button>
                </div>
            </form>
        </div>
        <div data-role="footer">
            <h4>&copy; 2025 我的网站</h4>
        </div>
    </div><!-- /page home -->
    <!-- 关于我们页面 -->
    <div data-role="page" id="about">
        <div data-role="header">
            <a href="#" data-rel="back" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
            <h1>关于我们</h1>
        </div>
        <div role="main" class="ui-content">
            <p>这里是关于我们页面的内容，我们致力于提供最好的服务。</p>
            <a href="#home" data-rel="back" class="ui-btn">返回首页</a>
        </div>
        <div data-role="footer">
            <h4>&copy; 2025 我的网站</h4>
        </div>
    </div><!-- /page about -->
    <!-- 联系我们页面 -->
    <div data-role="page" id="contact">
        <div data-role="header">
            <a href="#" data-rel="back" class="ui-btn ui-icon-back ui-btn-icon-left">返回</a>
            <h1>联系我们</h1>
        </div>
        <div role="main" class="ui-content">
            <p>您可以通过以下方式联系我们：</p>
            <ul data-role="listview" data-inset="true">
                <li><a href="tel:+1234567890"><i class="ui-li-icon">📞</i> +1 (234) 567-890</a></li>
                <li><a href="mailto:info@example.com"><i class="ui-li-icon">✉️</i> info@example.com</a></li>
            </ul>
        </div>
        <div data-role="footer">
            <h4>&copy; 2025 我的网站</h4>
        </div>
    </div><!-- /page contact -->
</body>
</html>

总结与建议

  • 从哪里开始？：直接复制 “核心 HTML 模板” 或 “Hello World”示例,然后根据你的需求修改内容。
  • 官方文档是最好的老师：当你需要更复杂的组件或属性时，请务必查阅 jQuery Mobile 官方文档,里面有所有组件的详细用法和演示。
  • 保持简单：jQuery Mobile 的魅力在于其简单性，通过添加 data-* 属性就能实现复杂的 UI，无需编写大量 JavaScript。
  • 考虑现代替代方案：如果你要开始一个全新的项目，并且不介意使用现代前端技术栈，可以考虑 Bootstrap 或 Tailwind CSS，它们同样提供移动优先的响应式设计，并且拥有更活跃的社区和更现代的组件库，但对于快速原型或兼容老旧设备，jQuery Mobile 依然是不错的选择。