移动Web开发之jQuery Mobile(课堂PPT)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
.
1
J Qu e r y
Mo b I l e简 介
2
jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。 jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。 jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面 插入一堆js来调用命令了，只需定义id即可。
设置界面
.
3
实 例10-2
搭 建 测 试 环 境
18
（5）单击“启动”按钮后，成功 运行测试工具Opera Mobile Emulator，如右图所示。
Opera Mobile Emulator运行效果
.
3
实 例10-2
搭 建 测 试 环 境
19
（1）create：当slider被创建时触发，例如：
.
1
J Qu e r y
Mo b I l e简 介
8
4．jQuery Mobile的基本特点
（1）简明 （2）持续增强和优雅降级
（3）Accessibility
.
1
J Qu e r y
Mo b I l e简 介
9
（4）小规模 （5）主题设置
.
1
J Qu e r y
Mo b I l e简 介
10
1．下载插件
11
（1）登录jQuery Mobile官方网站（http://jquerymobile.com），如下图所示。
jQuery Mobile的官方网站界面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
12
（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。
.
29
5
实 例10-4
使 用 选 择 菜 单
.
30
初始效果
选择年份
.
5
实 例10-4
使 用 选 择 菜 单
31
选择月份
最终结果
.
5
实 例10-4
使 用 选 择 菜 单
32
网上订餐系统执行效果
.
6
综合 实例 网上 订餐 系统
动 态 滑 动 条
.
23
4
实 例10-3
动 态 滑 动 条
.
Βιβλιοθήκη Baidu
24
4
实 例10-3
动 态 滑 动 条
.
25
初始效果
创建了一个滑动条
.
4
实 例10-3
动 态 滑 动 条
26
5
实 例10-4
使 用 选 择 菜 单
.
27
5
实 例10-4
使 用 选 择 菜 单
.
28
5
实 例10-4
使 用 选 择 菜 单
j Q u e r y
M o b I l e 开 发 环 境
14
2．使用URL方式加载插件文件
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
15
（1）登录Opera官方 网站，如右图所示。
Opera官方网站
.
3
实 例10-2
搭 建 测 试 环 境
16
（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是： Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。
获得的可运行文件 （3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运 行，初始运行界面如下图所示，此处选择语言“简体中文”。
选择语言
.
3
实 例10-2
搭 建 测 试 环 境
17
（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置 即可，如下图所示。
jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。 jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
1．jQuery库
.
1
J Qu e r y
Mo b I l e简 介
3
1
J Qu e r y
Mo b I l e简 介
.
4
2．jQuery基础语法
例如：
.
1
J Qu e r y
Mo b I l e简 介
5
10.1.2 jQuery Mobile基础
1．什么是jQuery Mobile？
jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序； jQuery适用于所有流行的智能手机和平板电脑； jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习； 它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。
文件下载页面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
13
（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobilex.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。
解压后的效果
.
实
2
例10-1
搭 建
.
1
J Qu e r y
Mo b I l e简 介
6
2．为什么使用jQuery Mobile？
.
1
J Qu e r y
Mo b I l e简 介
7
3．如何获取jQuery Mobile？
从CDN引用jQuery Mobile（推荐）； 从jQuerymobile.com下载jQuery Mobile库。
jQuery Mobile简介 实例10-1：搭建jQuery Mobile开发环境
实例10-2：搭建测试环境 实例10-3：动态滑动条 实例10-4：使用选择菜单 综合实例：网上订餐系统
.
目 录
1
10.1.1 什么是jQuery
jQuery不但兼容CSS 3，而且还兼容各种浏览器（IE 6.0＋，FF 1.5＋，Safari 2.0＋，Opera 9.0＋），jQuery 2.0及后续版本将不再支持IE 6/7/8浏览器。 jQuery使用户能够更加方便地处理HTMLdocuments、events、实现动画效果，并且方便地 为网站提供Ajax交互。
（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如： （3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：
.
4
实 例10-3
动 态 滑 动 条
20
4
实 例10-3
动 态 滑 动 条
.
21
4
实 例10-3
动 态 滑 动 条
.
22
4
实 例10-3
1
J Qu e r y
Mo b I l e简 介
2
jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。 jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。 jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面 插入一堆js来调用命令了，只需定义id即可。
设置界面
.
3
实 例10-2
搭 建 测 试 环 境
18
（5）单击“启动”按钮后，成功 运行测试工具Opera Mobile Emulator，如右图所示。
Opera Mobile Emulator运行效果
.
3
实 例10-2
搭 建 测 试 环 境
19
（1）create：当slider被创建时触发，例如：
.
1
J Qu e r y
Mo b I l e简 介
8
4．jQuery Mobile的基本特点
（1）简明 （2）持续增强和优雅降级
（3）Accessibility
.
1
J Qu e r y
Mo b I l e简 介
9
（4）小规模 （5）主题设置
.
1
J Qu e r y
Mo b I l e简 介
10
1．下载插件
11
（1）登录jQuery Mobile官方网站（http://jquerymobile.com），如下图所示。
jQuery Mobile的官方网站界面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
12
（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。
.
29
5
实 例10-4
使 用 选 择 菜 单
.
30
初始效果
选择年份
.
5
实 例10-4
使 用 选 择 菜 单
31
选择月份
最终结果
.
5
实 例10-4
使 用 选 择 菜 单
32
网上订餐系统执行效果
.
6
综合 实例 网上 订餐 系统
动 态 滑 动 条
.
23
4
实 例10-3
动 态 滑 动 条
.
Βιβλιοθήκη Baidu
24
4
实 例10-3
动 态 滑 动 条
.
25
初始效果
创建了一个滑动条
.
4
实 例10-3
动 态 滑 动 条
26
5
实 例10-4
使 用 选 择 菜 单
.
27
5
实 例10-4
使 用 选 择 菜 单
.
28
5
实 例10-4
使 用 选 择 菜 单
j Q u e r y
M o b I l e 开 发 环 境
14
2．使用URL方式加载插件文件
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
15
（1）登录Opera官方 网站，如右图所示。
Opera官方网站
.
3
实 例10-2
搭 建 测 试 环 境
16
（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是： Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。
获得的可运行文件 （3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运 行，初始运行界面如下图所示，此处选择语言“简体中文”。
选择语言
.
3
实 例10-2
搭 建 测 试 环 境
17
（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置 即可，如下图所示。
jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。 jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
1．jQuery库
.
1
J Qu e r y
Mo b I l e简 介
3
1
J Qu e r y
Mo b I l e简 介
.
4
2．jQuery基础语法
例如：
.
1
J Qu e r y
Mo b I l e简 介
5
10.1.2 jQuery Mobile基础
1．什么是jQuery Mobile？
jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序； jQuery适用于所有流行的智能手机和平板电脑； jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习； 它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。
文件下载页面
.
实
2
例10-1
搭 建
j Q u e r y
M o b I l e 开 发 环 境
13
（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobilex.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。
解压后的效果
.
实
2
例10-1
搭 建
.
1
J Qu e r y
Mo b I l e简 介
6
2．为什么使用jQuery Mobile？
.
1
J Qu e r y
Mo b I l e简 介
7
3．如何获取jQuery Mobile？
从CDN引用jQuery Mobile（推荐）； 从jQuerymobile.com下载jQuery Mobile库。
jQuery Mobile简介 实例10-1：搭建jQuery Mobile开发环境
实例10-2：搭建测试环境 实例10-3：动态滑动条 实例10-4：使用选择菜单 综合实例：网上订餐系统
.
目 录
1
10.1.1 什么是jQuery
jQuery不但兼容CSS 3，而且还兼容各种浏览器（IE 6.0＋，FF 1.5＋，Safari 2.0＋，Opera 9.0＋），jQuery 2.0及后续版本将不再支持IE 6/7/8浏览器。 jQuery使用户能够更加方便地处理HTMLdocuments、events、实现动画效果，并且方便地 为网站提供Ajax交互。
（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如： （3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：
.
4
实 例10-3
动 态 滑 动 条
20
4
实 例10-3
动 态 滑 动 条
.
21
4
实 例10-3
动 态 滑 动 条
.
22
4
实 例10-3