jQueryMobile

本章内容： 1. 框架介绍 | 2. 页面结构 | 3. UI组件 | 4. 触摸事件 | 5. 主题系统

jQuery Mobile是一个基于jQuery的移动端Web应用框架，用于创建跨平台的移动网站和Web应用。

1. jQuery Mobile 介绍

主要特性

响应式设计
触摸友好的UI组件
跨平台兼容性
主题和皮肤系统
丰富的页面转场效果
AJAX驱动的导航系统

支持平台

iOS

Android

Windows Phone

基本引入


<!-- jQuery Mobile 1.4.5 -->
<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>

<!-- 或者使用本地文件 -->
<link rel="stylesheet" href="/css/jquery.mobile-1.4.5.min.css">
<script src="/js/jquery.mobile-1.4.5.min.js"></script>

注意：jQuery Mobile依赖于jQuery，请确保先引入jQuery，再引入jQuery Mobile。

2. 页面结构

jQuery Mobile使用特定的HTML结构来创建移动页面。

结构演示

9:41

我的应用

页面内容

这是一个标准的jQuery Mobile页面结构。

跳转到第二页

页面结构代码


<!DOCTYPE html>
<html>
<head>
    <title>我的移动应用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="jquery.mobile.min.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.mobile.min.js"></script>
</head>
<body>

<!-- 页面1 -->
<div data-role="page" id="home">

    <!-- 页头 -->
    <div data-role="header" data-position="fixed">
        <h1>我的应用</h1>
        <a href="#settings" class="ui-btn ui-btn-right ui-icon-gear ui-btn-icon-left">设置</a>
    </div>

    <!-- 主要内容 -->
    <div role="main" class="ui-content">
        <h2>欢迎！</h2>
        <p>这是一个jQuery Mobile应用。</p>
        <a href="#about" data-role="button" data-transition="slide">关于我们</a>
    </div>

    <!-- 页脚 -->
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#home" class="ui-btn-active" data-icon="home">首页</a></li>
                <li><a href="#search" data-icon="search">搜索</a></li>
                <li><a href="#profile" data-icon="user">我的</a></li>
            </ul>
        </div>
    </div>

</div>

<!-- 页面2 -->
<div data-role="page" id="about">
    <div data-role="header">
        <a href="#home" data-icon="back" data-rel="back">返回</a>
        <h1>关于我们</h1>
    </div>
    <div role="main" class="ui-content">
        <h3>公司简介</h3>
        <p>我们是领先的移动应用开发商...</p>
    </div>
</div>

</body>
</html>

关键属性说明：

属性	说明	示例
`data-role="page"`	定义一个页面容器	`<div data-role="page">`
`data-role="header"`	页面头部	`<div data-role="header">`
`data-role="content"`	页面主要内容区域	`<div data-role="content">`
`data-role="footer"`	页面底部	`<div data-role="footer">`
`data-position="fixed"`	固定定位	`data-position="fixed"`
`data-transition`	页面切换动画	`data-transition="slide"`

3. UI组件

jQuery Mobile提供了一系列触摸友好的UI组件。

列表视图

表格布局

首页

搜索

我的

常用组件代码示例

按钮


<!-- 基本按钮 -->
<a href="#" data-role="button">普通按钮</a>

<!-- 带图标的按钮 -->
<a href="#" data-role="button" data-icon="home">首页</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="right">搜索</a>

<!-- 内联按钮组 -->
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button">按钮1</a>
    <a href="#" data-role="button">按钮2</a>
    <a href="#" data-role="button">按钮3</a>
</div>

<!-- 迷你按钮 -->
<a href="#" data-role="button" data-mini="true">迷你按钮</a>

表单元素


<!-- 文本输入 -->
<div class="ui-field-contain">
    <label for="name">姓名：</label>
    <input type="text" name="name" id="name">
</div>

<!-- 下拉选择 -->
<div class="ui-field-contain">
    <label for="select-choice">城市：</label>
    <select name="select-choice" id="select-choice">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
    </select>
</div>

<!-- 单选按钮 -->
<fieldset data-role="controlgroup">
    <legend>性别：</legend>
    <input type="radio" name="gender" id="male" value="male">
    <label for="male">男</label>
    <input type="radio" name="gender" id="female" value="female">
    <label for="female">女</label>
</fieldset>

<!-- 复选框 -->
<fieldset data-role="controlgroup">
    <legend>兴趣：</legend>
    <input type="checkbox" name="interest" id="music">
    <label for="music">音乐</label>
    <input type="checkbox" name="interest" id="sports">
    <label for="sports">体育</label>
</fieldset>

<!-- 滑块 -->
<div class="ui-field-contain">
    <label for="slider">音量：</label>
    <input type="range" name="slider" id="slider" value="50" min="0" max="100">
</div>

列表视图


<!-- 基本列表 -->
<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" data-autodividers="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Orange</a></li>
</ul>

<!-- 带缩略图的列表 -->
<ul data-role="listview">
    <li>
        <a href="#">
            <img src="user1.jpg" class="ui-li-thumb">
            <h2>张三</h2>
            <p>在线</p>
        </a>
    </li>
</ul>

<!-- 可分割列表项 -->
<ul data-role="listview" data-split-icon="gear">
    <li>
        <a href="#">
            <h2>设置项</h2>
            <p>详细描述</p>
        </a>
        <a href="#popup" data-rel="popup">编辑</a>
    </li>
</ul>

对话框


<!-- 打开对话框的链接 -->
<a href="#dialog" data-rel="dialog" data-transition="pop">打开对话框</a>

<!-- 对话框页面 -->
<div data-role="page" id="dialog">
    <div data-role="header">
        <h1>确认</h1>
    </div>
    <div role="main" class="ui-content">
        <p>确定要删除这条记录吗？</p>
        <a href="#" data-role="button" data-rel="back">取消</a>
        <a href="#" data-role="button" data-transition="flow">确定</a>
    </div>
</div>

<!-- 弹出框 -->
<a href="#popupMenu" data-rel="popup" data-role="button">打开菜单</a>
<div data-role="popup" id="popupMenu" data-theme="a">
    <ul data-role="listview" data-inset="true" style="min-width:210px;">
        <li data-role="divider">选择操作</li>
        <li><a href="#">编辑</a></li>
        <li><a href="#">删除</a></li>
        <li><a href="#">分享</a></li>
    </ul>
</div>

4. 触摸事件

jQuery Mobile提供了专门的触摸事件处理，以优化移动端交互体验。

触摸事件演示

触摸区域

等待触摸...

触摸事件代码示例


// 点击事件（优化版）
$("#element").on("tap", function(event){
    console.log("点击事件触发");
    alert("点击了元素");
});

// 长按事件
$("#element").on("taphold", function(event){
    console.log("长按事件触发");
    showContextMenu();
});

// 滑动事件
$("#element").on("swipe", function(event){
    console.log("滑动事件触发");
});

// 左滑
$("#element").on("swipeleft", function(event){
    console.log("向左滑动");
    nextPage();
});

// 右滑
$("#element").on("swiperight", function(event){
    console.log("向右滑动");
    prevPage();
});

// 上滑
$("#element").on("swipeup", function(event){
    console.log("向上滑动");
    scrollUp();
});

// 下滑
$("#element").on("swipedown", function(event){
    console.log("向下滑动");
    scrollDown();
});

// 触摸开始
$("#element").on("touchstart", function(event){
    console.log("触摸开始");
    var touch = event.originalEvent.touches[0];
    console.log("坐标：", touch.pageX, touch.pageY);
});

// 触摸移动
$("#element").on("touchmove", function(event){
    event.preventDefault(); // 防止默认滚动
    console.log("触摸移动");
});

// 触摸结束
$("#element").on("touchend", function(event){
    console.log("触摸结束");
});

// 方向改变事件
$(window).on("orientationchange", function(event){
    var orientation = event.orientation;
    console.log("方向改变：", orientation);

    if(orientation === "portrait"){
        // 竖屏模式
        adjustLayoutForPortrait();
    } else {
        // 横屏模式
        adjustLayoutForLandscape();
    }
});

// 页面滚动事件
$(document).on("scrollstart", function(){
    console.log("开始滚动");
});

$(document).on("scrollstop", function(){
    console.log("停止滚动");
});

// 防止快速多次点击
$("#button").on("tap", function(){
    var $this = $(this);
    if($this.data("tapped")) return;

    $this.data("tapped", true);
    setTimeout(function(){
        $this.data("tapped", false);
    }, 1000); // 1秒内防止重复点击

    // 执行操作
    performAction();
});

事件对象属性：

属性	说明
`event.type`	事件类型（tap、swipe等）
`event.pageX / event.pageY`	触摸点的页面坐标
`event.target`	触发事件的元素
`event.swipestart.coords`	滑动开始坐标
`event.swipestop.coords`	滑动结束坐标
`event.scrolldelta`	滚动距离和方向

5. 主题系统

jQuery Mobile提供了一套灵活的主题系统，可以轻松定制应用的外观。

主题预览

这是一个提示

主题使用示例


<!-- 全局主题设置 -->
<div data-role="page" data-theme="a">
    <!-- 整个页面使用主题a -->
</div>

<!-- 单个组件主题 -->
<a href="#" data-role="button" data-theme="b">主题b按钮</a>

<!-- 列表项主题 -->
<ul data-role="listview">
    <li data-theme="c"><a href="#">主题c列表项</a></li>
    <li data-theme="d"><a href="#">主题d列表项</a></li>
</ul>

<!-- 对话框主题 -->
<div data-role="page" id="dialog" data-theme="e" data-overlay-theme="a">
    <!-- 对话框使用主题e，遮罩使用主题a -->
</div>

创建自定义主题：


/* 自定义主题 - 主题f */
.ui-btn.ui-btn-f {
    background: #9b59b6;
    border-color: #8e44ad;
    color: white;
    text-shadow: 0 1px 0 #8e44ad;
}

.ui-btn.ui-btn-f:hover,
.ui-btn.ui-btn-f:focus {
    background: #8e44ad;
}

.ui-bar-f {
    background: #9b59b6;
    color: white;
    border-color: #8e44ad;
}

.ui-body-f {
    background: #ecf0f1;
    color: #2c3e50;
    border-color: #bdc3c7;
}

响应式主题切换：


// 根据设备宽度切换主题
function adjustThemeByScreenWidth() {
    var width = $(window).width();

    if(width < 768) { // 手机
        $("body").attr("data-theme", "a");
    } else if(width < 992) { // 平板
        $("body").attr("data-theme", "b");
    } else { // 桌面
        $("body").attr("data-theme", "c");
    }
}

// 根据时间切换主题（日间/夜间模式）
function adjustThemeByTime() {
    var hour = new Date().getHours();

    if(hour >= 6 && hour < 18) { // 日间
        $("body").attr("data-theme", "a");
        $("body").removeClass("night-mode");
    } else { // 夜间
        $("body").attr("data-theme", "e");
        $("body").addClass("night-mode");
    }
}

// 用户偏好主题
function setUserTheme(theme) {
    localStorage.setItem("userTheme", theme);
    $("body").attr("data-theme", theme);
}

// 初始化主题
$(document).on("pagecreate", function() {
    var savedTheme = localStorage.getItem("userTheme") || "a";
    $("body").attr("data-theme", savedTheme);
});

综合实践：创建一个移动应用

使用jQuery Mobile创建一个简单的待办事项应用。

功能要求

添加新任务
标记完成任务
删除任务
任务筛选
数据持久化

实现步骤

创建多页面结构（首页、添加页、关于页）
使用列表视图显示任务列表
实现滑动删除功能
使用localStorage存储数据
添加触摸事件处理
应用响应式主题

性能优化建议

避免做法

避免过多嵌套页面
不要滥用复杂动画
避免大尺寸图片
不要阻塞UI线程
避免不必要的DOM操作

浏览器兼容性

平台	浏览器	支持版本	说明
iOS	Safari	6.0+	完全支持
iOS	Chrome	所有版本	完全支持
Android	Chrome	4.0+	完全支持
Android	Firefox	所有版本	完全支持
Windows	IE/Edge	10+	基本支持

上一章: jQuery UI组件下一章: jQuery 性能优化

jQuery教程

jQueryMobile

1. jQuery Mobile 介绍

主要特性

支持平台

基本引入

2. 页面结构

结构演示

页面内容

页面结构代码

关键属性说明：

3. UI组件

列表视图

表格布局

常用组件代码示例

4. 触摸事件

触摸事件演示

触摸区域

触摸事件代码示例

事件对象属性：

5. 主题系统

主题预览

主题使用示例

创建自定义主题：

响应式主题切换：

综合实践：创建一个移动应用

功能要求

实现步骤

性能优化建议

推荐做法

避免做法

浏览器兼容性

jQuery教程

jQueryMobile

1. jQuery Mobile 介绍

主要特性

支持平台

基本引入

2. 页面结构

结构演示

页面内容

页面结构代码

关键属性说明：

3. UI组件

列表视图

表格布局

常用组件代码示例

4. 触摸事件

触摸事件演示

触摸区域

触摸事件代码示例

事件对象属性：

5. 主题系统

主题预览

主题使用示例

创建自定义主题：

响应式主题切换：

综合实践：创建一个移动应用

功能要求

实现步骤

性能优化建议

推荐做法

避免做法

浏览器兼容性

待办事项应用示例代码