jQuery Mobile开发指南pdf

jQuery Mobile开发指南 内容简介

jQuery Mobile是一套基于jQuery的移动应用界面开发框架。《jQuery Mobile开发指南》将为你系统讲述使用该框架开发Web移动应用的方法，包括框架构成、页面、对话框、弹出页面、触控交互、按钮、工具栏、列表视图、表单，以及页面响应式布局设计、主题风格美化、事件响应与其他一些高级而实用的技巧。

《jQuery Mobile开发指南》既适合开发人员、测试人员和产品经理使用，也适合作为大中专院校相关专业师生的学习用书与培训教材。

jQuery Mobile开发指南 目录

第1章　jQuery Mobile概述

1．1　Web移动应用还是本机应用

1．2　移动平台兼容性

1．3　为何选择 jQuery Mobile

1．4　其他流行的Web移动应用开发框架

1．5　jQuery Mobile许可协议

1．6　受限的应用场景

第2章　框架初探

2．1　jQuery Mobile与HTML5

2．1．1　HTML5的演化

2．1．2　HTML5新特性

2．1．3　jQuery Mobile应用中经常用到的新特性

2．2　下载jQuery Mobile

2．3　第一个程序

2．3．1　开发前的准备

2．3．2　Hello World！

2．4　发布应用

2．4．1　安装IIS

2．4．2　通过IIS发布Web移动应用

2．5　移动设备模拟器

2．5．1　安装Android模拟器

2．5．2　创建Android模拟器

2．5．3　使用Android模拟器

2．6　jQuery Mobile开发工具

第3章　页面与对话框

3．1　单页模板与多页模板

3．2　页面标题

3．3　页面链接

3．4　建立和关闭对话框

3．5　切换方式

第4章　页面高级话题

4．1　初始化

4．2　通过预取和缓存改善页面访问速度

4．3　命名锚记

4．3．1　在单页模板中实现命名锚记

4．3．2　在多页模板中实现命名锚记

4．4　页面间参数传递

4．4．1　通过JavaScript实现参数传递

4．4．2　通过HTML5 Web Storage特性实现参数传递

4．5　加载消息

4．5．1　自定义加载消息

4．5．2　通过JavaScript管理加载消息

4．6　离线应用

4．6．1　配置Web服务器以支持离线应用

4．6．2　开发与集成离线应用

第5章　弹出页面

5．1　基本的弹出页面

5．2　不同的弹出效果

5．2．1　菜单与嵌套菜单

5．2．2　表单

5．2．3　对话框

5．3　弹出页面的高级功能

5．3．1　图片

5．3．2　视频

5．3．3　地图

5．3．4　覆盖面板

5．4　定制弹出页面样式

5．4．1　设定弹出页面的位置

5．4．2　动画切换效果

5．4．3　弹出页面主题

5．4．4　关闭按钮

5．5　属性、选项、方法和事件

5．5．1　属性

5．5．2　选项

5．5．3　方法

5．5．4　事件

第6章　触控交互

6．1　触控事件

6．1．1　轻击与按住

6．1．2　轻扫

6．2　虚拟鼠标事件

第7章　按钮

7．1　基本概念

7．2　内联按钮

7．3　按钮图标

7．3．1　按钮图标样式

7．3．2　按钮图标位置

7．4　mini按钮

7．5　按钮组

7．6　按钮属性、选项、方法与事件

7．6．1　属性

7．6．2　选项

7．6．3　方法和事件

7．7　自定义按钮

7．7．1　自定义按钮图标

7．7．2　文字折行显示

第8章　工具栏

8．1　工具栏显示模式

8．2　页眉和页脚工具栏

8．3　导航工具栏

8．4　固定工具栏属性、选项、方法和事件

8．4．1　属性

8．4．2　选项

8．4．3　方法和事件

8．5　高级开发技巧

8．5．1　自定义图标导航工具栏

8．5．2　定制风格导航工具栏

第9章　列表视图

9．1　基本概念

9．2　嵌套列表

9．3　分类列表

9．4　数字列表

9．5　分立按钮列表

9．6　缩略图与图标列表

9．7　气泡提示

9．8　只读列表

9．9　过滤列表内容

9．10　插页列表

9．11　折叠列表

9．12　自动分类列表视图

9．13　使用列表美化表单布局

9．14　美化列表内容

9．15　列表视图属性、选项、方法和事件

9．15．1　属性

9．15．2　选项

9．15．3　方法和事件

9．16　高级编程技巧

9．16．1　移除各列表条目间的分隔线

9．16．2　列表视图触控操作

9．16．3　动态加载列表视图

第10章　表单

10．1　表单样式

10．2　输入框

10．2．1　属性与选项

10．2．2　方法与事件

10．3　单选按钮

10．3．1　属性与选项

10．3．2　方法与事件

10．4　复选框

10．5　滑块

10．5．1　属性与选项

10．5．2　方法与事件

10．6　开关按钮

10．7　选择菜单

10．7．1　分组显示菜单项

10．7．2　垂直分组与水平分组

10．7．3　禁用某个菜单项

10．7．4　多选菜单

10．7．5　属性与选项

10．7．6　方法与事件

10．8　禁用表单元素

10．9　隐藏标签

10．10　mini尺寸的表单样式

10．11　高级开发技术

10．11．1　表单验证

10．11．2　文件上传

第11章　页面布局与呈现

11．1　适应不同的分辨率

11．1．1　视口

11．1．2　媒体查询

11．1．3　背景图片进阶

11．2　改变屏幕方向

11．3　分栏布局

11．4　可折叠内容块

11．4．1　嵌套可折叠内容块

11．4．2　属性

11．4．3　选项

11．4．4　事件

11．5　折叠组

第12章　响应式设计

12．1　基于jQuery Mobile实现响应式设计

12．2　分栏技术

12．3　回流表格

12．4　字段切换表格

12．5　滑动面板

12．6　支持触控操作的滑动面板

第13章　主题风格美化

13．1　主题与色版

13．2　内置色版

13．3　通过ThemeRoller自定义主题

13．3．1　ThemeRoller的基本概念

13．3．2　编辑全局设置与色版

13．3．3　导入、下载和分享自定义色版

13．4　高级开发技术

附录A　JavaScript测试自动化

jQuery Mobile开发指南 精彩文摘

jQuery Mobile是一套基于jQuery的移动应用界面开发框架，以网页的形式呈现类似于移动应用的界面。当用户使用智能手机或平板电脑，通过浏览器访问基于jQuery Mobile开发的移动应用网站时，将获得与本机应用接近的用户体验。用户不需要在本机安装额外的应用程序，直接通过浏览器就可以打开这样的移动应用。

在这一章中，我们将会了解到：

jQuery Mobile的基本概念；

应用jQuery Mobile的Web站点；

Web移动应用和本机应用的差异，以及Web移动应用的优势；

jQuery、jQuery Mobile和jQuery UI之间的关系；

jQuery Mobile对于不同移动设备的支持情况；

其他流行的Web移动应用开发框架；

jQuery Mobile许可协议；

受限的应用场景。

jQuery Mobile是基于jQuery JavaScript库和HTML5发展而成的移动应用用户界面系统。基于jQuery Mobile开发的移动应用，体积轻量，用户体验与界面风格统一，并兼容大量移动平台。在前端页面的呈现方面，jQuery Mobile实现了界面美化和对移动设备浏览器的兼容。在大多数开发场景下，jQuery Mobile应用开发不需要过多关心jQuery JavaScript库的实现方式，只需要在页面中引用合适的jQuery版本就可以了。

在jQuery Mobile出现之前，jQuery已经发展了很多年。jQuery于2006年发布了第一个版本，现在它已成为最受欢迎的JavaScript库。在全球访问量最高的10万个网站中，使用jQuery的网站高达52%。

另一个广泛流行的jQuery JavaScript用户开发框架是jQuery UI。jQuery Mobile与jQuery UI的定位不同：前者用于开发移动应用，后者常用于开发桌面Web应用。它们的共同之处在于它们都是基于jQuery JavaScript库实现的用户界面系统。

简单来说，jQuery Mobile应用就是一个Web移动应用。所不同的是，jQuery Mobile应用为移动设备在网络传输、页面呈现、用户行为交互等领域进行了特别的优化。在使用jQuery Mobile开发的移动应用中，业务逻辑通常主要通过Web服务器进行处理，而不是基于移动设备浏览器中的jQuery Mobile页面来实现。在这样的应用中，HTML和CSS负责前端界面呈现，业务逻辑处理交予后台的Web服务器程序（可能是PHP、Python、JSP或者ASP.NET程序）。这些语言都可以用来开发jQuery Mobile的服务器端，这与其他网站开发是一样的。当讨论jQuery Mobile的时候，大多数情况下是关于如何使用jQuery Mobile开发适用于移动应用环境下的用户界面。

在当前的开源社区中，很多开源软件开发者基于jQuery Mobile贡献了许多有价值的插件。基于这些插件，移动应用开发者将可以快速、低成本而高质量地开发适用于多种移动设备的应用。

1.1　Web移动应用还是本机应用

在进行移动应用技术方案选型的时候，首先要选择的是使用Web移动应用还是使用本机应用来实现开发需求。两种方案各有利弊，适用场景也有一些差异。

Web移动应用的优势在于，通过标准的HTML5语言以及浏览器支持能力，可以低成本地开发兼容性良好、跨移动平台的应用。在应用的部署过程中，可以不用依赖于电子市场或其他渠道商进行安装包版本检验和更新分发。和Web网站一样，Web移动应用更新或者重新部署到Web服务器之后，用户使用手机再打开这个网站，手机中的应用也就实现了同时更新。Web移动应用同样可以基于HTML5语言保存一定的用户本地数据，这样可以改善移动应用的运行速度。此外，Web移动应用不需要占用移动设备有限的存储空间。对于地理位置定位等应用，很多移动设备浏览器在支持HTML5语言的时候，也提供了相应的支持。这也为Web移动应用支持更多应用场景提供了便利。

Web移动应用在开发和运维过程中，会受到一定限制。假如移动网络速度比较慢或网络连接不够稳定，则Web移动应用的用户打开应用页面的速度会变慢，移动网络覆盖不到的地方则不能打开Web移动应用界面。此外，运行Web移动应用还可能产生网络流量费用。由于Web移动应用通过浏览器呈现界面并与用户交互，所以如果所应用的场景需要开发额外的手机底层应用，例如某种特定格式的视频播放器，则可能会受到限制。

传统的本机应用会在执行效率、使用过程成本和一些需要与硬件资源交互的环境下表现出明显的优势。不足之处在于，安装和部署成本高，推广会受到电子市场排行的影响、移动设备内存空间的限制，需要考虑到应用程序与移动设备的兼容性等。

相比之下，Web移动应用可以胜任大多数移动平台开发需求，包括内容订阅与分发、移动办公、远程监控、电子游戏和娱乐等。特别是在很多细分市场下，Web移动应用将非常具有优势，例如移动阅读。