零基础学习jQuery Mobile快速入门教程从新手到高手轻松掌握移动应用开发技能打造跨平台响应式网页应用

威震华夏关云长 · 发表于 2025-9-11 21:40:13

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

1. jQuery Mobile简介

jQuery Mobile是一个基于jQuery的触控优化的HTML5网页框架，专为移动设备设计。它允许开发者创建在各种智能手机、平板电脑和桌面设备上都能正常运行的响应式网站和应用。jQuery Mobile的核心优势在于其”编写一次，到处运行”的理念，使开发者能够快速构建跨平台的移动应用。

jQuery Mobile的主要特点包括：

• 跨平台兼容性：支持iOS、Android、Windows Phone、BlackBerry等主流移动平台
• 响应式设计：自动适应不同屏幕尺寸
• 主题系统：提供可定制的主题和样式
• 丰富的UI组件：包括按钮、列表、表单、对话框等
• 简单的API：基于jQuery，学习曲线平缓
• 无需JavaScript知识：主要通过HTML5 data-*属性实现功能

2. 环境搭建

2.1 基本HTML结构

要开始使用jQuery Mobile，首先需要创建一个基本的HTML5文档，并引入jQuery Mobile所需的CSS和JavaScript文件。以下是一个基本的HTML模板：

<!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.3.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.2 使用CDN或本地文件

你可以选择使用CDN（内容分发网络）来引入jQuery Mobile文件，如上面的示例所示。这种方式简单快捷，适合开发和测试。对于生产环境，你可能希望下载这些文件并托管在自己的服务器上，以提高加载速度和可靠性。

从jQuery Mobile官方网站（https://jquerymobile.com/）下载最新版本的文件后，可以将它们放在项目的相应目录中，然后修改引用路径：

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>

复制代码

2.3 开发工具推荐

虽然jQuery Mobile开发可以使用任何文本编辑器，但以下工具可以提高开发效率：

• Visual Studio Code：免费、强大的代码编辑器，支持HTML、CSS和JavaScript的智能提示和语法高亮
• Sublime Text：轻量级但功能丰富的文本编辑器
• Adobe Dreamweaver：提供可视化设计界面和代码编辑功能
• Chrome开发者工具：用于调试和测试移动应用

3. 基本页面结构

3.1 单页面模板

jQuery Mobile应用的基本单位是”页面”。在单个HTML文件中，可以定义一个或多个页面。以下是一个单页面的基本结构：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>单页面示例</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">
<div data-role="header">
<h1>欢迎来到jQuery Mobile</h1>
</div>
<div data-role="content">
<p>这是页面的主要内容区域。</p>
<a href="#" data-role="button">点击我</a>
</div>
<div data-role="footer">
<h4>页面底部</h4>
</div>
</div>
</body>
</html>

复制代码

在这个结构中：

• data-role="page"定义了一个jQuery Mobile页面
• data-role="header"定义了页面的头部区域
• data-role="content"定义了页面的主要内容区域
• data-role="footer"定义了页面的底部区域

3.2 多页面模板

在单个HTML文件中，可以定义多个页面，每个页面都有一个唯一的ID。页面之间可以通过链接进行导航：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>多页面示例</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 data-role="content">
<p>欢迎来到首页！</p>
<a href="#about" data-role="button">关于我们</a>
<a href="#contact" data-role="button">联系我们</a>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile教程</h4>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>关于我们</h1>
<a href="#home" data-icon="home" data-iconpos="notext">首页</a>
</div>
<div data-role="content">
<p>这是关于我们的页面。</p>
<p>jQuery Mobile是一个强大的移动应用开发框架。</p>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile教程</h4>
</div>
</div>
<div data-role="page" id="contact">
<div data-role="header">
<h1>联系我们</h1>
<a href="#home" data-icon="home" data-iconpos="notext">首页</a>
</div>
<div data-role="content">
<p>这是联系我们的页面。</p>
<p>邮箱：info@example.com</p>
<p>电话：123-456-7890</p>
</div>
<div data-role="footer">
<h4>© 2023 jQuery Mobile教程</h4>
</div>
</div>
</body>
</html>

复制代码

在这个多页面示例中：

• 每个页面都有一个唯一的ID（如id="home"）
• 页面之间的链接使用href="#页面ID"的格式
• 在子页面的头部添加了返回首页的按钮，使用data-icon="home"属性

4. 导航和页面转换

4.1 页面链接和导航

在jQuery Mobile中，页面之间的导航可以通过几种方式实现：

如前面的多页面示例所示，使用锚点链接（href="#页面ID"）可以在同一HTML文档中的页面之间导航：

<a href="#about" data-role="button">关于我们</a>

复制代码

要导航到外部HTML文件中的页面，可以使用标准的链接方式：

<a href="about.html" data-role="button">关于我们</a>

复制代码

jQuery Mobile会自动在页面中添加返回按钮，但你也可以手动添加：

<a href="#" data-rel="back" data-role="button" data-icon="back">返回</a>

复制代码

4.2 页面转换效果

jQuery Mobile提供了多种页面转换效果，通过data-transition属性指定：

<a href="#about" data-transition="slide" data-role="button">滑动效果</a>
<a href="#about" data-transition="pop" data-role="button">弹出效果</a>
<a href="#about" data-transition="fade" data-role="button">淡入效果</a>
<a href="#about" data-transition="flip" data-role="button">翻转效果</a>
<a href="#about" data-transition="turn" data-role="button">转动效果</a>
<a href="#about" data-transition="flow" data-role="button">流动效果</a>
<a href="#about" data-transition="slidefade" data-role="button">滑动淡入效果</a>
<a href="#about" data-transition="slideup" data-role="button">向上滑动效果</a>
<a href="#about" data-transition="slidedown" data-role="button">向下滑动效果</a>

复制代码

4.3 导航栏和标签栏

导航栏通常放在页眉或页脚中，用于放置主要导航链接：

<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">首页</a></li>
<li><a href="#about" data-icon="info">关于</a></li>
<li><a href="#contact" data-icon="mail">联系</a></li>
</ul>
</div>
</div>

复制代码

标签栏类似于导航栏，但通常用于内容区域的顶部：

<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#tab1" data-ajax="false">标签1</a></li>
<li><a href="#tab2" data-ajax="false">标签2</a></li>
<li><a href="#tab3" data-ajax="false">标签3</a></li>
</ul>
</div>
<div id="tab1" class="ui-body-d ui-content">
<h3>第一个标签内容</h3>
<p>这是第一个标签的内容。</p>
</div>
<div id="tab2" class="ui-body-d ui-content">
<h3>第二个标签内容</h3>
<p>这是第二个标签的内容。</p>
</div>
<div id="tab3" class="ui-body-d ui-content">
<h3>第三个标签内容</h3>
<p>这是第三个标签的内容。</p>
</div>
</div>

复制代码

5. 基本UI组件

5.1 按钮

按钮是移动应用中最常用的交互元素之一。jQuery Mobile提供了多种按钮样式和选项：

<a href="#" data-role="button">链接按钮</a>
<button>按钮元素</button>
<input type="button" value="输入按钮">
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">

复制代码

默认情况下，按钮会占据整行宽度。使用data-inline="true"可以使按钮只占据必要的宽度：

<a href="#" data-role="button" data-inline="true">按钮1</a>
<a href="#" data-role="button" data-inline="true">按钮2</a>
<a href="#" data-role="button" data-inline="true">按钮3</a>

复制代码

将多个按钮组合在一起：

<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button">是</a>
<a href="#" data-role="button">否</a>
<a href="#" data-role="button">取消</a>
</div>

复制代码

<a href="#" data-role="button" data-icon="delete">删除</a>
<a href="#" data-role="button" data-icon="plus">添加</a>
<a href="#" data-role="button" data-icon="arrow-l">后退</a>
<a href="#" data-role="button" data-icon="arrow-r">前进</a>
<a href="#" data-role="button" data-icon="arrow-u">向上</a>
<a href="#" data-role="button" data-icon="arrow-d">向下</a>
<a href="#" data-role="button" data-icon="gear">设置</a>
<a href="#" data-role="button" data-icon="refresh">刷新</a>
<a href="#" data-role="button" data-icon="check">检查</a>
<a href="#" data-role="button" data-icon="grid">网格</a>
<a href="#" data-role="button" data-icon="star">星标</a>
<a href="#" data-role="button" data-icon="alert">警报</a>
<a href="#" data-role="button" data-icon="info">信息</a>
<a href="#" data-role="button" data-icon="home">首页</a>
<a href="#" data-role="button" data-icon="search">搜索</a>

复制代码

<a href="#" data-role="button" data-icon="delete" data-iconpos="notext"></a>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext"></a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext"></a>

复制代码

5.2 列表视图

列表视图是移动应用中显示数据集合的常用组件。jQuery Mobile提供了丰富的列表样式和功能：

<ul data-role="listview">
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">橙子</a></li>
<li><a href="#">葡萄</a></li>
</ul>

复制代码

<ul data-role="listview">
<li><a href="#"><img src="images/apple.png" alt="苹果" class="ui-li-icon">苹果</a></li>
<li><a href="#"><img src="images/banana.png" alt="香蕉" class="ui-li-icon">香蕉</a></li>
<li><a href="#"><img src="images/orange.png" alt="橙子" class="ui-li-icon">橙子</a></li>
<li><a href="#"><img src="images/grape.png" alt="葡萄" class="ui-li-icon">葡萄</a></li>
</ul>

复制代码

<ul data-role="listview">
<li>
<a href="#">
<img src="images/apple.jpg" alt="苹果">
<h2>苹果</h2>
<p>苹果是一种常见的水果，富含维生素和纤维。</p>
</a>
</li>
<li>
<a href="#">
<img src="images/banana.jpg" alt="香蕉">
<h2>香蕉</h2>
<p>香蕉富含钾元素，有助于维持心脏健康。</p>
</a>
</li>
<li>
<a href="#">
<img src="images/orange.jpg" alt="橙子">
<h2>橙子</h2>
<p>橙子含有丰富的维生素C，有助于增强免疫力。</p>
</a>
</li>
</ul>

复制代码

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li>
<a href="#apple">
<img src="images/apple.jpg" alt="苹果">
<h2>苹果</h2>
<p>苹果是一种常见的水果，富含维生素和纤维。</p>
</a>
<a href="#apple-settings" data-rel="popup" data-position-to="window" data-transition="pop">设置</a>
</li>
<li>
<a href="#banana">
<img src="images/banana.jpg" alt="香蕉">
<h2>香蕉</h2>
<p>香蕉富含钾元素，有助于维持心脏健康。</p>
</a>
<a href="#banana-settings" data-rel="popup" data-position-to="window" data-transition="pop">设置</a>
</li>
</ul>

复制代码

<ul data-role="listview" data-autodividers="true">
<li><a href="#">苹果</a></li>
<li><a href="#">杏子</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">蓝莓</a></li>
<li><a href="#">樱桃</a></li>
<li><a href="#">橙子</a></li>
<li><a href="#">葡萄</a></li>
</ul>

复制代码

5.3 表单元素

jQuery Mobile为各种表单元素提供了移动友好的样式和交互：

<div data-role="fieldcontain">
<label for="name">姓名：</label>
<input type="text" name="name" id="name" value="" placeholder="请输入您的姓名">
</div>
<div data-role="fieldcontain">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" value="" placeholder="请输入您的邮箱">
</div>
<div data-role="fieldcontain">
<label for="password">密码：</label>
<input type="password" name="password" id="password" value="" placeholder="请输入密码">
</div>
<div data-role="fieldcontain">
<label for="textarea">留言：</label>
<textarea cols="40" rows="8" name="textarea" id="textarea" placeholder="请输入您的留言"></textarea>
</div>

复制代码

<div data-role="fieldcontain">
<label for="search">搜索：</label>
<input type="search" name="search" id="search" value="" placeholder="搜索内容...">
</div>

复制代码

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>性别：</legend>
<input type="radio" name="gender" id="male" value="male" checked="checked">
<label for="male">男</label>
<input type="radio" name="gender" id="female" value="female">
<label for="female">女</label>
</fieldset>
</div>

复制代码

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>兴趣爱好：</legend>
<input type="checkbox" name="hobby1" id="hobby1" value="reading">
<label for="hobby1">阅读</label>
<input type="checkbox" name="hobby2" id="hobby2" value="sports">
<label for="hobby2">运动</label>
<input type="checkbox" name="hobby3" id="hobby3" value="music">
<label for="hobby3">音乐</label>
</fieldset>
</div>

复制代码

<div data-role="fieldcontain">
<label for="select-choice" class="select">选择国家：</label>
<select name="select-choice" id="select-choice">
<option value="china">中国</option>
<option value="usa">美国</option>
<option value="uk">英国</option>
<option value="japan">日本</option>
<option value="korea">韩国</option>
</select>
</div>

复制代码

<div data-role="fieldcontain">
<label for="slider">音量：</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100">
</div>

复制代码

<div data-role="fieldcontain">
<label for="flip-switch">Wi-Fi：</label>
<select name="flip-switch" id="flip-switch" data-role="slider">
<option value="off">关闭</option>
<option value="on">开启</option>
</select>
</div>

复制代码

6. 弹窗和对话框

6.1 基本弹窗

弹窗是jQuery Mobile中显示临时信息或收集用户输入的组件：

<a href="#popupBasic" data-rel="popup" data-role="button">显示基本弹窗</a>
<div data-role="popup" id="popupBasic">
<p>这是一个基本弹窗。</p>
</div>

复制代码

6.2 带有选项的弹窗

<a href="#popupOptions" data-rel="popup" data-role="button">显示选项弹窗</a>
<div data-role="popup" id="popupOptions" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>删除项目？</h1>
</div>
<div data-role="content" data-theme="d">
<h3>您确定要删除这个项目吗？</h3>
<p>此操作不可撤销。</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">取消</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">删除</a>
</div>
</div>

复制代码

6.3 表单弹窗

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button">登录</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>请登录</h3>
<label for="un" class="ui-hidden-accessible">用户名：</label>
<input type="text" name="user" id="un" value="" placeholder="用户名" data-theme="a">
<label for="pw" class="ui-hidden-accessible">密码：</label>
<input type="password" name="pass" id="pw" value="" placeholder="密码" data-theme="a">
<button type="submit" data-theme="b" data-icon="check">登录</button>
</div>
</form>
</div>

复制代码

6.4 对话框页面

<a href="#dialogPage" data-rel="dialog" data-transition="pop" data-role="button">显示对话框</a>
<div data-role="page" id="dialogPage">
<div data-role="header" data-theme="d">
<h1>对话框</h1>
</div>
<div data-role="content" data-theme="c">
<h1>删除确认</h1>
<p>您确定要删除这条记录吗？</p>
<a href="#" data-role="button" data-rel="back" data-theme="b" data-icon="check">是</a>
<a href="#" data-role="button" data-rel="back" data-theme="c" data-icon="delete">否</a>
</div>
</div>

复制代码

7. 主题和样式定制

7.1 jQuery Mobile主题系统

jQuery Mobile使用字母（a到e）来标识不同的主题样式，每个主题定义了一套颜色和样式。你可以通过设置data-theme属性来应用不同的主题：

<div data-role="page" data-theme="b">
<div data-role="header" data-theme="a">
<h1>主题示例</h1>
</div>
<div data-role="content">
<p>这是内容区域。</p>
<a href="#" data-role="button" data-theme="c">主题C按钮</a>
<a href="#" data-role="button" data-theme="d">主题D按钮</a>
<a href="#" data-role="button" data-theme="e">主题E按钮</a>
</div>
<div data-role="footer" data-theme="a">
<h4>页脚</h4>
</div>
</div>

复制代码

7.2 自定义主题

你可以通过覆盖CSS样式来自定义主题。以下是一个简单的自定义主题示例：

/* 自定义主题F */
.ui-bar-f {
border: 1px solid #333;
background: #111;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px 0 #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111));
background-image: -webkit-linear-gradient(top, #3c3c3c, #111);
background-image: -moz-linear-gradient(top, #3c3c3c, #111);
background-image: -ms-linear-gradient(top, #3c3c3c, #111);
background-image: -o-linear-gradient(top, #3c3c3c, #111);
background-image: linear-gradient(top, #3c3c3c, #111);
}
.ui-body-f {
border: 1px solid #444;
background: #222;
color: #fff;
text-shadow: 0 1px 0 #111;
font-weight: normal;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
background-image: -webkit-linear-gradient(top, #444, #222);
background-image: -moz-linear-gradient(top, #444, #222);
background-image: -ms-linear-gradient(top, #444, #222);
background-image: -o-linear-gradient(top, #444, #222);
background-image: linear-gradient(top, #444, #222);
}
.ui-btn-up-f {
border: 1px solid #222;
background: #333;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 0 #000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333));
background-image: -webkit-linear-gradient(top, #555, #333);
background-image: -moz-linear-gradient(top, #555, #333);
background-image: -ms-linear-gradient(top, #555, #333);
background-image: -o-linear-gradient(top, #555, #333);
background-image: linear-gradient(top, #555, #333);
}

复制代码

然后在HTML中使用这个自定义主题：

<div data-role="page" data-theme="f">
<div data-role="header" data-theme="f">
<h1>自定义主题</h1>
</div>
<div data-role="content" data-theme="f">
<p>这是使用自定义主题F的内容。</p>
<a href="#" data-role="button" data-theme="f">主题F按钮</a>
</div>
</div>

复制代码

7.3 使用ThemeRoller

jQuery Mobile提供了一个在线工具ThemeRoller（https://themeroller.jquerymobile.com/），可以可视化的创建和自定义主题。使用ThemeRoller，你可以：

1. 选择预定义的主题作为起点
2. 调整颜色、渐变、字体等属性
3. 实时预览效果
4. 导出自定义主题的CSS文件

8. 响应式设计

8.1 响应式网格系统

jQuery Mobile提供了一个简单的响应式网格系统，可以创建适应不同屏幕尺寸的布局：

<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-body ui-body-d">
<p>第一列</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-body ui-body-d">
<p>第二列</p>
</div>
</div>
</div>
<div class="ui-grid-b">
<div class="ui-block-a">
<div class="ui-body ui-body-d">
<p>第一列</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-body ui-body-d">
<p>第二列</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-body ui-body-d">
<p>第三列</p>
</div>
</div>
</div>
<div class="ui-grid-c">
<div class="ui-block-a">
<div class="ui-body ui-body-d">
<p>第一列</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-body ui-body-d">
<p>第二列</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-body ui-body-d">
<p>第三列</p>
</div>
</div>
<div class="ui-block-d">
<div class="ui-body ui-body-d">
<p>第四列</p>
</div>
</div>
</div>
<div class="ui-grid-d">
<div class="ui-block-a">
<div class="ui-body ui-body-d">
<p>第一列</p>
</div>
</div>
<div class="ui-block-b">
<div class="ui-body ui-body-d">
<p>第二列</p>
</div>
</div>
<div class="ui-block-c">
<div class="ui-body ui-body-d">
<p>第三列</p>
</div>
</div>
<div class="ui-block-d">
<div class="ui-body ui-body-d">
<p>第四列</p>
</div>
</div>
<div class="ui-block-e">
<div class="ui-body ui-body-d">
<p>第五列</p>
</div>
</div>
</div>

复制代码

8.2 响应式表格

jQuery Mobile提供了”列切换”表格模式，可以在小屏幕上隐藏不重要的列：

<table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
<thead>
<tr>
<th data-priority="1">排名</th>
<th data-priority="2">球队</th>
<th data-priority="3">场次</th>
<th data-priority="4">胜</th>
<th data-priority="5">平</th>
<th data-priority="6">负</th>
<th data-priority="7">积分</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>球队A</td>
<td>10</td>
<td>8</td>
<td>1</td>
<td>1</td>
<td>25</td>
</tr>
<tr>
<th>2</th>
<td>球队B</td>
<td>10</td>
<td>7</td>
<td>2</td>
<td>1</td>
<td>23</td>
</tr>
<tr>
<th>3</th>
<td>球队C</td>
<td>10</td>
<td>6</td>
<td>3</td>
<td>1</td>
<td>21</td>
</tr>
</tbody>
</table>

复制代码

data-priority属性用于指定列的重要性，数字越小表示越重要。在小屏幕上，用户可以通过一个按钮来选择显示哪些列。

8.3 响应式面板

面板是可以在页面边缘滑入/滑出的容器，适合用于导航或显示辅助信息：

<a href="#myPanel" data-role="button">打开面板</a>
<div data-role="panel" id="myPanel" data-display="overlay">
<h2>菜单</h2>
<p>这里可以放置导航链接或其他内容。</p>
<ul data-role="listview">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
<a href="#" data-rel="close" data-role="button">关闭面板</a>
</div>

复制代码

面板可以设置不同的显示模式：

• data-display="overlay"：面板覆盖在内容上方
• data-display="push"：面板推动内容
• data-display="reveal"：面板从内容下显示

9. 实际项目案例

9.1 移动待办事项应用

下面是一个简单的移动待办事项应用的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>待办事项</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>
<style>
.completed {
text-decoration: line-through;
color: #aaa;
}
.task-date {
font-size: 0.8em;
color: #777;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>我的待办事项</h1>
<a href="#add-task" data-icon="plus" data-iconpos="notext">添加</a>
</div>
<div data-role="content">
<ul data-role="listview" id="task-list" data-filter="true" data-filter-placeholder="搜索任务...">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home" class="ui-btn-active">所有</a></li>
<li><a href="#active" data-icon="check">进行中</a></li>
<li><a href="#completed" data-icon="star">已完成</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="active">
<div data-role="header">
<h1>进行中的任务</h1>
<a href="#home" data-icon="home" data-iconpos="notext">首页</a>
</div>
<div data-role="content">
<ul data-role="listview" id="active-task-list" data-filter="true" data-filter-placeholder="搜索任务...">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">所有</a></li>
<li><a href="#active" data-icon="check" class="ui-btn-active">进行中</a></li>
<li><a href="#completed" data-icon="star">已完成</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="completed">
<div data-role="header">
<h1>已完成的任务</h1>
<a href="#home" data-icon="home" data-iconpos="notext">首页</a>
</div>
<div data-role="content">
<ul data-role="listview" id="completed-task-list" data-filter="true" data-filter-placeholder="搜索任务...">
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home">所有</a></li>
<li><a href="#active" data-icon="check">进行中</a></li>
<li><a href="#completed" data-icon="star" class="ui-btn-active">已完成</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="add-task">
<div data-role="header">
<h1>添加新任务</h1>
<a href="#home" data-icon="back" data-iconpos="notext">返回</a>
</div>
<div data-role="content">
<form id="task-form">
<div data-role="fieldcontain">
<label for="task-title">任务标题：</label>
<input type="text" name="task-title" id="task-title" placeholder="输入任务标题">
</div>
<div data-role="fieldcontain">
<label for="task-description">任务描述：</label>
<textarea name="task-description" id="task-description" placeholder="输入任务描述"></textarea>
</div>
<div data-role="fieldcontain">
<label for="task-date">截止日期：</label>
<input type="date" name="task-date" id="task-date">
</div>
<div data-role="fieldcontain">
<label for="task-priority">优先级：</label>
<select name="task-priority" id="task-priority">
<option value="low">低</option>
<option value="medium" selected>中</option>
<option value="high">高</option>
</select>
</div>
<button type="submit" data-theme="b">添加任务</button>
</form>
</div>
</div>
<script>
// 任务数据
var tasks = [
{
id: 1,
title: "学习jQuery Mobile",
description: "完成jQuery Mobile教程的学习",
date: "2023-12-31",
priority: "high",
completed: false
},
{
id: 2,
title: "购买生日礼物",
description: "为朋友挑选生日礼物",
date: "2023-12-15",
priority: "medium",
completed: false
},
{
id: 3,
title: "回复邮件",
description: "回复客户询问的邮件",
date: "2023-12-10",
priority: "high",
completed: true
}
];
// 渲染任务列表
function renderTasks() {
// 渲染所有任务
var allTasksHtml = '';
var activeTasksHtml = '';
var completedTasksHtml = '';
tasks.forEach(function(task) {
var priorityIcon = task.priority === 'high' ? 'alert' : (task.priority === 'medium' ? 'info' : 'check');
var priorityClass = task.priority === 'high' ? 'high-priority' : (task.priority === 'medium' ? 'medium-priority' : 'low-priority');
var completedClass = task.completed ? 'completed' : '';
var taskHtml = '<li data-icon="false" class="' + priorityClass + ' ' + completedClass + '">';
taskHtml += '<a href="#" data-task-id="' + task.id + '" class="task-toggle">';
taskHtml += '<h2>' + task.title + '</h2>';
taskHtml += '<p>' + task.description + '</p>';
taskHtml += '<p class="task-date">截止日期: ' + task.date + '</p>';
taskHtml += '<span class="ui-li-count ui-btn-up-' + (task.priority === 'high' ? 'e' : (task.priority === 'medium' ? 'b' : 'c')) + '">';
taskHtml += '<span class="ui-icon ui-icon-' + priorityIcon + '"></span>';
taskHtml += '</span>';
taskHtml += '</a>';
taskHtml += '<a href="#" data-task-id="' + task.id + '" class="task-delete" data-icon="delete">删除</a>';
taskHtml += '</li>';
allTasksHtml += taskHtml;
if (task.completed) {
completedTasksHtml += taskHtml;
} else {
activeTasksHtml += taskHtml;
}
});
$('#task-list').html(allTasksHtml).listview('refresh');
$('#active-task-list').html(activeTasksHtml).listview('refresh');
$('#completed-task-list').html(completedTasksHtml).listview('refresh');
}
// 添加新任务
$('#task-form').on('submit', function(e) {
e.preventDefault();
var newTask = {
id: tasks.length > 0 ? Math.max.apply(Math, tasks.map(function(t) { return t.id; })) + 1 : 1,
title: $('#task-title').val(),
description: $('#task-description').val(),
date: $('#task-date').val(),
priority: $('#task-priority').val(),
completed: false
};
tasks.push(newTask);
renderTasks();
// 重置表单并返回主页
this.reset();
$.mobile.changePage('#home');
});
// 切换任务完成状态
$(document).on('click', '.task-toggle', function(e) {
e.preventDefault();
var taskId = parseInt($(this).data('task-id'));
var task = tasks.find(function(t) { return t.id === taskId; });
if (task) {
task.completed = !task.completed;
renderTasks();
}
});
// 删除任务
$(document).on('click', '.task-delete', function(e) {
e.preventDefault();
var taskId = parseInt($(this).data('task-id'));
tasks = tasks.filter(function(t) { return t.id !== taskId; });
renderTasks();
});
// 初始化
$(document).on('pageinit', function() {
renderTasks();
});
</script>
</body>
</html>

复制代码

这个待办事项应用包含以下功能：

• 添加新任务，包括标题、描述、截止日期和优先级
• 查看所有任务、进行中的任务和已完成的任务
• 标记任务为完成或未完成
• 删除任务
• 搜索任务
• 根据优先级显示不同的图标和颜色

9.2 移动新闻阅读应用

下面是一个简单的移动新闻阅读应用的完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>新闻阅读器</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>
<style>
.news-date {
font-size: 0.8em;
color: #777;
}
.news-category {
font-size: 0.8em;
font-weight: bold;
color: #3388cc;
}
.news-content img {
max-width: 100%;
height: auto;
}
.news-content p {
text-align: justify;
}
</style>
</head>
<body>
<div data-role="page" id="news-list">
<div data-role="header">
<h1>新闻阅读器</h1>
<a href="#settings" data-icon="gear" data-iconpos="notext">设置</a>
</div>
<div data-role="content">
<div data-role="collapsible-set" data-inset="false">
<div data-role="collapsible" data-collapsed="false">
<h2>头条新闻</h2>
<ul data-role="listview" id="headline-news">
</ul>
</div>
<div data-role="collapsible">
<h2>科技新闻</h2>
<ul data-role="listview" id="tech-news">
</ul>
</div>
<div data-role="collapsible">
<h2>体育新闻</h2>
<ul data-role="listview" id="sports-news">
</ul>
</div>
<div data-role="collapsible">
<h2>娱乐新闻</h2>
<ul data-role="listview" id="entertainment-news">
</ul>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#news-list" data-icon="grid" class="ui-btn-active">新闻</a></li>
<li><a href="#favorites" data-icon="star">收藏</a></li>
<li><a href="#about" data-icon="info">关于</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="news-detail">
<div data-role="header">
<h1>新闻详情</h1>
<a href="#news-list" data-icon="back" data-iconpos="notext">返回</a>
</div>
<div data-role="content" id="news-content">
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" id="favorite-btn" data-icon="star">收藏</a></li>
<li><a href="#" id="share-btn" data-icon="action">分享</a></li>
<li><a href="#" id="comment-btn" data-icon="comment">评论</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="favorites">
<div data-role="header">
<h1>我的收藏</h1>
<a href="#news-list" data-icon="back" data-iconpos="notext">返回</a>
</div>
<div data-role="content">
<ul data-role="listview" id="favorites-list">
</ul>
<div id="no-favorites" style="text-align: center; display: none;">
<p>暂无收藏的新闻</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#news-list" data-icon="grid">新闻</a></li>
<li><a href="#favorites" data-icon="star" class="ui-btn-active">收藏</a></li>
<li><a href="#about" data-icon="info">关于</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="settings">
<div data-role="header">
<h1>设置</h1>
<a href="#news-list" data-icon="back" data-iconpos="notext">返回</a>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="font-size">字体大小：</label>
<select name="font-size" id="font-size">
<option value="small">小</option>
<option value="medium" selected>中</option>
<option value="large">大</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="theme">主题：</label>
<select name="theme" id="theme">
<option value="a">黑色</option>
<option value="b" selected>蓝色</option>
<option value="c">灰色</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="auto-refresh">自动刷新：</label>
<select name="auto-refresh" id="auto-refresh" data-role="slider">
<option value="off">关闭</option>
<option value="on">开启</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>新闻类别：</legend>
<input type="checkbox" name="category-headline" id="category-headline" checked>
<label for="category-headline">头条</label>
<input type="checkbox" name="category-tech" id="category-tech" checked>
<label for="category-tech">科技</label>
<input type="checkbox" name="category-sports" id="category-sports" checked>
<label for="category-sports">体育</label>
<input type="checkbox" name="category-entertainment" id="category-entertainment" checked>
<label for="category-entertainment">娱乐</label>
</fieldset>
</div>
<button type="button" id="save-settings" data-theme="b">保存设置</button>
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>关于</h1>
<a href="#news-list" data-icon="back" data-iconpos="notext">返回</a>
</div>
<div data-role="content">
<h2>新闻阅读器 v1.0</h2>
<p>这是一个基于jQuery Mobile开发的移动新闻阅读应用。</p>
<p>功能特点：</p>
<ul>
<li>分类浏览新闻</li>
<li>收藏新闻</li>
<li>自定义设置</li>
<li>响应式设计</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#news-list" data-icon="grid">新闻</a></li>
<li><a href="#favorites" data-icon="star">收藏</a></li>
<li><a href="#about" data-icon="info" class="ui-btn-active">关于</a></li>
</ul>
</div>
</div>
</div>
<script>
// 模拟新闻数据
var newsData = {
headline: [
{
id: 1,
title: "全球科技峰会召开，探讨人工智能未来发展",
summary: "来自世界各地的科技专家齐聚一堂，共同探讨人工智能的未来发展方向和挑战。",
content: "<p>来自世界各地的科技专家齐聚一堂，共同探讨人工智能的未来发展方向和挑战。</p><p>本次峰会为期三天，将围绕人工智能的伦理问题、技术突破、产业应用等多个方面展开深入讨论。</p><p>与会专家普遍认为，人工智能将在未来十年内深刻改变人类的生活方式和工作模式。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/da5549efc66a4f2a.webp' alt='科技峰会'><p>各国政府代表也表示将加强对人工智能领域的投入，推动相关产业的发展。</p>",
date: "2023-12-01",
category: "headline"
},
{
id: 2,
title: "国际气候变化大会达成新协议",
summary: "经过两周的激烈谈判，各国代表就减少碳排放达成新的国际协议。",
content: "<p>经过两周的激烈谈判，各国代表就减少碳排放达成新的国际协议。</p><p>根据新协议，发达国家承诺在2030年前将碳排放量减少50%，发展中国家也将根据自身情况制定减排目标。</p><p>这一协议被认为是应对气候变化的重要一步，得到了环保组织的广泛欢迎。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/88ea1233fe9c4350.webp' alt='气候变化大会'><p>然而，也有批评者认为协议缺乏强制执行机制，实际效果有待观察。</p>",
date: "2023-11-28",
category: "headline"
}
],
tech: [
{
id: 3,
title: "新一代智能手机发布，搭载革命性处理器",
summary: "科技巨头发布新一代智能手机，搭载自主研发的革命性处理器，性能提升50%。",
content: "<p>科技巨头发布新一代智能手机，搭载自主研发的革命性处理器，性能提升50%。</p><p>这款新处理器采用5纳米工艺制造，集成了150亿个晶体管，在保持低功耗的同时大幅提升了计算能力。</p><p>除了处理器，新手机还配备了更先进的摄像头系统和更长的电池续航时间。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/6c43d3410b6a4200.webp' alt='新智能手机'><p>分析师预计，这款新手机将在高端智能手机市场占据重要地位。</p>",
date: "2023-11-25",
category: "tech"
},
{
id: 4,
title: "量子计算机取得重大突破",
summary: "研究团队成功开发出更稳定的量子计算机，为实用化迈出重要一步。",
content: "<p>研究团队成功开发出更稳定的量子计算机，为实用化迈出重要一步。</p><p>新型量子计算机采用了创新的量子纠错技术，大幅提高了量子比特的稳定性，使计算错误率降低了90%。</p><p>这一突破意味着量子计算机在解决复杂问题上的能力将得到显著提升，有望在药物研发、材料科学等领域发挥重要作用。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/1b7b8801aa7a484a.webp' alt='量子计算机'><p>不过，专家表示，量子计算机的完全商业化还需要5到10年的时间。</p>",
date: "2023-11-20",
category: "tech"
}
],
sports: [
{
id: 5,
title: "国家足球队晋级世界杯决赛圈",
summary: "经过激烈角逐，国家足球队成功晋级世界杯决赛圈，时隔20年再次进入世界杯。",
content: "<p>经过激烈角逐，国家足球队成功晋级世界杯决赛圈，时隔20年再次进入世界杯。</p><p>在最后一场预选赛中，国家队以2:0战胜对手，以小组第二的身份晋级。</p><p>全队上下表现出色，特别是年轻球员的发挥令人印象深刻，为球队注入了新的活力。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/b425b1849fb147ec.webp' alt='足球比赛'><p>球迷们对球队在世界杯上的表现充满期待，希望球队能创造历史。</p>",
date: "2023-11-22",
category: "sports"
},
{
id: 6,
title: "网球公开赛落幕，新星夺冠",
summary: "在备受瞩目的网球公开赛决赛中，20岁的新星选手击败卫冕冠军，夺得个人首个大满贯冠军。",
content: "<p>在备受瞩目的网球公开赛决赛中，20岁的新星选手击败卫冕冠军，夺得个人首个大满贯冠军。</p><p>这场比赛持续了3小时45分钟，双方展现出极高的技术水平，最终新星选手以3:2的比分险胜。</p><p>这位年轻选手在过去一年中进步神速，世界排名从100名之外上升到前20，此次夺冠更是证明了他的实力。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/4ebfe822739646ec.webp' alt='网球比赛'><p>赛后，他表示这只是开始，未来会继续努力，争取更多荣誉。</p>",
date: "2023-11-18",
category: "sports"
}
],
entertainment: [
{
id: 7,
title: "年度电影颁奖典礼举行，《追梦人》获最佳影片",
summary: "在备受瞩目的年度电影颁奖典礼上，《追梦人》击败众多强劲对手，荣获最佳影片奖。",
content: "<p>在备受瞩目的年度电影颁奖典礼上，《追梦人》击败众多强劲对手，荣获最佳影片奖。</p><p>这部影片讲述了一个关于坚持梦想的感人故事，自上映以来获得了观众和评论家的一致好评。</p><p>除了最佳影片奖，《追梦人》还获得了最佳导演和最佳男主角两项大奖，成为本届颁奖典礼的最大赢家。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/5a5c2cacc4fd4320.webp' alt='电影颁奖'><p>导演在获奖感言中表示，这个奖项属于所有为电影付出努力的人，特别是那些相信梦想的人。</p>",
date: "2023-11-15",
category: "entertainment"
},
{
id: 8,
title: "流行音乐天后发布新专辑，创销售纪录",
summary: "流行音乐天后时隔三年发布新专辑，首周销量突破500万张，创下了近年来的销售纪录。",
content: "<p>流行音乐天后时隔三年发布新专辑，首周销量突破500万张，创下了近年来的销售纪录。</p><p>这张专辑融合了多种音乐风格，展现了歌手在音乐上的新尝试和突破，获得了乐迷的热烈追捧。</p><p>专辑中的多首歌曲迅速登上各大音乐排行榜榜首，其中主打歌《重生》更是成为社交媒体上的热门话题。</p><img src='https://io.pixtech.org/pixtech/forum/202509/11/fd74cbe68c854ed5.webp' alt='音乐专辑'><p>歌手表示，这张专辑是她个人经历和感悟的真实表达，希望听众能从中获得力量和启发。</p>",
date: "2023-11-10",
category: "entertainment"
}
]
};
// 收藏的新闻ID
var favoriteNewsIds = [];
// 当前查看的新闻
var currentNews = null;
// 渲染新闻列表
function renderNewsLists() {
// 渲染头条新闻
var headlineHtml = '';
newsData.headline.forEach(function(news) {
headlineHtml += '<li><a href="#" data-news-id="' + news.id + '" data-category="headline">';
headlineHtml += '<h2>' + news.title + '</h2>';
headlineHtml += '<p>' + news.summary + '</p>';
headlineHtml += '<p class="news-date">' + news.date + '</p>';
headlineHtml += '</a></li>';
});
$('#headline-news').html(headlineHtml).listview('refresh');
// 渲染科技新闻
var techHtml = '';
newsData.tech.forEach(function(news) {
techHtml += '<li><a href="#" data-news-id="' + news.id + '" data-category="tech">';
techHtml += '<h2>' + news.title + '</h2>';
techHtml += '<p>' + news.summary + '</p>';
techHtml += '<p class="news-date">' + news.date + '</p>';
techHtml += '</a></li>';
});
$('#tech-news').html(techHtml).listview('refresh');
// 渲染体育新闻
var sportsHtml = '';
newsData.sports.forEach(function(news) {
sportsHtml += '<li><a href="#" data-news-id="' + news.id + '" data-category="sports">';
sportsHtml += '<h2>' + news.title + '</h2>';
sportsHtml += '<p>' + news.summary + '</p>';
sportsHtml += '<p class="news-date">' + news.date + '</p>';
sportsHtml += '</a></li>';
});
$('#sports-news').html(sportsHtml).listview('refresh');
// 渲染娱乐新闻
var entertainmentHtml = '';
newsData.entertainment.forEach(function(news) {
entertainmentHtml += '<li><a href="#" data-news-id="' + news.id + '" data-category="entertainment">';
entertainmentHtml += '<h2>' + news.title + '</h2>';
entertainmentHtml += '<p>' + news.summary + '</p>';
entertainmentHtml += '<p class="news-date">' + news.date + '</p>';
entertainmentHtml += '</a></li>';
});
$('#entertainment-news').html(entertainmentHtml).listview('refresh');
}
// 渲染收藏列表
function renderFavoritesList() {
var favoritesHtml = '';
var hasFavorites = false;
// 遍历所有新闻类别
Object.keys(newsData).forEach(function(category) {
newsData[category].forEach(function(news) {
if (favoriteNewsIds.includes(news.id)) {
hasFavorites = true;
favoritesHtml += '<li><a href="#" data-news-id="' + news.id + '" data-category="' + category + '">';
favoritesHtml += '<h2>' + news.title + '</h2>';
favoritesHtml += '<p>' + news.summary + '</p>';
favoritesHtml += '<p class="news-date">' + news.date + '</p>';
favoritesHtml += '<span class="news-category">' + getCategoryName(category) + '</span>';
favoritesHtml += '</a></li>';
}
});
});
if (hasFavorites) {
$('#favorites-list').html(favoritesHtml).listview('refresh');
$('#no-favorites').hide();
} else {
$('#favorites-list').html('');
$('#no-favorites').show();
}
}
// 获取类别名称
function getCategoryName(category) {
var categoryNames = {
'headline': '头条',
'tech': '科技',
'sports': '体育',
'entertainment': '娱乐'
};
return categoryNames[category] || category;
}
// 显示新闻详情
function showNewsDetail(newsId, category) {
var news = newsData[category].find(function(n) { return n.id === parseInt(newsId); });
if (news) {
currentNews = news;
var contentHtml = '<h2>' + news.title + '</h2>';
contentHtml += '<p class="news-category">' + getCategoryName(category) + '</p>';
contentHtml += '<p class="news-date">' + news.date + '</p>';
contentHtml += '<div class="news-content">' + news.content + '</div>';
$('#news-content').html(contentHtml);
// 更新收藏按钮状态
if (favoriteNewsIds.includes(news.id)) {
$('#favorite-btn').text('取消收藏');
} else {
$('#favorite-btn').text('收藏');
}
$.mobile.changePage('#news-detail');
}
}
// 切换收藏状态
function toggleFavorite() {
if (currentNews) {
var index = favoriteNewsIds.indexOf(currentNews.id);
if (index === -1) {
// 添加到收藏
favoriteNewsIds.push(currentNews.id);
$('#favorite-btn').text('取消收藏');
} else {
// 从收藏中移除
favoriteNewsIds.splice(index, 1);
$('#favorite-btn').text('收藏');
}
// 保存到本地存储
localStorage.setItem('favoriteNewsIds', JSON.stringify(favoriteNewsIds));
}
}
// 保存设置
function saveSettings() {
var fontSize = $('#font-size').val();
var theme = $('#theme').val();
var autoRefresh = $('#auto-refresh').val();
// 应用字体大小
var newsContent = $('#news-content');
newsContent.removeClass('small-font medium-font large-font');
newsContent.addClass(fontSize + '-font');
// 应用主题
$('div[data-role="page"]').attr('data-theme', theme);
$('div[data-role="header"]').attr('data-theme', theme);
$('div[data-role="footer"]').attr('data-theme', theme);
// 保存到本地存储
var settings = {
fontSize: fontSize,
theme: theme,
autoRefresh: autoRefresh
};
localStorage.setItem('appSettings', JSON.stringify(settings));
// 显示保存成功消息
$('<div>').simpledialog2({
mode: 'blank',
headerText: '提示',
headerClose: true,
blankContent:
"<p>设置已保存</p>" +
"<a rel='close' data-role='button' href='#'>确定</a>"
});
}
// 加载设置
function loadSettings() {
var settingsStr = localStorage.getItem('appSettings');
if (settingsStr) {
var settings = JSON.parse(settingsStr);
// 应用设置
$('#font-size').val(settings.fontSize);
$('#theme').val(settings.theme);
$('#auto-refresh').val(settings.autoRefresh).slider('refresh');
// 应用字体大小
var newsContent = $('#news-content');
newsContent.addClass(settings.fontSize + '-font');
// 应用主题
$('div[data-role="page"]').attr('data-theme', settings.theme);
$('div[data-role="header"]').attr('data-theme', settings.theme);
$('div[data-role="footer"]').attr('data-theme', settings.theme);
}
// 加载收藏
var favoritesStr = localStorage.getItem('favoriteNewsIds');
if (favoritesStr) {
favoriteNewsIds = JSON.parse(favoritesStr);
}
}
// 事件处理
$(document).on('pageinit', '#news-list', function() {
renderNewsLists();
});
$(document).on('pageinit', '#favorites', function() {
renderFavoritesList();
});
$(document).on('pageinit', '#settings', function() {
loadSettings();
});
$(document).on('click', '#headline-news a, #tech-news a, #sports-news a, #entertainment-news a, #favorites-list a', function(e) {
e.preventDefault();
var newsId = $(this).data('news-id');
var category = $(this).data('category');
showNewsDetail(newsId, category);
});
$(document).on('click', '#favorite-btn', function(e) {
e.preventDefault();
toggleFavorite();
});
$(document).on('click', '#share-btn', function(e) {
e.preventDefault();
$('<div>').simpledialog2({
mode: 'blank',
headerText: '分享',
headerClose: true,
blankContent:
"<p>分享功能开发中...</p>" +
"<a rel='close' data-role='button' href='#'>确定</a>"
});
});
$(document).on('click', '#comment-btn', function(e) {
e.preventDefault();
$('<div>').simpledialog2({
mode: 'blank',
headerText: '评论',
headerClose: true,
blankContent:
"<p>评论功能开发中...</p>" +
"<a rel='close' data-role='button' href='#'>确定</a>"
});
});
$(document).on('click', '#save-settings', function(e) {
e.preventDefault();
saveSettings();
});
// 添加字体大小样式
$('<style>')
.text('.small-font { font-size: 14px; } .medium-font { font-size: 16px; } .large-font { font-size: 18px; }')
.appendTo('head');
</script>
</body>
</html>

复制代码

这个新闻阅读应用包含以下功能：

• 分类浏览新闻（头条、科技、体育、娱乐）
• 查看新闻详情
• 收藏新闻
• 自定义设置（字体大小、主题等）
• 响应式设计，适应不同屏幕尺寸

10. 高级技巧和最佳实践

10.1 性能优化

<img src="placeholder.jpg" data-src="actual-image.jpg" class="lazy-load">
<script>
$(document).on('pageinit', function() {
// 当页面可见时加载图片
$(document).on('pageshow', function() {
$('.lazy-load').each(function() {
var $img = $(this);
$img.attr('src', $img.data('src')).removeClass('lazy-load');
});
});
});
</script>

复制代码

<a href="next-page.html" data-prefetch>下一页</a>
<div data-role="page" id="home" data-dom-cache="true">
</div>

复制代码

<ul data-role="listview" data-inset="true" data-filter="true" id="long-list">
</ul>
<script>
$(document).on('pageinit', function() {
var listData = []; // 假设这是你的大数据集
var pageSize = 20; // 每页显示的项目数
var currentPage = 0;
function renderListPage() {
var start = currentPage * pageSize;
var end = start + pageSize;
var pageData = listData.slice(start, end);
var html = '';
pageData.forEach(function(item) {
html += '<li><a href="#">' + item.name + '</a></li>';
});
if (currentPage === 0) {
$('#long-list').html(html).listview('refresh');
} else {
$('#long-list').append(html).listview('refresh');
}
}
// 初始加载
renderListPage();
// 滚动到底部时加载更多
$(document).on('scrollstop', function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
currentPage++;
if (currentPage * pageSize < listData.length) {
renderListPage();
}
}
});
});
</script>

复制代码

10.2 与后端API集成

<div data-role="page" id="api-page">
<div data-role="header">
<h1>API数据示例</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="api-data">
<li>加载数据中...</li>
</ul>
</div>
</div>
<script>
$(document).on('pageinit', '#api-page', function() {
// 显示加载指示器
$.mobile.loading('show', {
text: '加载数据中...',
textVisible: true,
theme: 'a',
html: ""
});
// 使用AJAX获取数据
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) {
var html = '';
data.items.forEach(function(item) {
html += '<li><a href="#">' + item.title + '</a></li>';
});
$('#api-data').html(html).listview('refresh');
// 隐藏加载指示器
$.mobile.loading('hide');
},
error: function(xhr, status, error) {
$('#api-data').html('<li>加载数据失败: ' + error + '</li>').listview('refresh');
// 隐藏加载指示器
$.mobile.loading('hide');
}
});
});
</script>

复制代码

<div data-role="page" id="jsonp-page">
<div data-role="header">
<h1>JSONP示例</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="jsonp-data">
<li>加载数据中...</li>
</ul>
</div>
</div>
<script>
$(document).on('pageinit', '#jsonp-page', function() {
// 显示加载指示器
$.mobile.loading('show', {
text: '加载数据中...',
textVisible: true,
theme: 'a',
html: ""
});
// 使用JSONP获取跨域数据
$.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
success: function(data) {
var html = '';
data.items.forEach(function(item) {
html += '<li><a href="#">' + item.title + '</a></li>';
});
$('#jsonp-data').html(html).listview('refresh');
// 隐藏加载指示器
$.mobile.loading('hide');
},
error: function(xhr, status, error) {
$('#jsonp-data').html('<li>加载数据失败: ' + error + '</li>').listview('refresh');
// 隐藏加载指示器
$.mobile.loading('hide');
}
});
});
</script>

复制代码

10.3 本地存储

<div data-role="page" id="storage-page">
<div data-role="header">
<h1>本地存储示例</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="storage-input">输入数据：</label>
<input type="text" name="storage-input" id="storage-input" value="">
</div>
<button type="button" id="save-data" data-theme="b">保存数据</button>
<button type="button" id="load-data" data-theme="c">加载数据</button>
<button type="button" id="clear-data" data-theme="e">清除数据</button>
<div id="storage-result" style="margin-top: 20px;"></div>
</div>
</div>
<script>
$(document).on('pageinit', '#storage-page', function() {
// 保存数据
$('#save-data').on('click', function() {
var data = $('#storage-input').val();
if (data) {
localStorage.setItem('myData', data);
$('#storage-result').html('<p>数据已保存: ' + data + '</p>');
} else {
$('#storage-result').html('<p>请输入要保存的数据</p>');
}
});
// 加载数据
$('#load-data').on('click', function() {
var data = localStorage.getItem('myData');
if (data) {
$('#storage-input').val(data);
$('#storage-result').html('<p>已加载数据: ' + data + '</p>');
} else {
$('#storage-result').html('<p>没有找到保存的数据</p>');
}
});
// 清除数据
$('#clear-data').on('click', function() {
localStorage.removeItem('myData');
$('#storage-input').val('');
$('#storage-result').html('<p>数据已清除</p>');
});
});
</script>

复制代码

<div data-role="page" id="session-storage-page">
<div data-role="header">
<h1>会话存储示例</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="session-input">输入临时数据：</label>
<input type="text" name="session-input" id="session-input" value="">
</div>
<button type="button" id="save-session-data" data-theme="b">保存数据</button>
<button type="button" id="load-session-data" data-theme="c">加载数据</button>
<div id="session-result" style="margin-top: 20px;"></div>
<p style="margin-top: 20px; font-size: 0.9em; color: #777;">
注意：会话存储的数据在浏览器关闭后会自动清除。
</p>
</div>
</div>
<script>
$(document).on('pageinit', '#session-storage-page', function() {
// 保存数据
$('#save-session-data').on('click', function() {
var data = $('#session-input').val();
if (data) {
sessionStorage.setItem('mySessionData', data);
$('#session-result').html('<p>数据已保存: ' + data + '</p>');
} else {
$('#session-result').html('<p>请输入要保存的数据</p>');
}
});
// 加载数据
$('#load-session-data').on('click', function() {
var data = sessionStorage.getItem('mySessionData');
if (data) {
$('#session-input').val(data);
$('#session-result').html('<p>已加载数据: ' + data + '</p>');
} else {
$('#session-result').html('<p>没有找到保存的数据</p>');
}
});
});
</script>

复制代码

10.4 设备API集成

<div data-role="page" id="geolocation-page">
<div data-role="header">
<h1>地理位置示例</h1>
</div>
<div data-role="content">
<button type="button" id="get-location" data-theme="b">获取当前位置</button>
<div id="location-result" style="margin-top: 20px;">
<p>点击按钮获取您的位置信息</p>
</div>
<div id="map-container" style="width: 100%; height: 300px; margin-top: 20px; display: none;">
</div>
</div>
</div>
<script>
$(document).on('pageinit', '#geolocation-page', function() {
$('#get-location').on('click', function() {
if (navigator.geolocation) {
// 显示加载指示器
$.mobile.loading('show', {
text: '获取位置中...',
textVisible: true,
theme: 'a',
html: ""
});
navigator.geolocation.getCurrentPosition(
// 成功回调
function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var resultHtml = '<p><strong>纬度:</strong> ' + latitude + '</p>';
resultHtml += '<p><strong>经度:</strong> ' + longitude + '</p>';
resultHtml += '<p><strong>精确度:</strong> ' + accuracy + ' 米</p>';
$('#location-result').html(resultHtml);
// 显示地图（这里使用静态图片作为示例）
var mapUrl = 'https://maps.googleapis.com/maps/api/staticmap?center=' + latitude + ',' + longitude + '&zoom=15&size=400x300&markers=color:red%7C' + latitude + ',' + longitude;
$('#map-container').html('<img src="' + mapUrl + '" alt="地图" style="width: 100%;">').show();
// 隐藏加载指示器
$.mobile.loading('hide');
},
// 错误回调
function(error) {
var errorMessage = '';
switch(error.code) {
case error.PERMISSION_DENIED:
errorMessage = "用户拒绝了地理位置请求。";
break;
case error.POSITION_UNAVAILABLE:
errorMessage = "位置信息不可用。";
break;
case error.TIMEOUT:
errorMessage = "请求位置信息超时。";
break;
case error.UNKNOWN_ERROR:
errorMessage = "发生未知错误。";
break;
}
$('#location-result').html('<p style="color: red;">错误: ' + errorMessage + '</p>');
// 隐藏加载指示器
$.mobile.loading('hide');
},
// 选项
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 60000
}
);
} else {
$('#location-result').html('<p style="color: red;">您的浏览器不支持地理位置功能。</p>');
}
});
});
</script>

复制代码

<div data-role="page" id="camera-page">
<div data-role="header">
<h1>相机示例</h1>
</div>
<div data-role="content">
<button type="button" id="take-photo" data-theme="b">拍照</button>
<button type="button" id="choose-photo" data-theme="c">从相册选择</button>
<div id="photo-result" style="margin-top: 20px;">
<img id="captured-photo" style="max-width: 100%; display: none;" alt="拍摄的照片">
</div>
</div>
</div>
<script>
$(document).on('pageinit', '#camera-page', function() {
// 拍照
$('#take-photo').on('click', function() {
if (navigator.camera) {
navigator.camera.getPicture(
// 成功回调
function(imageData) {
$('#captured-photo').attr('src', 'data:image/jpeg;base64,' + imageData).show();
},
// 错误回调
function(message) {
alert('拍照失败: ' + message);
},
// 选项
{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 800,
targetHeight: 600
}
);
} else {
alert('您的设备不支持相机功能，或未安装Cordova插件。');
}
});
// 从相册选择
$('#choose-photo').on('click', function() {
if (navigator.camera) {
navigator.camera.getPicture(
// 成功回调
function(imageData) {
$('#captured-photo').attr('src', 'data:image/jpeg;base64,' + imageData).show();
},
// 错误回调
function(message) {
alert('选择照片失败: ' + message);
},
// 选项
{
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 800,
targetHeight: 600
}
);
} else {
alert('您的设备不支持相册功能，或未安装Cordova插件。');
}
});
});
</script>

复制代码

11. 总结与进阶学习

jQuery Mobile是一个强大而灵活的移动应用开发框架，它使开发者能够快速创建跨平台的移动应用。通过本教程，你已经学习了jQuery Mobile的基础知识，包括：

• 基本页面结构和导航
• 各种UI组件的使用
• 表单和数据处理
• 主题和样式定制
• 响应式设计
• 实际项目案例
• 高级技巧和最佳实践

11.1 进阶学习资源

要进一步提高你的jQuery Mobile技能，可以参考以下资源：

1. 官方文档：jQuery Mobile官方网站（https://jquerymobile.com/）提供了最权威和最新的文档、示例和API参考。
2. jQuery Mobile API参考：深入学习jQuery Mobile的各种API和配置选项。
3. jQuery Mobile主题定制：学习如何使用ThemeRoller创建自定义主题。
4. Cordova/PhoneGap集成：了解如何将jQuery Mobile应用打包为原生移动应用。
5. 响应式设计进阶：学习更高级的响应式设计技巧，使你的应用在各种设备上都能完美显示。

官方文档：jQuery Mobile官方网站（https://jquerymobile.com/）提供了最权威和最新的文档、示例和API参考。

jQuery Mobile API参考：深入学习jQuery Mobile的各种API和配置选项。

jQuery Mobile主题定制：学习如何使用ThemeRoller创建自定义主题。

Cordova/PhoneGap集成：了解如何将jQuery Mobile应用打包为原生移动应用。

响应式设计进阶：学习更高级的响应式设计技巧，使你的应用在各种设备上都能完美显示。

11.2 社区和支持

加入jQuery Mobile社区可以获得帮助和支持：

• Stack Overflow：在Stack Overflow上提问和回答jQuery Mobile相关问题。
• jQuery论坛：官方论坛是获取帮助和分享经验的好地方。
• GitHub：jQuery Mobile的GitHub仓库（https://github.com/jquery/jquery-mobile）是报告问题和贡献代码的地方。

11.3 未来发展方向

随着移动技术的发展，jQuery Mobile也在不断演进。关注以下趋势可以帮助你保持竞争力：

1. 性能优化：随着移动设备性能的提升，用户对应用性能的要求也越来越高。学习如何优化jQuery Mobile应用的性能是一个重要方向。
2. 渐进式Web应用（PWA）：将jQuery Mobile应用转变为PWA，可以提供类似原生应用的用户体验。
3. 与现代框架集成：学习如何将jQuery Mobile与React、Vue等现代前端框架结合使用。
4. 无障碍访问：确保你的应用对所有用户都可用，包括那些有视觉、听觉或其他障碍的用户。

性能优化：随着移动设备性能的提升，用户对应用性能的要求也越来越高。学习如何优化jQuery Mobile应用的性能是一个重要方向。

渐进式Web应用（PWA）：将jQuery Mobile应用转变为PWA，可以提供类似原生应用的用户体验。

与现代框架集成：学习如何将jQuery Mobile与React、Vue等现代前端框架结合使用。

无障碍访问：确保你的应用对所有用户都可用，包括那些有视觉、听觉或其他障碍的用户。

通过不断学习和实践，你将从jQuery Mobile新手成长为高手，能够创建出功能强大、用户体验优秀的移动应用。祝你在jQuery Mobile的学习之路上取得成功！

	通知：关于部分勋章领取条件及购买价格调整的通知	05-18 21:22
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！	10-23 09:31

活动公告

零基础学习jQuery Mobile快速入门教程从新手到高手轻松掌握移动应用开发技能打造跨平台响应式网页应用

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

浏览过的版块

塔罗

立华奏

站长推荐 /1

友情链接

Tencent QQ