[转] jQuery Mobile 简介
作者：C. Enrique Ortiz, 开发人员兼作家, About Mobility Weblog
来源：http://www.ibm.com/developerworks/cn/web/wa-jqmobile/index.html
简介
jQuery Mobile 是一个用户界面（UI）框架，允许您编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。在本文中，了解这个框架的特性，包括基本页面、导航工具栏、表单控件和过渡效果。
要理解本文，您需要：
- HTML 经验
- 理解 JavaScript 基本原理
- jQuery 基础知识
您可以从下面的 下载表 下载本文使用的 jQuery 插件源代码。参考资料 部分包含 jQuery、JavaScript、DOM 和 HTML5 等相关信息。
回页首
jQuery Mobile
jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序。jQuery Mobile 框架构建于 jQuery 内核之上，提供几个功能，包括 HTML 和 XML 文档对象模型（DOM）的操控、处理事件、使用 Ajax 执行服务器通信、以及用于 web 页面的动画和图像效果。这个移动框架本身是独立于 jQuery 内核（缩小或压缩后大约 25KB）的一个额外下载（缩小或压缩后大约 12KB）。与 jQuery 框架的其余部分一样，jQuery Mobile 是一个免费的、双许可（MIT 和 GPL）库。
在本文撰写之时，jQuery Mobile 框架处于 Alpha 2 version (v1.0a2)。代码处于草案阶段，可能会更改。但是，现有的框架非常坚固。鉴于在 alpha 发布中就有一个令人印象深刻的组件集可用，jQuery Mobile 有望成为一个优秀的移动 web 应用程序开发框架和工具集。
jQuery Mobile 的基本特性包括：
- 一般简单性
- 此框架简单易用。页面开发主要使用标记，无需或仅需很少 JavaScript。
- 持续增强和优雅降级
- 尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile 的哲学是同时支持高端和低端设备，比如那些没有 JavaScript 支持的设备，尽量提供最好的体验。
- Accessibility
- jQuery Mobile 在设计时考虑了访问能力，它拥有 Accessible Rich Internet Applications (WAI-ARIA) 支持，以帮助使用辅助技术的残障人士访问 web 页面。
- 小规模
- jQuery Mobile 框架的整体大小比较小，JavaScript 库 12KB，CSS 6KB，还包括一些图标。
- 主题设置
- 此框架还提供一个主题系统，允许您提供自己的应用程序样式。
用于 PhoneGap（使用 web 技术构建独立应用程序，参见 参考资料）这样的工具包时，jQuery Mobile 框架有助于简化您的应用程序开发。
回页首
浏览器支持
我们在移动设备浏览器支持方面取得了长足的进步，但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 的持续增强和优雅降级支持发挥作用的地方。如前所述，jQuery Mobile 同时支持高端和低端设备，比如那些没有 JavaScript 支持的设备 。持续增强（Progressive Enhancement）包含以下核心原则（来源：Wikipedia）：
- 所有浏览器都应该能够访问全部基础内容。
- 所有浏览器都应该能够访问全部基础功能。
- 增强的布局由外部链接的 CSS 提供。
- 增强的行为由外部链接的 JavaScript 提供。
- 终端用户浏览器偏好应受到尊重。
所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。
jQuery Mobile 目前支持以下移动平台：
- Apple® iOS：iPhone、iPod Touch、iPad（所有版本）
- Android™：所有设备（所有版本）
- Blackberry® Torch（版本 6）
- Palm™ WebOS Pre、Pixi
- Nokia® N900（进程中）
查看 jQuery Mobile 站点上的支持浏览器列表了解更多信息（参见 参考资料）。
回页首
UI 组件小结
jQuery Mobile 向不同种类的 UI 元素提供健壮的支持。图 1 显示了目前支持的 UI 组件的一个小结。
图 1. jQuery Mobile UI 元素（至 2010 年 8 月）
![[转] jQuery Mobile 简介_第1张图片](http://img.e-com-net.com/image/info5/a022be11892e4940b666c64715f195e9.jpg)
工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 web 应用程序需要的大部分（如果不是全部的话）UI 元素都已提供。
回页首
$.mobile 与受支持的方法和事件
JavaScript 对象 jQuery 还被引用为 $。jQuery Mobile 框架使用一些移动插件（包括 mobile 或 $.mobile）扩展 jQuery 内核，这些插件定义几个事件和方法。表 1 列示了一些由 $.mobile 公开的方法。
表 1. 由
$.mobile 公开的方法
| 方法 | 用途 |
|---|---|
$.mobile.changePage |
以编程方式从一个页面切换到另一个页面。 例如，要使用一个幻灯片过渡切换到页面 weblog.php，使用 |
$.mobile.pageLoading |
显示或隐藏页面加载消息。 例如，要隐藏消息，使用 |
$.mobile.silentScroll |
滚动到一个特殊的 Y 位置，不生成滚动事件。 例如，要滚动到 Y 位置 100，使用 |
$.mobile.addResolutionBreakpoints |
jQuery Mobile 已经为 min/max 类定义了一些断点。调用这个方法来增加断点。 例如，要为 800 像素宽度添加 |
$.mobile.activePage |
引用当前活动页面。 |
您可以使用 bind() 或 live() 方法绑定几个事件，比如 jQuery Mobile 初始化、触摸事件、方向更改、滚动事件、页面显示/隐藏事件、页面初始化事件、以及动画事件。
例如，触摸事件包括 tap、taphold 和各种滑指（swipe）事件。滚动事件包括 scrollstart 和 scrollstop。页面事件允许接收通知：页面创建之前，页面创建时，页面显示或隐藏之前，以及页面显示或隐藏之时。
清单 1 展示了 jQuery Mobile 开始执行时绑定一个特定事件的示例。
清单 1. 绑定到
mobileinit 事件
$(document).bind("mobileinit", function(){
//apply overrides here
});
|
上面的事件允许您在 jQuery Mobile 启动时覆盖默认值。可以覆盖几个设置，比如：
-
LoadingMessage— 设置页面加载时显示的默认文本。 -
defaultTransition— 设置使用 Ajax 的页面更换的默认过渡。
可以根据需要覆盖更多配置参数。参阅 jQuery Mobile 文档（参见 参考资料）或源代码（参见 下载）了解更多信息。
您还可以绑定到其他事件，那些事件允许您基于 touch 和 page 事件创建动态应用程序。
回页首
HTML5 data-* 属性
jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。表 2 显示如何使用 data-* 属性创建 UI 元素。
表 2. 用于 UI 元素的
data-* 属性
| 元素 | HTML5 data-* 属性 |
|---|---|
| 页眉、页脚工具栏 | <div data-role="header"> <div data-role="footer"> |
| 主体内容 | <div data-role="content"> |
| 按钮 | <a href="index.html" data-role="button" data-icon="info">Button</a> |
| 已编组按钮 | <div data-role="controlgroup"> <a href="index.html" data-role="button">Yes</a> <a href="index.html" data-role="button">No</a> <a href="index.html" data-role="button">Hell Yeah</a> </div> |
| 内联按钮 | <div data-inline="true"> <a href="index.html" data-role="button">Foo</a> <a href="index.html" data-role="button" data-theme="b">Bar</a> </div> |
| 表单元素（选择菜单） | <div data-role="fieldcontain"> <label for="select-options" class="select">Choose an option:</label> <select name="select-options" id="select-options"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option2">Option 3</option> </select> </div> |
| 基本列表视图 | <ul data-role="listview"> <li><a href="index.html">One</a></li> <li><a href="index.html">Two</a></li> <li><a href="index.html">Three</a></li> </ul> |
| 对话框 | <a href="foo.html" data-rel="dialog">Open dialog</a> <a href="dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> |
| 过渡 | <a href="index.html" data-transition="pop" data-back="true"> |
jQuery Mobile 文档包含受支持的 data-* 语法的完整列表。
回页首
jQuery Mobile 页面结构
本节讨论 jQuery Mobile 页面的一般结构。jQuery Mobile 拥有一些页面结构指南。通常，一个页面结构应该拥有以下部分：
- 页面栏
- 通常包含页面标题和 Back 按钮
- 内容
- 您的应用程序的内容
- 页脚栏
- 通常包含导航元素、版权信息、以及需要添加到页脚的任何内容
图 2 展示了这些不同的部分的示例。
图 2. 一个 jQuery Mobile web 应用程序的一般结构
![[转] jQuery Mobile 简介_第2张图片](http://img.e-com-net.com/image/info5/9462b28a0a384b6bb1400263eefe3c8a.jpg)
页眉和页脚工具栏支持固定和全屏定位选项。固定位置使工具栏在滚动时保持静态。全屏定位与固定定位基本相同，只是工具栏仅在单击页面时才显示（以便提供一个不刺眼的全屏体验）。本节余下部分将探索一个通用页面结构的 HTML 代码。
一个 HTML 文档类型本身的定义为 !DOCTYPE html>，这定义一个 HTML5 文档类型。
HTML 页眉部分加载三个重要的 jQuery Mobile 组件：
- jQuery Core 库 — 核心 jQuery 库
- jQuery Mobile 库 — jQuery 框架特定于移动的部分
- jQuery Mobile CSS — 定义核心 jQuery Mobile UI 元素的 CSS，它定义过渡和不同的 UI 小部件，比如滑块和按钮，大量使用 Webkit 变形和动画。
清单 2 显示了 HTML 页面部分。
清单 2. HTML 页眉部分
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
|
HTML 代码的下一个部分定义页面本身；查看 data-role="page" 属性的使用方法。清单 3 展示了一个示例。
清单 3. 定义一个页面块
<body>
<div data-role="page" id="page1">
|
清单 3 定义了一个页面。id 属性仅当多个本地页面块位于同一个 HTML 文件文档上时才需要，这是定义惟一 ID 的一个最佳实践。
下面两个代码清单将展示如何定义页面不同的页眉、内容、以及页脚部分。页眉栏通常包含页面标题和 Back 按钮，如清单 4 所示。
清单 4. 页眉栏部分
<div data-role="header">
<h1>Header Bar</h1>
</div><!-- /header -->
|
在本例中，页眉栏只包含一个 H1 页眉标题文本。页面内容位于页眉下方，如下所示。清单 5 中的示例只显示了一个简单段落，但这是您添加列表、按钮、表单等元素的地方。
清单 5. 页面内容部分
<div data-role="content">
<p>Content Section</p>
</div><!-- /content -->
|
页脚栏通常是您放置导航元素和版权信息的地方，如清单 6 所示。
清单 6. 页脚栏部分
<div data-role="footer">
<h4>Footer Bar</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
|
清单 6 中的页脚部分示例非常简单。向页脚栏添加一个导航栏不太复杂，如清单 7 所示。
清单 7. 向页脚部分添加一个导航栏
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button">Today</a>
<a href="index.html" data-role="button">Tomorrow</a>
<a href="index.html" data-role="button">Week</a>
<a href="index.html" data-role="button">No date</a>
</div>
</div><!-- /footer -->
|
图 3 显示生成的页脚栏部分，其中包含新添加的导航栏。
图 3. 包含导航栏的页脚
![[转] jQuery Mobile 简介_第3张图片](http://img.e-com-net.com/image/info5/7e4d614936a444cbb211ab3609b9490c.jpg)
回页首
定义多个本地页面
前面的示例只涉及一个页面。jQuery Mobile 还支持在一个 HTML 文档中放置多个页面。这些页面是内部链接的本地页面，您可以将它们编为一组，实现预加载目的。多页页面的结构与前面的单页页面示例类似，只是它将包含多个页面数据角色。清单 8 展示了一个示例。
清单 8. 在单个 HTML 文件中定义多个页面
<div data-role="page" id=page1">
<div data-role="header">
:
</div>
<div data-role="content">
:
</div>
<div data-role="footer">
:
</div>
</div>
:
:
<div data-role="page" id=page2">
<div data-role="header">
:
</div>
<div data-role="content">
:
</div>
<div data-role="footer">
:
</div>
</div>
|
引用同一个 HTML 文档中的本地页面时，jQuery Mobile 将自动处理那些引用。引用一个外部页面时，jQuery Mobile 将显示一个加载转盘。如果遇到错误，此框架将自动显示并处理一个错误消息弹出窗口。
回页首
页面过渡
jQuery Mobile 支持基于 CSS 的页面过渡（受到 jQtouch 的启发），页面过渡在导航到一个新页面和返回上一个页面时应用。这些过渡包括：
- 幻灯片
- 提供一个水平过渡
- 向上滑动和向下滑动
- 提供上下屏幕的过渡
- 弹出
- 提供一个爆炸式过渡类型
- 淡出
- 提供一个淡出过渡
- 翻页
- 提供一个翻页过渡
可以以两种方式添加页面过渡：
- 向链接添加一个数据过渡属性，使用
<a href="index.html" data-transition="pop" data-back="true">在静态页面上使用
data-transition。 - 通过编程方式，使用
$.mobile.changePage("pendingtasks.html", "slideup");处理动态页面时使用编程方法。
回页首
列表视图
列表视图是一种基础 UI 元素类型，广泛应用于移动应用程序。jQuery Mobile 支持大量列表视图：基础、嵌套、编号和只读列表；分割按钮；列表分割器；计数泡泡；缩略图；图标；搜索过滤栏；插入式列表；以及主题列表。
清单 9 展示了一个基本列表视图。列表视图通过 <ul data-role="listview"> 数据属性创建。
清单 9. 创建一个简单的列表视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Intro to jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile
/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2
/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Facebook Friends</h1>
</div><!-- /header -->
<div data-role="content">
<p>
<ul data-role="listview" data-inset="true">
<li>
<a href="index.html">Get Friends</a>
</li>
<li>
<a href="index.html">Post to Wall</a>
</li>
<li><a href="index.html">Send Message</a></li>
</ul>
</p>
</div><!-- /content -->
<div data-role="footer">
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
|
在 <ul data-role="listview"/> 中，您定义了一些公共 <li> 列表项目。这个示例完美地展示了 jQuery Mobile 如何扩展基本 HTML 语法。清单 10 中的代码示例的结果如图 4 所示。
图 4. 一个简单的列表视图
![[转] jQuery Mobile 简介_第4张图片](http://img.e-com-net.com/image/info5/a1b54b65da004136a6813da55c9364e9.jpg)
回页首
表单
表单是另一个常用的 web 工件，用于向服务器提交信息。jQuery Mobile 支持许多表单 UI 组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。它们都可以被轻松创建。清单 10 显示了一个表单，该表单带有一个选择菜单和一个提交按钮。
选择菜单由原生 <select name="select-options" id="select-options"> 驱动，但 jQuery Mobile 改进了它的 “观感”。<div data-role="fieldcontain"> 语句组合不同的值以实现可视化目的。表单本身通过原生 <form action="..." method="get"> 定义。
清单 10. 一个表单、选择菜单和提交按钮
<form action="forms-results.php" method="get">
<fieldset>
<div data-role="fieldcontain">
<label for="select-options" class="select">Choose
an option:</label>
<select name="select-options" id="select-options">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option2">Option 3</option>
</select>
</div>
<button type="submit">Submit</button>
</fieldset>
</form>
|
图 5 展示了表单及其内容。
图 5. 带有选择菜单和提交按钮的简单表单
![[转] jQuery Mobile 简介_第5张图片](http://img.e-com-net.com/image/info5/fb2597c23ed047dcb4d820e4f0a7dc3a.jpg)
选择选择菜单时，jQuery Mobile 在图像（图 5 中的右边）上显示一个带有所有选项值的弹出菜单，这个弹出菜单将在选择完成后自动关闭。只要表单的 action 和 method 属性适当定义，jQuery Mobile 就能负责表单、Ajax 调用和结果页面之间的过渡，并在必要时显示一个转盘。
回页首
其他 UI 组件
jQuery Mobile 网站和文档中还有更多 UI 元素和元素变体（参见 参考资料）值得您探索。为补充本文的内容，建议您查看以下内容：可折叠内容、布局网格、主题设置、以及列表视图和表单的剩余部分。
回页首
结束语
本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识，以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档，可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性，但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。
回页首
下载
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| 本文源代码 | jquerymobileexamplecode.zip | 3KB | HTTP |
关于下载方法的信息
参考资料
学习
- 全面了解 jQuery Mobile 框架。
- 探索 jQuery Mobile 文档和演示：文章、APIs 和演示代码。
- 访问所有 jQuery 文档。
- Mobile Graded Browser Support 提供一个 jQuery Mobile 支持的浏览器的矩阵。
- “jQuery Fundamentals”（Rebecca Murphey，2010 年）提供了 jQuery JavaScript 库的一个综合概览。
- jQuery: Plugins/Authoring 展示了如何编写您自己的 jQuery 插件。
- JavaScript Guide 介绍了使用 JavaScript 需要知道的知识。
- Mozilla Developer Network 是面向 web 开发人员的一个不错资源。
- 阅读来自 W3C 规范文档的 What is the Document Object Model?
- JavaScript 教程 DOM objects and methods 涵盖了 W3C DOM 的所有属性、集合和方法。
- 获取一个 WAI-ARIA（Accessible Rich Internet Applications Suite）概述，ARIA 定义了一种方法，使得残障人士能更轻松地访问 web 内容和 web 应用程序。
- 持续增强 是一种 web 设计策略，强调访问能力、语义 HTML 标记、外部样式表和脚本技术。
- “JavaScript 和文档对象模型（DOM）”（developerWorks，2002 年 7 月）检查了 DOM 的 JavaScript 方法，并逐步展示了如何构建一个用户可以添加注释并编辑注释内容的 web 页面。
- 教程 理解 DOM（developerWorks，2007 年 3 月）讲述了一个 DOM 文档的结构。
- 阅读 W3C 的 HTML5 规范。
- developerWorks 的 developerWorks 中国网站 Web 开发专区 专门提供关于各种 Web 解决方案的文章。
- 查看 HTML5 专题，了解更多和 HTML5 相关的知识和动向。
- developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。