作者: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 是一个针对触摸体验的 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 站点上的支持浏览器列表了解更多信息(参见 参考资料)。
jQuery Mobile 向不同种类的 UI 元素提供健壮的支持。图 1 显示了目前支持的 UI 组件的一个小结。
图 1. jQuery Mobile UI 元素(至 2010 年 8 月)
工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 web 应用程序需要的大部分(如果不是全部的话)UI 元素都已提供。
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
事件创建动态应用程序。
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 拥有一些页面结构指南。通常,一个页面结构应该拥有以下部分:
-
页面栏
- 通常包含页面标题和 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> <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 还支持在一个 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. 一个简单的列表视图
表单是另一个常用的 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 中的右边)上显示一个带有所有选项值的弹出菜单,这个弹出菜单将在选择完成后自动关闭。只要表单的 action
和 method
属性适当定义,jQuery Mobile 就能负责表单、Ajax 调用和结果页面之间的过渡,并在必要时显示一个转盘。
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 技术活动和网络广播。