近年以来,随着移动互联网的迅速发展,智能手机和平板电脑等移动设备的应用日益普及,网页设计和网站开发正在向移动端迁移,在传统的网页设计课程中适时地引入移动网页设计已是势在必行。jQuery Mobile是一套移动应用界面开发框架,它通过网页形式来呈现类似于移动应用的用户界面,旨在创建使智能手机、平板电脑和台式机设备都能访问的响应式移动网站和应用程序。为了满足社会和企业对人才的需求,在网页设计课程中适时引入jQuery Mobile移动网页设计已是势在必行。本书通过大量实例系统地讲述了jQuery Mobile移动网页设计的方法和技巧。本书共分10章,主要内容包括:移动网站开发基础,页面与对话框,按钮与弹出窗口,工具栏与导航栏,网格、表格和列表视图,面板、可折叠块和筛选器,jQuery Mobile表单,jQuery Mobile事件,综合设计实例。
近年来,随着移动互联网的迅速发展,智能手机和平板电脑等移动设备的应用日益普及,网页设计和网站开发正在向移动端迁移,在传统的网页设计课程中适时地引入移动网页设计已是势在必行。由于移动设备屏幕面积小,而且以触摸操作为主,因此移动版网页与PC 桌面版网页有明显的区别,直接使用HTML5、CSS3 和JavaScript 进行移动网站开发存在一定的难度,通常需要引入合适的开发框架作为移动网页设计的基础。jQuery Mobile 是一套基于jQuery 的移动应用界面开发框架,该框架为移动设备在网络传输、页面呈现、用户行为交互等方面都进行了一些特别的优化,可以通过网页形式呈现类似于移动应用的用户界面,旨在创建使智能手机、平板电脑和台式机设备都能访问的响应式移动网站和应用程序;基于jQuery Mobile 开发的移动网站还可以发行为本地移动App,直接运行于Android 或iOS 平台之上。
本书以jQuery Mobile 1.4.5 为蓝本,系统地讲述了jQuery Mobile 移动网页设计的方法和技巧。全书共9 章。第1 章介绍移动网站开发所需要的基础知识,内容包括创建HTML5网页,使用jQuery 简化编程及使用jQuery Mobile 支持移动开发;第2 章介绍页面与对话框,内容包括移动网页结构、页面链接、页面预加载和缓存、对话框页面、页面之间传递参数以及页面加载信息;第3 章讲述按钮与弹出窗口的应用,先讨论如何创建和设置按钮,然后讨论如何创建和应用弹出窗口;第4 章介绍工具栏与导航栏的应用,先讨论如何创建和设置工具栏,然后讨论如何创建和应用导航栏;第5 章讲述网格、表格和列表视图的应用,首先介绍如何创建网格布局,然后讨论如何创建响应式表格,最后详细讲解如何创建和应用列表视图;第6 章讲述面板、可折叠块和筛选器的应用,首先介绍如何创建和应用面板,然后讨论如何创建和应用可折叠块,最后讲解如何创建和应用筛选器;第7 章介绍jQuery Mobile 表单的应用,内容包括表单基础知识,创建文本输入框,单选按钮与复选框,选择菜单以及滑块、范围滑块和翻转开关;第8 章讨论各种类型的jQuery Mobile 事件及其应用,内容包括页面事件、触摸事件、用户操作事件以及虚拟鼠标事件,作为前面各章所讲知识的综合应用;第9 章给出一个综合设计实例,内容包括系统功能设计,系统功能实现以及本地安装包制作。
本书实例中用到的一些人名、电话号码、QQ 号码以及电子邮件地址均属虚构,如有雷同,实属巧合。
本书由赵增敏担任主编。参加本书编写的还有朱粹丹、赵朱曦、余霞、吴洁、姜红梅、卢捷、王庆建、胡婷婷、连静、刘颖、李娴、王亮、段丽霞、彭辉、王永锋、王静、郭宏等。
由于水平所限,书中疏漏和错误之处在所难免,恳请广大读者提出宝贵意见。
赵增敏为河南信息工程学校教授,河南省中等职业教育学科带头人,河南省教育厅学术带头人,长期从事数据库应用开发、Visual Basic/Visual C#可视化编程、HTML网页设计、移动网页设计、JavaScript/jQuery动态网页编程、ASP/PHP/JSP/ASP.NET动态网站开发、Web应用开发等方面的教学与研究,有丰富的计算机教学经验和教材开发编写经验,迄今为止撰写了数十种计算机专著及教材,其中有多本国家规划教材,还有版权输出到台湾出版繁体中文版,被电子工业出版社授予优秀作者称号。
第1 章 移动网站开发基础 .................... 001
1.1 创建HTML5 网页 ................................ 001
1.1.1 用HTML 语言创建内容 .............. 001
1.1.2 用CSS 设置样式 .......................... 005
1.1.3 用JavaScript 实现功能 ................. 007
1.2 使用jQuery 简化编程 .......................... 009
1.2.1 在网页中引用jQuery ................... 010
1.2.2 jQuery 构造函数 ........................... 011
1.2.3 jQuery 选择器 ............................... 013
1.2.4 DOM 操作 ..................................... 021
1.2.5 动画效果 ....................................... 025
1.2.6 事件处理 ....................................... 027
1.2.7 Ajax 应用 ...................................... 031
1.3 使用jQuery Mobile 支持移动设备 ............ 033
1.3.1 jQuery Mobile 功能特点 ............... 033
1.3.2 jQuery Mobile 的平台兼容性 ....... 034
1.3.3 获取jQuery Mobile 框架 .............. 035
1.3.4 配置jQuery Mobile 开发环境 ...... 037
1.3.5 实现jQuery Mobile 移动开发 ...... 037
习题1 ............................................................ 039
上机操作1 ..................................................... 041
第2 章 页面与对话框 .............................. 042
2.1 移动网页结构 ....................................... 042
2.1.1 单页面结构 ................................... 042
2.1.2 多页面结构 ................................... 044
2.2 页面链接 ............................................... 047
2.2.1 Ajax 导航 ...................................... 047
2.2.2 创建后退链接 ............................... 050
2.2.3 设置页面切换动画 ....................... 052
2.3 页面预加载和缓存 ............................... 054
2.3.1 页面预加载 ................................... 054
2.3.2 页面缓存 ....................................... 056
2.4 对话框页面 ........................................... 058
2.4.1 打开对话框 ................................... 058
2.4.2 关闭对话框 ................................... 061
2.4.3 设置对话框切换动画 .................... 063
2.5 页面之间传递参数 ............................... 065
2.5.1 基于HTTP GET 方式传递参数 ... 065
2.5.2 基于Web 存储传递参数 .............. 068
2.6 页面加载信息 ....................................... 070
2.6.1 设置页面加载信息 ........................ 070
2.6.2 设置加载错误信息 ........................ 072
习题2 ............................................................. 074
上机操作2 ..................................................... 075
第3 章 按钮与弹出窗口 ......................... 077
3.1 按钮 ....................................................... 077
3.1.1 创建按钮 ....................................... 077
3.1.2 内联按钮 ....................................... 078
3.1.3 微型按钮 ....................................... 081
3.1.4 禁用按钮 ....................................... 082
3.1.5 组合按钮 ....................................... 084
3.1.6 设置按钮样式 ............................... 087
3.1.7 设置按钮图标 ............................... 088
3.2 弹出窗口 ............................................... 094
3.2.1 创建和显示弹出窗口 .................... 094
3.2.2 关闭弹出窗口 ............................... 095
3.2.3 定位弹出窗口 ............................... 096
3.2.4 设置弹出窗口切换动画 ................ 098
3.2.5 创建带箭头的弹出窗口 ................ 101
VI
3.2.6 设置弹出窗口主题 ....................... 103
3.2.7 跨页使用弹出窗口 ....................... 105
习题3 ............................................................ 107
上机操作3 ..................................................... 108
第4 章 工具栏与导航栏 ......................... 109
4.1 工具栏 ................................................... 109
4.1.1 页眉工具栏 ................................... 109
4.1.2 页脚工具栏 ................................... 112
4.1.3 动态工具栏 ................................... 114
4.1.4 固定工具栏 ................................... 115
4.1.5 全屏工具栏 ................................... 116
4.1.6 外部工具栏 ................................... 118
4.2 导航栏 ................................................... 121
4.2.1 创建导航栏 ................................... 121
4.2.2 设置导航栏主题 ........................... 124
4.2.3 设置导航栏图标 ........................... 126
4.2.4 创建外部导航栏 ........................... 129
习题4 ............................................................ 132
上机操作4 ..................................................... 133
第5 章 网格、表格和列表视图 ........... 134
5.1 网格布局 ............................................... 134
5.1.1 创建基本网格 ............................... 134
5.1.2 创建响应式网格 ........................... 138
5.2 响应式表格 ........................................... 141
5.2.1 创建回流表格 ............................... 141
5.2.2 创建列切换表格 ........................... 144
5.3 列表视图 ............................................... 148
5.3.1 创建只读列表 ............................... 148
5.3.2 创建链接列表 ............................... 150
5.3.3 创建插页列表 ............................... 152
5.3.4 筛选列表内容 ............................... 154
5.3.5 创建分组列表 ............................... 156
5.3.6 设置列表图标 ............................... 158
5.3.7 设置列表文本格式 ....................... 160
5.3.8 设置列表拆分按钮 ....................... 163
5.3.9 设置列表主题 ............................... 165
5.3.10 动态创建列表视图 ..................... 167
习题5 ............................................................ 170
上机操作5 ..................................................... 171
第6 章 面板、可折叠块和筛选器 ....... 172
6.1 面板 ....................................................... 172
6.1.1 创建内部面板 ............................... 172
6.1.2 创建外部面板 ............................... 174
6.1.3 设置面板显示方式 ........................ 177
6.1.4 设置面板关闭方式 ........................ 179
6.2 可折叠块 ............................................... 181
6.2.1 创建可折叠块 ............................... 181
6.2.2 设置可折叠块外观 ........................ 182
6.2.3 设置可折叠块图标 ........................ 183
6.2.4 创建可折叠表单 ........................... 185
6.2.5 创建可折叠块系列 ........................ 186
6.2.6 创建可折叠集合 ........................... 188
6.3 筛选器 ................................................... 191
6.3.1 创建搜索字段 ............................... 191
6.3.2 筛选可折叠集合 ........................... 193
6.3.3 筛选表格 ....................................... 196
6.3.4 筛选控件组 ................................... 197
6.3.5 筛选div 元素 ................................ 200
习题6 ............................................................. 201
上机操作6 ..................................................... 202
第7 章 jQuery Mobile 表单 ................... 204
7.1 表单基础 ............................................... 204
7.1.1 创建表单 ....................................... 204
7.1.2 提交表单 ....................................... 205
7.2 文本输入框与文本区域 ....................... 207
7.2.1 创建文本输入框 ........................... 207
7.2.2 设置文本输入类型 ........................ 209
7.2.3 创建文本区域 ............................... 212
7.3 单选按钮与复选框 ............................... 214
7.3.1 创建单选按钮组 ........................... 214
7.3.2 创建复选框 ................................... 217
7.4 选择菜单 ............................................... 221
7.4.1 创建本机选择菜单 ........................ 221
7.4.2 创建选择菜单控件组 .................... 225
7.4.3 创建自定义菜单 ........................... 228
7.4.4 创建多项选择菜单 .............