jQuery Mobile 入门简介_H5之家 - 中国HTML5教程资源分享第一站

简介

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

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

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。要跟随本文学习，您需要：

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

浏览器支持

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

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

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

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

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

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

一个 jQuery Mobile 页面构造

如所示，一个典型的 jQuery Mobile 页面有 3 部分：页眉、内容和页脚部分。

清单 1. 典型的 jQuery Mobile 页面

<div data-role="page"> <div data-role="header"> <h1>HEADER</h1> </div <div data-role="content"> <p> CONTENT AREA </p> </div> <div data-role="footer"> <h1>FOOTER</h1> </div>

显示了结构。

图 1. 一个 HTML5 jQuery Mobile 页面结构

该图显示了页眉、内容区域和页脚

页眉部分通常放置页面标题和 logo 等信息。内容部分放置特定 Web 应用程序和各种小部件。页脚部分很适合导航。

要利用 jQuery Mobile 高级功能和 HTML 语法，jQuery Mobile HTML 文档必须定义 HTML5 文档类型。HTML 文档其余部分包括：

<head> 和 <body> 部分，其中 <head> 包含 jQuery Mobile 引用和 CSS 移动主题

<body> 部分包含 jQuery Mobile 内容

显示 HTML5 jQuery Mobile 文档的一个示例。

清单 2. jQuery Mobile HTML5 页面结构

//Define the HTML5 doctype: <!DOCTYPE html> // Define the HTML5 <head> with references to jQuery, jQuery Mobile and CSS mobile themes: <html> <head> <title>Page Title</title> <meta content="width=device-width, initial-scale=1"> <link href="http://code.jquery.com/mobile/1.1.0-rc.1/ jquery.mobile-1.1.0-rc.1.min.css" /> <script src="//code.jquery.com/jquery-1.7.1.min.js"></script> <script src="//code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1. min.js"></script> </head> // Define the HTML document <body> that includes the jQuery Mobile elements: <body> <div data-role="page"> <div data-role="header"> <h1>HEADER</h1> </div> <div data-role="content"> <p> CONTENT AREA </p> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div> <div data-role="page"> : : </div> </body> </html> // The footer can be turned into a navigation bar very easily, as follows: <center> <div data-role="footer"> <div data-role="controlgroup" data-type="horizontal"> <a href="index.html" data-role="button">One</a> <a href="index.html" data-role="button">Two</a> <a href="index.html" data-role="button">Three</a> <a href="index.html" data-role="button">None</a> </div> </div> </center>

显示了在中创建的页脚。

图 2. 页脚

尽管页面、页眉、内容和页脚属性是可选的，但是推荐您使用它们，它们可以使页面更加清晰，有利于遵循 jQuery Mobile。

单个页面、多个页面和页面链接

单个 HTML 文档可以有一个或多个 jQuery Mobile 页面，正如 data-role="page" 属性所显示的。如果有多个页面，您必须为 id 属性指定一个惟一的页面 ID，用于链接外部页面。加载一个多页面 HTML 文档时，仅显示第一个页面。

jQuery Mobile 使用 Ajax 进行页面加载，此过程中显示加载进度条。如果加载成功，会增强该 UI 小部件，将页面添加到 DOM，并且应用于页面动画或过渡。

无需 Ajax 进行链接和 HTTP 加载。您不能使用这种方法或者动画过渡。无需 Ajax，就可以在链接上使用 rel="external"、data-ajax="false" 或 target 进行加载。

受支持的事件和方法