摘要

JQuery Mobile是针对智能手机和平板电脑创建的移动Web App开发框架，它的出现填补了JQuery在移动设备应用上的缺憾，jQuery Mobile使用了极少的HTML5、CSS3、javaScript和Ajax脚本就可以完成页面的渲染，秉承了jQuery“写更少的代码，做更多的事情”理念：他可以通过一个灵活、简单的方式来布局网页，并且兼容所有的移动设备。

本文对JQuery Mobile各个知识点和使用方法做了简要描述，并使用JQuery Mobile实现了一个简单的Web App实例。

关键字：JQuery Mobile。

文章组织结构

一．JQuery Mobile简介

二．JQuery Mobile基础

三．JQuery Mobile使用实例

四．总结

一、JQuery Mobile简介

今天，JQuery驱动着互联网上的大量网站，在浏览器中提供动态的用户体验，这促使传统的桌面应用程序越来越少。现在，主流的移动平台的浏览器功能都赶上了PC端桌面浏览器，因此JQuery团队引入了JQuery Mobile。

与JQuery核心库一样，您的开发基本上不需要安装任何的东西；只需要将JQuery Mobile依赖的*.js和*.css文件直接包含到web页面中即可。

JQuery Mobile有以下特性：

1、JQuery Mobile基本框架整体比较小，js和css总共只有30k左右。

2、JQuery Mobile使用起来很简单，页面开发主要使用标记。

3、优雅降级：这也是JQuery Mobile最吸引人的一个地方，JQuery Mobile利用的是最新的HTML5和CSS3和JS，但是并不是所有的移动设备都提供了这样的支持。JQuery Mobile的哲学是同时支持高端和低端设备，只是在低端设备和是哪个显示的效果会略差一些。

4、主题系统，JQuery Mobile提供了一套主题系统，允许开发人员运用自己的主题样式。

5、无障碍，JQuery Mobile在综合考虑了Web App访问者的访问能力，提供了WAI-ARIA支持，以支持残障人士使用辅助技术访问web页面。

二、JQuery Mobile基础

1、页面结构及页面切换效果

JQuery Mobile中的一个页面由header、content、footer三部分组成，通过data-role=“page”定义一个页面。这也就是说Query Mobile在一个页面中可以添加多个页面，这意味着浏览器只需要加载一个页面，就可以实现页面平滑切换的用户体验。

基本的JQuery Mobile Web App都应当遵循下面的基本模板：

在上面的基本页面结构中，“header”、“content”、“footer”在页面中通常的使用方式如下：

用于放置标题和按钮（典型的就是放置一个“返回”按钮）

内容（文本、图像、按钮、列表、表单等）

页面底部建立工具栏，添加一些功能按钮。

JQuery Mobile中可以使用多种不同的切换效果来显示新页面的内容，只需要在超链接里添加data-transition属性即可。目前JQuery Mobile支持的页面切换效果有以下几种：

slide

从右到左切换（默认）

sildeup

从下到上切换

slidedown

从上到下切换

pop

已弹出的形式打开一个页面

fade

渐变褪色的方式切换

flip

旧页面翻转飞出，新页面飞入

none

无过渡效果

flow

抛出当前页，进入下一页

sidefade

从右向左滑动并淡入到下一页

turn

转向下一页

2、文本

为了使用灵活，JQuery Mobile使普通HTML内容更加独立，文本内容的可读性更强。

1)可折叠文本内容：

2)格式化文本：

使用span标签添加class=“ui-li-count”，可在列表右侧生成计数器。使用元素突出显示内容，

元素用于减弱列表项中显示的内容，显示补充信息可在

元素中添加class="ui-li-aside"

3)面板

JQuery Mobile的面板会在屏幕的左侧向右划出，用data-role=“panel”定义面板，用data-display=“push、overlay、reveal”来控制展示方式。关闭面板方式：data-dismissible=“true”，点击外部区域关闭，data-swipe-close=“true”,通过滑动关闭。

3、按钮

JQuery Mobile中通过给a、button或者input元素添加样式（或者增加data-role=”button”）,便可以创建按钮。

按钮时触摸式应用程序的重要部分，JQuery Mobile提供了以下默认的按钮样式可供使用，当然开发人员也可以根据自己的需求定义自己满意的样式。

ui-corner-all

圆角

ui-shadow

阴影

ui-btn-inline

并排显示

ui-btn-a

主题a按钮样式

ui-btn-b

主题b按钮样式

4、列表

列表是JQuery Mobile比较突出的一个特性，JQuery Mobile使得标准的无序或有序列表在页面中应用得更加广泛，使用方法是在ul或ol标签中添加属性。

JQuery Mobile中的列表可分为如下几类：

1)简单列表

2)超链接列表

3)嵌套列表

4)分割列表

5)过滤列表

6)气泡列表

7)缩略图、图标列表

5、导航栏

导航栏是由一组水平排列的链接构成，通常位于页眉或页脚内部。JQuery Mobile的导航栏中的链接会自动转换为按钮。

值得注意的是，JQuery Mobile导航导航个数超过5个会自动按每行2个导航换行显示，

6、网格

JQuery Mobile提供了一套基于CSS的分列布局，但是由于移动设备上特别是手机屏幕宽度狭窄，所以一般不建议使用。

JQuery Mobile中由五种网格布局可以使用：

ui-grid-solo

1列

对应ui-block-a

ui-grid-a

2列

对应ui-block-a|b

ui-grid-b

3列

对应ui-block-a|b|c

ui-grid-c

4列

对应ui-block-a|b|c|d

ui-grid-d

5列

对应ui-block-a|b|c|d|e

7、对话框

上面JQuery Mobile中通过为a标签添加data-rel=”dialog”或者data-dialog=”true”属性便可以将连接页面以弹出框的形式展示。

8、表单

JQuery Mobile使用表单是直接按原生的方法使用即可。

JQuery Mobile有很强的表单自适应能力：ui-field-contain，宽屏幕左右显示（480px以上），窄屏幕上下显示（480以下）

表单中的单选和复选提供了横向和竖向(默认)的两种类型，只需设置data-type="horizontal"。翻转开关和滑动器以及下拉框还提供了mini版样式只需设置data-mini="true"并且设置data-inline="true"。

9、表格

JQuery Mobile提供了两种模式的响应式表格。

1)回流表格模式(data-mode="reflow")：宽屏显示普通表格列，窄屏会变成表单式表格。

2)列切换模式（data-mode="columntoggle"）：列切换模式会在宽度不够时隐藏数据，添加data-priority=“1”属性来设置隐藏列的顺序，按优先级1(最高)-6(最低)，从低到高隐藏。

7、主题

JQuery Mobile提供了2种不同的主题样式，从“a”到“b”-每一种主题的按钮，工具条，内容块等等颜色都不一样，没个主题的视觉效果也不一样。其中a主题是灰色背景黑色文字，b主题为黑背景白色文字，通过data-theme属性可以自定义主题：按钮

添加新主题：

通过修改CSS文件来添加或编辑新主题，只需要拷贝样式模板，然后重命名字母类名（c-z），并在样式中添加你需要的颜色和字体即可。同时也可以为主题添加新样式，如按钮添加类：ui-btn-(a-z).页面添加ui-page-theme-(a-z).

8、事件

JQuery Mobile中的事件必须使用on()方法来绑定。

事件分为五类：

1) Page Initialization（页面初始化事件，这些事件只在页面加载时执行一次）

pagebeforecreate

页面创建前

pagecreate

当页面创建时

2) Page Load/Unload

pagebeforeload

当外部页面加载时

pagecontainerload

页面成功载入并插入DOM后触发

3) page Transition：在页面过度之前和之后（每次都会触发），

pagebeforeshow

过渡动画开始前去的页面触发

pageshow

去的页面一开始加载/过渡动画完成之后

pagebeforehide

过渡动画开始前来的页面触发

pagehide

过渡动画完成后来的页面触发

4) page Change：

pagebeforechange

页面切换前触发的事件

pagechange

页面切换时触发的事件

pagechangefailed

页面切换失败触发的事件

5)其他事件：

swiper

水平滑动

swipeleft

左滑动

swiperight

右滑动

tap

点击

taphold

长按

scrollstart

页面滚动开始触发事件

scrollstop

页面滚动结束触发事件

orientationchange

屏幕方向改变时触发

三、JQuery Mobile使用实例

上面简单介绍了JQuery Mobile的基本用法，下面将以具体例子实现一个简单Web App。示例是以调用restAPI的方式获取Web端数据的一个云计算portal简单Web App。

1、创建一个html网页instance.html,导入jquery和jquery.mobile.依赖。并创建主页面index和详情页面Detai基本结构。

2、为主页面index添加主题选择、按关键字查询的搜索框、导航栏以及ajax加载数据后显示的列表。

3、detail页面添加对虚机的详情描述信息以及开关机等按钮。

4、绑定主题选择事件

5、在页面创建时加载数据

6、绑定搜索，详情按钮、开关机按钮事件

7、绑定事件搜索和开关机按钮事件

7、编写ajax获取个人实例数据

8、获取detail信息

8、获取detail数据

9、开机

9、开机

10、关机

四．总结

随着移动设备的普及，移动端设备越来越高端，移动端的浏览器也越来越接近甚至超越PC端浏览器的性能，Web App也随着兴起，相较于原生App来说Web App使用W3C标准的HTML语言开发，能够轻松的实现跨平台，移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题，原生App能实现的一些特殊功能如：本地数据存储、音频播放、调用照相机等现在Web App也同样可以实现。在开发时间方面Web App的迭代周期要远远短于原生App，并且用户不需要频繁的重新下载或升级。从用户体验方面来说Web App既有Web的特性同时又有原生App的特性，Web App与传统互联网是互联的，从一个Web App可以直接跳转到另一个Web App。

JQuery Mobile便是为主流的移动平台提供的一个JQuery核心类库，同JQuery一样，JQuery Mobile是一个免费开源的项目，受到越来越多的开发人员的关注，它有着丰富的界面样式、强大的自适应能力、各种移动设备上可触发的事件，并且JQuery Mobile同时可支持高端和低端设备。

本文通过对JQuery Mobile的各个知识点的具体使用分析并且提供了一个完整的案例。相信对于即将使用JQuery Mobile开发Web App的开发人员有一定的帮助。

个人简介：

刘小兵

软件开发工程师

任职于某大型IT外资企业，主要从事JavaEE开发。