当前位置：首页 > news >正文

JavaScript学习教程，从入门到精通，jQuery Mobile 移动页面开发语法知识点及案例代码（42）

news 来源：原创 2025/5/13 18:53:18

jQuery Mobile 移动页面开发语法知识点及案例代码

本文将详细介绍如何使用jQuery Mobile制作移动页面，包括下载和引入jQuery Mobile、创建导航栏、制作图书列表页面和日程安排页面，以及使用选择菜单组件。我们将涵盖相关的语法知识点，并通过详细的案例代码进行说明。

一、jQuery Mobile 简介

jQuery Mobile 是一个基于jQuery的Web框架，用于构建响应式布局的移动应用。它支持触摸事件、动画效果和主题定制，适用于各种移动设备。

1.1 下载 jQuery Mobile

可以通过以下方式下载jQuery Mobile：

CDN 引入：无需下载，直接通过CDN引入。
本地下载：从jQuery Mobile官网下载压缩包并引入本地文件。

1.2 引入 jQuery Mobile

以下是通过CDN引入jQuery Mobile的示例：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>jQuery Mobile 示例</title><!-- 引入jQuery库 --><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><!-- 引入jQuery Mobile CSS --><link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><!-- 引入jQuery Mobile JS --><script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body><!-- 页面内容 -->
</body>
</html>

二、导航栏组件

导航栏用于在页面顶部或底部提供导航链接。

2.1 语法知识点

<div data-role="navbar">：定义导航栏容器。
<ul> 和 <li>：定义导航项。
data-icon：为导航项添加图标。

2.2 案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.min.js"></script><script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style>/* 自定义样式 */.ui-navbar li .ui-btn {font-size: 14px;}</style>
</head>
<body><div data-role="page" id="home"><div data-role="header"><h1>首页</h1><!-- 导航栏 --><div data-role="navbar"><ul><li><a href="#home" data-icon="home">首页</a></li><li><a href="#books" data-icon="book">图书</a></li><li><a href="#schedule" data-icon="calendar">日程</a></li></ul></div></div><div data-role="content"><p>欢迎来到首页！</p></div><div data-role="footer"><h4>页脚内容</h4></div></div><!-- 图书列表页面 --><div data-role="page" id="books"><div data-role="header"><h1>图书列表</h1><div data-role="navbar"><ul><li><a href="#home" data-icon="home">首页</a></li><li><a href="#books" data-icon="book" class="ui-btn-active">图书</a></li><li><a href="#schedule" data-icon="calendar">日程</a></li></ul></div></div><div data-role="content"><ul data-role="listview"><li><a href="#">《活着》</a></li><li><a href="#">《百年孤独》</a></li><li><a href="#">《追风筝的人》</a></li></ul></div><div data-role="footer"><h4>页脚内容</h4></div></div><!-- 日程安排页面 --><div data-role="page" id="schedule"><div data-role="header"><h1>日程安排</h1><div data-role="navbar"><ul><li><a href="#home" data-icon="home">首页</a></li><li><a href="#books" data-icon="book">图书</a></li><li><a href="#schedule" data-icon="calendar" class="ui-btn-active">日程</a></li></ul></div></div><div data-role="content"><ul data-role="listview"><li><a href="#">会议</a></li><li><a href="#">午餐</a></li><li><a href="#">健身</a></li></ul></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

导航栏：在每个页面的<div data-role="header">中包含一个<div data-role="navbar">，其中包含一个<ul>列表，列出导航项。每个导航项通过<a>标签链接到对应的页面ID。
页面结构：每个页面使用<div data-role="page">包裹，包含header、content和footer部分。
样式：通过自定义CSS调整导航栏字体大小。

三、选择菜单组件

选择菜单提供用户选择选项的功能。

3.1 语法知识点

<select> 标签：定义选择菜单。
data-role="select"：应用jQuery Mobile样式。
data-native-menu="false"：使用自定义菜单而非原生菜单。

3.2 案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.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"><label for="book-select">选择一本书：</label><select id="book-select" name="book-select" data-role="select" data-native-menu="false"><option value="none">请选择</option><option value="book1">《活着》</option><option value="book2">《百年孤独》</option><option value="book3">《追风筝的人》</option></select></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

选择菜单：使用<select>标签定义选择菜单，data-role="select"应用jQuery Mobile样式，data-native-menu="false"使用自定义菜单。
选项：每个<option>标签代表一个可选项。

3.3 初始化选择菜单

可以通过JavaScript初始化选择菜单并添加事件监听器。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.min.js"></script><script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>$(document).on('pagecreate', '#home', function() {$('#book-select').on('change', function() {var selected = $(this).val();if (selected !== 'none') {alert('你选择了: ' + selected);}});});</script>
</head>
<body><div data-role="page" id="home"><div data-role="header"><h1>选择菜单</h1></div><div data-role="content"><label for="book-select">选择一本书：</label><select id="book-select" name="book-select" data-role="select" data-native-menu="false"><option value="none">请选择</option><option value="book1">《活着》</option><option value="book2">《百年孤独》</option><option value="book3">《追风筝的人》</option></select></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

事件监听：使用$(document).on('pagecreate', '#home', function() { ... })在页面创建时初始化选择菜单。
事件处理：当选择菜单的值发生变化时，触发change事件，显示一个提示框显示选择的值。

四、制作图书列表页面

4.1 语法知识点

列表视图：使用<ul data-role="listview">定义列表视图。
链接列表项：每个<li>包含一个<a>标签，链接到具体内容。

4.2 案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.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="books"><div data-role="header"><h1>图书列表</h1></div><div data-role="content"><ul data-role="listview"><li><a href="#book1">《活着》</a></li><li><a href="#book2">《百年孤独》</a></li><li><a href="#book3">《追风筝的人》</a></li></ul></div><div data-role="footer"><h4>页脚内容</h4></div></div><!-- 图书详情页面 --><div data-role="page" id="book1"><div data-role="header"><h1>《活着》</h1></div><div data-role="content"><p>《活着》是中国作家余华创作的长篇小说，讲述了主人公福贵在动荡年代中的生活经历。</p></div><div data-role="footer"><h4>页脚内容</h4></div></div><div data-role="page" id="book2"><div data-role="header"><h1>《百年孤独》</h1></div><div data-role="content"><p>《百年孤独》是加西亚·马尔克斯的代表作，描绘了布恩迪亚家族的兴衰史。</p></div><div data-role="footer"><h4>页脚内容</h4></div></div><div data-role="page" id="book3"><div data-role="header"><h1>《追风筝的人》</h1></div><div data-role="content"><p>《追风筝的人》是卡勒德·胡赛尼的处女作，讲述了两个阿富汗少年的友谊和背叛。</p></div><div data-role="footer"><h4>页脚内容</h </div></div>
</body>
</html>

说明：

图书列表：在#books页面中，使用列表视图展示图书名称，每个列表项链接到对应的图书详情页面。
图书详情：每个图书详情页面使用不同的ID（如#book1），并包含图书的描述内容。

五、制作日程安排页面

5.1 语法知识点

列表视图：同样使用<ul data-role="listview">定义列表视图。
链接列表项：每个<li>包含一个<a>标签，链接到具体日程内容。

5.2 案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.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="schedule"><div data-role="header"><h1>日程安排</h1></div><div data-role="content"><ul data-role="listview"><li><a href="#event1">会议</a></li><li><a href="#event2">午餐</a></li><li><a href="#event3">健身</a></li></ul></div><div data-role="footer"><h4>页脚内容</h4></div></div><!-- 日程详情页面 --><div data-role="page" id="event1"><div data-role="header"><h1>会议</h1></div><div data-role="content"><p>今天下午2点召开部门会议，讨论项目进展。</p></div><div data-role="footer"><h4>页脚内容</h4></div></div><div data-role="page" id="event2"><div data-role="header"><h1>午餐</h1></div><div data-role="content"><p>中午12点与同事共进午餐，地点在市中心餐厅。</p></div><div data-role="footer"><h4>页脚内容</h4></div></div><div data-role="page" id="event3"><div data-role="header"><h1>健身</h1></div><div data-role="content"><p>晚上6点去健身房锻炼，保持身体健康。</p></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

日程列表：在#schedule页面中，使用列表视图展示日程安排，每个列表项链接到对应的日程详情页面。
日程详情：每个日程详情页面使用不同的ID（如#event1），并包含日程的描述内容。

六、选择菜单组件的进一步应用

6.1 语法知识点

多选菜单：使用multiple属性实现多选。
分组选项：使用<optgroup>标签对选项进行分组。

6.2 案例代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.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="multi-select"><div data-role="header"><h1>多选菜单</h1></div><div data-role="content"><label for="fruits-select">选择水果：</label><select id="fruits-select" name="fruits-select" multiple data-role="select" data-native-menu="false"><option value="none">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橘子</option><option value="grape">葡萄</option></select></div><div data-role="footer"><h4>页脚内容</h4></div></div><div data-role="page" id="group-select"><div data-role="header"><h1>分组选择菜单</h1></div><div data-role="content"><label for="group-select-menu">选择类别：</label><select id="group-select-menu" name="group-select-menu" data-role="select" data-native-menu="false"><option value="none">请选择</option><optgroup label="水果"><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橘子</option></optgroup><optgroup label="蔬菜"><option value="carrot">胡萝卜</option><option value="lettuce">生菜</option><option value="spinach">菠菜</option></optgroup></select></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

多选菜单：在#multi-select页面中，使用multiple属性实现多选，用户可以选择多个水果。
分组选择菜单：在#group-select页面中，使用<optgroup>标签对选项进行分组，分为“水果”和“蔬菜”两类。

6.3 初始化多选菜单

可以通过JavaScript初始化多选菜单并处理用户的选择。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><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-3.6.0.min.js"></script><script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>$(document).on('pagecreate', '#multi-select', function() {$('#fruits-select').on('change', function() {var selected = $(this).val();if (selected) {alert('你选择了: ' + selected.join(', '));}});});</script>
</head>
<body><div data-role="page" id="multi-select"><div data-role="header"><h1>多选菜单</h1></div><div data-role="content"><label for="fruits-select">选择水果：</label><select id="fruits-select" name="fruits-select" multiple data-role="select" data-native-menu="false"><option value="none">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橘子</option><option value="grape">葡萄</option></select></div><div data-role="footer"><h4>页脚内容</h4></div></div>
</body>
</html>

说明：

事件监听：在#multi-select页面中，监听change事件，当用户选择水果时，显示一个提示框显示选择的值。
多选处理：使用$(this).val()获取选中的值，如果选择了多个选项，val()会返回一个数组，使用join(', ')将数组转换为字符串。

七、总结

本文介绍了如何使用jQuery Mobile制作移动页面，包括导航栏、图书列表页面、日程安排页面以及选择菜单组件。通过详细的语法知识点和案例代码，展示了如何构建一个功能丰富的移动应用。

7.1 关键点回顾

引入jQuery Mobile：通过CDN或本地文件引入jQuery Mobile的CSS和JS文件。
导航栏：使用<div data-role="navbar">定义导航栏，包含导航项。
列表视图：使用<ul data-role="listview">定义列表视图，展示图书列表和日程列表。
选择菜单：使用<select>标签定义选择菜单，data-role="select"应用jQuery Mobile样式，data-native-menu="false"使用自定义菜单。
事件处理：通过JavaScript监听用户的选择事件，并进行相应的处理。