本文提供一个 jQuery Mobile 框架简介。了解该框架的基础知识， 以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。一个示例将引导您通过一些基本页面、导航、工具栏、列表视图、表单控件和过渡效果。
C. Enrique Ortiz, 开发人员兼作家, About Mobility Weblog
2012 年 2 月 02 日
-
内容
简介
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，还包括一些图标。 主题设置
此框架还提供一个主题系统，允许您提供自己的应用程序样式。
参考资料）这样的工具包时，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（进程中）
参考资料）。
回页首
UI 组件小结
jQuery Mobile 向不同种类的 UI 元素提供健壮的支持。图 1 显示了目前支持的 UI 组件的一个小结。
图 1. jQuery Mobile UI 元素（至 2010 年 8 月）
工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 web 应用程序需要的大部分（如果不是全部的话）UI 元素都已提供。
回页首
$.mobile 与受支持的方法和事件
jQuery 还被引用为 $。jQuery Mobile 框架使用一些移动插件（包括 mobile 或 $.mobile）扩展 jQuery 内核，这些插件定义几个事件和方法。表 1 列示了一些由 $.mobile 公开的方法。
$.mobile 公开的方法
方法 | 用途 |
|
|
|
|
|
|
| |
| 引用当前活动页面。 |
bind() 或 live() 方法绑定几个事件，比如 jQuery Mobile 初始化、触摸事件、方向更改、滚动事件、页面显示/隐藏事件、页面初始化事件、以及动画事件。tap、taphold 和各种滑指（swipe）事件。滚动事件包括 scrollstart 和 scrollstop。页面事件允许接收通知：页面创建之前，页面创建时，页面显示或隐藏之前，以及页面显示或隐藏之时。
清单 1 展示了 jQuery Mobile 开始执行时绑定一个特定事件的示例。
mobileinit 事件
$(document).bind("mobileinit", function(){
//apply overrides here
});
上面的事件允许您在 jQuery Mobile 启动时覆盖默认值。可以覆盖几个设置，比如：
LoadingMessage
- — 设置页面加载时显示的默认文本。
defaultTransition
- — 设置使用 Ajax 的页面更换的默认过渡。
参考资料）或源代码（参见 下载）了解更多信息。
touch 和 page 事件创建动态应用程序。
回页首
data-* 属性
data-* 属性来支持各种 UI 元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。表 2 显示如何使用data-* 属性创建 UI 元素。
data-* 属性
元素 | HTML5 data-* 属性 |
页眉、页脚工具栏 | |
主体内容 | |
按钮 | |
已编组按钮 |
|
内联按钮 |
|
表单元素（选择菜单） |
|
基本列表视图 |
|
对话框 | Open dialog |
过渡 |
data-* 语法的完整列表。
回页首
jQuery Mobile 页面结构
本节讨论 jQuery Mobile 页面的一般结构。jQuery Mobile 拥有一些页面结构指南。通常，一个页面结构应该拥有以下部分：
页面栏
通常包含页面标题和 Back 按钮 内容
您的应用程序的内容 页脚栏
通常包含导航元素、版权信息、以及需要添加到页脚的任何内容
图 2 展示了这些不同的部分的示例。
图 2. 一个 jQuery Mobile web 应用程序的一般结构
页眉和页脚工具栏支持固定和全屏定位选项。固定位置使工具栏在滚动时保持静态。全屏定位与固定定位基本相同，只是工具栏仅在单击页面时才显示（以便提供一个不刺眼的全屏体验）。本节余下部分将探索一个通用页面结构的 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 页眉部分
data-role="page" 属性的使用方法。清单 3 展示了一个示例。
清单 3. 定义一个页面块
id 属性仅当多个本地页面块位于同一个 HTML 文件文档上时才需要，这是定义惟一 ID 的一个最佳实践。
下面两个代码清单将展示如何定义页面不同的页眉、内容、以及页脚部分。页眉栏通常包含页面标题和 Back 按钮，如清单 4 所示。
清单 4. 页眉栏部分
Header Bar
在本例中，页眉栏只包含一个 H1 页眉标题文本。页面内容位于页眉下方，如下所示。清单 5 中的示例只显示了一个简单段落，但这是您添加列表、按钮、表单等元素的地方。
清单 5. 页面内容部分
Content Section
页脚栏通常是您放置导航元素和版权信息的地方，如清单 6 所示。
清单 6. 页脚栏部分
Footer Bar
清单 6 中的页脚部分示例非常简单。向页脚栏添加一个导航栏不太复杂，如清单 7 所示。
清单 7. 向页脚部分添加一个导航栏
Today Tomorrow Week No date
图 3 显示生成的页脚栏部分，其中包含新添加的导航栏。
图 3. 包含导航栏的页脚
回页首
定义多个本地页面
前面的示例只涉及一个页面。jQuery Mobile 还支持在一个 HTML 文档中放置多个页面。这些页面是内部链接的本地页面，您可以将它们编为一组，实现预加载目的。多页页面的结构与前面的单页页面示例类似，只是它将包含多个页面数据角色。清单 8 展示了一个示例。
清单 8. 在单个 HTML 文件中定义多个页面
引用同一个 HTML 文档中的本地页面时，jQuery Mobile 将自动处理那些引用。引用一个外部页面时，jQuery Mobile 将显示一个加载转盘。如果遇到错误，此框架将自动显示并处理一个错误消息弹出窗口。
回页首
页面过渡
jQuery Mobile 支持基于 CSS 的页面过渡（受到 jQtouch 的启发），页面过渡在导航到一个新页面和返回上一个页面时应用。这些过渡包括：
幻灯片
提供一个水平过渡 向上滑动和向下滑动
提供上下屏幕的过渡 弹出
提供一个爆炸式过渡类型 淡出
提供一个淡出过渡 翻页
提供一个翻页过渡
可以以两种方式添加页面过渡：
data-transition
- 。
$.mobile.changePage("pendingtasks.html", "slideup");
- 处理动态页面时使用编程方法。
回页首
列表视图
列表视图是一种基础 UI 元素类型，广泛应用于移动应用程序。jQuery Mobile 支持大量列表视图：基础、嵌套、编号和只读列表；分割按钮；列表分割器；计数泡泡；缩略图；图标；搜索过滤栏；插入式列表；以及主题列表。
数据属性创建。
清单 9. 创建一个简单的列表视图
Facebook Friends
- Get Friends
- Post to Wall
- Send Message
中，您定义了一些公共
- 列表项目。这个示例完美地展示了 jQuery Mobile 如何扩展基本 HTML 语法。清单 10 中的代码示例的结果如图 4 所示。
图 4. 一个简单的列表视图
回页首
表单
表单是另一个常用的 web 工件，用于向服务器提交信息。jQuery Mobile 支持许多表单 UI 组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。它们都可以被轻松创建。清单 10 显示了一个表单，该表单带有一个选择菜单和一个提交按钮。
Option 1
Option 2
Option 3
Submit
图 5 展示了表单及其内容。
图 5. 带有选择菜单和提交按钮的简单表单
action 和 method 属性适当定义，jQuery Mobile 就能负责表单、Ajax 调用和结果页面之间的过渡，并在必要时显示一个转盘。
回页首
其他 UI 组件
参考资料）值得您探索。为补充本文的内容，建议您查看以下内容：可折叠内容、布局网格、主题设置、以及列表视图和表单的剩余部分。
回页首
结束语
本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识，以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档，可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性，但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。
