本文提供一个 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 月)
![jQuery <wbr>Mobile <wbr>简介 一个页面描绘 jQuery Mobile UI 元素(至 2010 年 8 月),包括按钮、工具栏、列表视图等。](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
工具栏、按钮、列表视图、选项卡、弹出菜单、对话框、进度、编辑面板和表单元素均受到支持。您的移动 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 应用程序的一般结构
![jQuery <wbr>Mobile <wbr>简介 一个 jQuery Mobile web 应用程序的结构,显示页眉栏、内容部分和页脚栏](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
页眉和页脚工具栏支持固定和全屏定位选项。固定位置使工具栏在滚动时保持静态。全屏定位与固定定位基本相同,只是工具栏仅在单击页面时才显示(以便提供一个不刺眼的全屏体验)。本节余下部分将探索一个通用页面结构的 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 <wbr>Mobile <wbr>简介 与图 2 类似的图像,但现在页脚是一个导航栏,其中包含以下按钮:Today、Tomorrow、Week、No date。](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
定义多个本地页面
前面的示例只涉及一个页面。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. 一个简单的列表视图
![jQuery <wbr>Mobile <wbr>简介 一个简单的列表视图,显示 Facebook 朋友,有 Get friends、Post to wall 和 Send message 三个选项。](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
表单
表单是另一个常用的 web 工件,用于向服务器提交信息。jQuery Mobile 支持许多表单 UI 组件:文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。它们都可以被轻松创建。清单 10
选择菜单由原生
图 5 展示了表单及其内容。
图 5. 带有选择菜单和提交按钮的简单表单
![jQuery <wbr>Mobile <wbr>简介 一个简单表单,其中有一个选择菜单,带有选项 1、2 和 3,还有一个提交按钮](https://i-blog.csdnimg.cn/blog_migrate/a4c26d1e5885305701be709a3d33442f.gif)
选择选择菜单时,jQuery Mobile 在图像(图 5 中的右边)上显示一个带有所有选项值的弹出菜单,这个弹出菜单将在选择完成后自动关闭。只要表单的 action
method
其他 UI 组件
jQuery Mobile 网站和文档中还有更多 UI 元素和元素变体(参见
结束语
本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识,以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档,可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性,但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。