本文介绍jQueryMobile框架，探讨其基础知识及如何构建无需编写JavaScript代码的移动Web应用界面。涵盖页面结构、过渡效果、表单控件等内容。
本文提供一个 jQuery Mobile 框架简介。了解该框架的基础知识， 以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。一个示例将引导您通过一些基本页面、导航、工具栏、列表视图、表单控件和过渡效果。
0
简介
jQuery Mobile 是一个用户界面（UI）框架，允许您编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。在本文中，了解这个框架的特性，包括基本页面、导航工具栏、表单控件和过渡效果。
要理解本文，您需要：
- HTML 经验
- 理解 JavaScript 基本原理
- jQuery 基础知识
您可以从下面的
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 技术构建独立应用程序，参见
浏览器支持
我们在移动设备浏览器支持方面取得了长足的进步，但并非所有移动设备都支持 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 月）
工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 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()
例如，触摸事件包括 tap、taphold 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-* data-*
表 2. 用于 UI 元素的 data-*
| 元素 | HTML5 data-* 属性 |
|---|---|
| 页眉、页脚工具栏 |
|
| 主体内容 | |
| 按钮 | data-icon="info">Button |
| 已编组按钮 | |
| 内联按钮 | |
| 表单元素（选择菜单） |
|
| 基本列表视图 | |
| 对话框 | Open dialog data-rel="dialog" data-transition="pop">Open dialog |
| 过渡 |
jQuery Mobile 文档包含受支持的 data-*
jQuery Mobile 页面结构
本节讨论 jQuery Mobile 页面的一般结构。jQuery Mobile 拥有一些页面结构指南。通常，一个页面结构应该拥有以下部分：
-
页面栏
- 通常包含页面标题和 Back 按钮 内容
- 您的应用程序的内容 页脚栏
- 通常包含导航元素、版权信息、以及需要添加到页脚的任何内容
图 2 展示了这些不同的部分的示例。
图 2. 一个 jQuery Mobile web 应用程序的一般结构
页眉和页脚工具栏支持固定和全屏定位选项。固定位置使工具栏在滚动时保持静态。全屏定位与固定定位基本相同，只是工具栏仅在单击页面时才显示（以便提供一个不刺眼的全屏体验）。本节余下部分将探索一个通用页面结构的 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 代码的下一个部分定义页面本身；查看 data-role="page"
清单 3. 定义一个页面块
清单 3 定义了一个页面。id
下面两个代码清单将展示如何定义页面不同的页眉、内容、以及页脚部分。页眉栏通常包含页面标题和 Back 按钮，如清单 4 所示。
清单 4. 页眉栏部分
Header Bar
在本例中，页眉栏只包含一个 H1 页眉标题文本。页面内容位于页眉下方，如下所示。清单 5 中的示例只显示了一个简单段落，但这是您添加列表、按钮、表单等元素的地方。
清单 5. 页面内容部分
Content Section
页脚栏通常是您放置导航元素和版权信息的地方，如清单 6 所示。
清单 6. 页脚栏部分
Footer Bar
清单 6 中的页脚部分示例非常简单。向页脚栏添加一个导航栏不太复杂，如清单 7 所示。
清单 7. 向页脚部分添加一个导航栏
图 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 展示了一个基本列表视图。列表视图通过
清单 9. 创建一个简单的列表视图
Facebook Friends
在
-
列表项目。这个示例完美地展示了 jQuery Mobile 如何扩展基本 HTML 语法。清单 10 中的代码示例的结果如图 4 所示。
图 4. 一个简单的列表视图
表单
表单是另一个常用的 web 工件，用于向服务器提交信息。jQuery Mobile 支持许多表单 UI 组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。它们都可以被轻松创建。清单 10
选择菜单由原生
图 5 展示了表单及其内容。
图 5. 带有选择菜单和提交按钮的简单表单
选择选择菜单时，jQuery Mobile 在图像（图 5 中的右边）上显示一个带有所有选项值的弹出菜单，这个弹出菜单将在选择完成后自动关闭。只要表单的 action method
其他 UI 组件
jQuery Mobile 网站和文档中还有更多 UI 元素和元素变体（参见
结束语
本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识，以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档，可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性，但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。
扫一扫
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
