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

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 href="http://code.jquery.com/mobile /1.0a2/jquery.mobile-1.0a2.min.css" /> <script src="//code.jquery.com/jquery-1.4.4.min.js"></script> <script src="//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> <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> <div data-role="footer"> </div> </div> </body> </html>

在 <ul data-role="listview"/> 中，您定义了一些公共 <li> 列表项目。这个示例完美地展示了 jQuery Mobile 如何扩展基本 HTML 语法。清单 10 中的代码示例的结果如图 4 所示。

图 4. 一个简单的列表视图

一个简单的列表视图，显示 Facebook 朋友，有 Get friends、Post to wall 和 Send message 三个选项。

表单

表单是另一个常用的 web 工件，用于向服务器提交信息。jQuery Mobile 支持许多表单 UI 组件：文本输入、搜索输入、滑块、翻转切换开关、单选按钮、复选框、选择菜单和主题表单。它们都可以被轻松创建。显示了一个表单，该表单带有一个选择菜单和一个提交按钮。

选择菜单由原生 <select> 驱动，但 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">Choose an option:</label> <select> <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. 带有选择菜单和提交按钮的简单表单

一个简单表单，其中有一个选择菜单，带有选项 1、2 和 3，还有一个提交按钮

选择选择菜单时，jQuery Mobile 在图像（图 5 中的右边）上显示一个带有所有选项值的弹出菜单，这个弹出菜单将在选择完成后自动关闭。只要表单的 action 和 method 属性适当定义，jQuery Mobile 就能负责表单、Ajax 调用和结果页面之间的过渡，并在必要时显示一个转盘。

其他 UI 组件

jQuery Mobile 网站和文档中还有更多 UI 元素和元素变体（参见）值得您探索。为补充本文的内容，建议您查看以下内容：可折叠内容、布局网格、主题设置、以及列表视图和表单的剩余部分。

结束语

本文介绍了可扩展 jQuery Mobile JavaScript 框架。您了解了这个框架的基础知识，以及如何编写一个有效的移动 web 应用程序用户界面而不必编写任何 JavaScript 代码。如果您需要操作 HTML 文档，可以使用 jQuery 内核进行操作。您探索了基本页面和导航、工具栏、表单控件和过渡效果。jQuery Mobile 提供了大量可以以编程方式处理的方法、事件和属性，但愿这能激励您去探索本文没有涵盖的 UI 组件的更多信息。

下载

描述名字大小

本文源代码jquerymobileexamplecode.zip3KB

参考资料学习

“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 教程涵盖了 W3C DOM 的所有属性、集合和方法。

获取一个 WAI-ARIA（Accessible Rich Internet Applications Suite）概述，ARIA 定义了一种方法，使得残障人士能更轻松地访问 web 内容和 web 应用程序。

持续增强是一种 web 设计策略，强调访问能力、语义 HTML 标记、外部样式表和脚本技术。

“JavaScript 和文档对象模型（DOM）”（developerWorks，2002 年 7 月）检查了 DOM 的 JavaScript 方法，并逐步展示了如何构建一个用户可以添加注释并编辑注释内容的 web 页面。

developerWorks 技术活动和网络广播：随时关注 developerWorks 技术活动和网络广播。

获得产品和技术

下载 jQuery Mobile（当前版本为 Alpha 2）。

获取 PhoneGap，一个用于构建跨平台移动应用程序的开源开发框架。

使用 IBM 产品评估试用版软件改进您的下一个开发项目，这些软件可以通过下载或从 DVD 获得。

讨论条评论

developerWorks: 登录

标有星（*）号的字段是必填字段。