jqueryMobile入门

http://www.ibm.com/developerworks/cn/web/wa-jquerymobileupdate/index.html

jQuery Mobile 入门简介

C. Enrique Ortiz, 开发人员兼作家, About Mobility Weblog

简介：本文将简单介绍 jQuery Mobile 框架，了解该框架的基础知识，以及如何编写一个有效的移动 Web 应用程序用户界面。本文将通过一个示例指导您完成基本页面、导航、工具栏、列表视图、表单控件和过渡效果。

简介

jQuery Mobile 是一个极好的框架，用于编写移动 Web 应用程序。jQuery Mobile 构建于流行的 jQuery 和用户界面 (UI) 之上，是一个有效的统一框架，可为您编写移动 Web 应用程序。有了 jQuery Mobile，就可以确保外观、感觉和行为在不同移动平台上的一致性。jQuery Mobile 基本特性包括：

・         一般简单性和灵活性
该框架易于使用。您可以：

o   主要使用标记驱开发动页面，无需或仅需很少 JavaScript。

o   使用高级 JavaScript 和事件。

o   使用一个 HTML 文件和多个嵌入页面。

o   将应用程序分解成多个页面。

・         逐步强化和全面兼容
尽管 jQuery Mobile 利用最新的 HTML5、CSS3 和 JavaScript，但并非所有移动设备都提供这样的支持。jQueryMobile 的理念是同时支持高端和低端设备，比如那些不支持JavaScript 的设备，尽量提供最好的体验。

・         支持触摸屏输入和其他输入方法。
jQuery Mobile 为不同输入方法和事件提供支持：触摸屏、鼠标和基于光标焦点的用户输入。

・         可访问性
jQuery Mobile 在设计时考虑了访问能力，它支持Accessible Rich Internet Applications (WAI-ARIA)，以帮助使用辅助技术的残障人士访问 Web 页面。

・         轻量级和模块化
该框架属于轻量级，拥有一个大小（版本 1.0.1 进行了缩小和压缩）为 24KB 的 JavaScript 库，7KB 的 CSS 以及一些图标。

主题
该框架还提供一个主题系统，允许您定义自己的应用程序样式。有了这个新的 ThemeRoller 应用程序，您就可以

・         轻松地创建您自己的主题。

jQuery Mobile 框架包括构建完整移动 Web 应用程序和网站所需的所有 UI 组件。页面、对话框、工具栏、不同类型的列表视图，各种表单元素和按钮等。jQuery Mobile 构建于 jQuery 内核之上，因此您可以访问关键设备，包括 HTML 和 XML 文档对象模型 (DOM) 的遍历操作；事件处理；使用 Ajax 服务器通信；以及 Web 页面的动画和图像效果。

有了 jQuery Mobile，您就可以轻而易举地编写基础 Web 应用程序。由于 jQuery Mobile 是一个非常全面的基础架构，提供了一些高级事件和 API，所以您还可以编写高级移动 Web 应用程序和网站。

本文将介绍 jQuery Mobile 最新版本（版本 1.0.1）的基本原理。了解浏览器支持、UI 组件和 API。要跟随本文学习，您需要：

・         之前接触过 HTML

・         理解 JavaScript 基本原理

・         了解 jQuery 基本知识

您可以下载本文所用的 jQuery Mobile 源代码示例。参考资料提供了部分有关 jQuery Mobile、jQuery、JavaScript、DOM 和 HTML5 的信息。

回页首

浏览器支持

移动设备浏览器经历了漫长的发展，但并非所有移动设备都支持 HTML5、CSS 3 和 JavaScript。这个领域是 jQuery Mobile 持续增强和支持全面兼容发挥作用的地方。

jQuery Mobile 同时支持高端和低端设备，包括那些不支持JavaScript 的设备。持续增强是一个设计理念，包含以下核心原则（来源：Wikipedia）：

・         所有浏览器都应该能够访问全部基础内容。

・         所有浏览器都应该能够访问全部基础功能。

・         增强的布局由外部链接的 CSS 提供。

・         增强的行为由外部链接的 CSS 提供。

・         终端用户浏览器偏好应受到重视。

所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外部链接的 JavaScript 和 CSS 持续增强。

jQuery Mobile 为大量移动设备提供支持。jQueryMobile 将设备支持根据其支持级别分类或分组成 3 个类别：

・         A 级：设备支持一个充分增强的用户体验和基于 Ajax 的动画页面过渡。jQuery Mobile 支持超过 20 个不同设备，其中包括：iOS3.2-5.0、Android 2.1-2.3 与 3.0、BlackBerry 6-7 与 Playbook、Skyfire 4.1、Opera Mobile；还支持桌面浏览器 Chrome、Firefox、Internet Explorer 和 Opera。

・         B 级：设备支持一个增强体验，但是没有 Ajax 导航特性。支持的设备包括：BlackBerry5.0、Opera Mini 5.0-6.5 和 Nokia Symbian ^3。

・         C 级：设备支持一个基本的、非增强的 HTML 体验。支持的设备包括：上一代智能手机，包括BlackBerry 4.x、Windows Mobile 和其他设备。

参阅参考资料获取一个完整的 jQuery Mobile 支持平台列表。

本文其余部分将描述 jQuery Mobile 页面构造、HTML5 数据属性和 UI 组件。