jQuery Mobile 和 JSON
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
清单 2. jQuery Mobile 页面结构
<!DOCTYPE html> <html>
<head> <title>IBM jQuery Tutorial</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1
关于本教程
页码，2/31
本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的领先浏览器的移动 web 应用程序。JQM 用于 向一些移动设备（比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等）上运行的基 于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后 者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些 方法。最后，本教程检查一个基本销售力量自动化需求。
为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应 用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟 悉其他服务器端平台，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容 易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移 动程序员，而不是启动到移动空间中的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本 jQuery Mobile 应用程序和如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作 （比如 insert、update、delete）。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通 用。最后，您将您的移动 web 应用程序的快捷键安装到 iPod 和 Android 设备的主屏幕上，展示如何部署 web 应用程 序。
回页首
先决条件
要跟随本教程，您需要以下组件：
l 文本编辑器 — 可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++ 是一个很 好用的开源编辑器。
l JQuery Mobile 链接 — 实际上您无需下载任何内容。必要的文件通过 jQuery's Content Delivery Network (CDN) 提供。
注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别 是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为 的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。
JQM — 最新的 jQuery 家族成员
JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一 样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基。事实上，当 JQM 致力于统一和优化这个代码基时， jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。
回页首
面向触摸
JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关 于编写 web 应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。 JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看 图 1 中的图像，它们 展示了 JQM 样式化表单元素的一个子集。
/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1
l Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。 l WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。 l 移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。 l PHP 和 MySQL 托管环境 — 用于应用程序的服务器端。
图 1. JQM 表单元素
页码，4/31
除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。
回页首 扩展 DOM 在传统 web 应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：
1. 往返服务器 2. 下载 HTML 3. 解析 HTML 4. 呈现 HTML，包括应用层叠样式表
标记本文！
发布日期： 2011 年 4 月 11 日 级别： 中级
访问情况 144 次浏览 建议： 0 (添加评论)
Leabharlann Baidu
开始之前
平均分 （共 0 个评分 ）
常用缩略词
l Ajax：异步 JavaScript + XML l ASP：活动服务器页 l CSS：层叠样式表 l DOM：文档对象模型 l FTP：文件传输协议 l GPL：GNU 通用公共许可 l HTML：超文本标记语言 l HTTP：超文本传输协议 l MIT：麻省理工学院 l SQL：结构化查询语言 l UI：用户界面 l XML：可扩展标记语言
除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减 形式的 jQuery 核心库的引 用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减 意味着代码针对快速下 载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓 存！）来大幅提高应用程序性能。
<head> <title>IBM JQuery Tutorial</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script> <script src="http://jquery.ibm.navitend.com/utils.js"></script> </head>
请参见 参考资料 获取帮助链接；下载 样例应用程序的源代码。
jQuery Mobile
我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 有一个大型已安装基，JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 模式。我们看看 JQM 项目希望实现的目标。
清单 1中的代码实际上是本教程的样例代码中的一个潜在高峰（sneak peak），本教程稍后还将讨论它。注意，现在一 个样式表已经直接从 jQuery 的 Content Delivery Network (CDN) 下载下来。CDN 用于分发跨 Internet 分发经常使用的 文件，使得下载速度尽可能快。CDN 通常部署在一些大型基础架构上，通过在 Internet 上的一些战略位置放置文件， 将这些文件需要传输的路径减小到最小距离。jQuery CDN 和其他类似 CDN 通常托管在一些世界级大型基础架构上， 比如 amazon.com 和其他 Internet 巨头提供的基础架构。
JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功 能包裹。当取回整个页面成本很高时，通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请 求并在多数情况下将那些请求转换成特殊的 Ajax 调用，JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是：当 访客导航通过 JQM 构建的 web 应用程序时，页面的 DOM 将被操作，而不是每次替换每个页面。为提供这种行为的 一些上下文，请查看 清单 2 中的 JQM 样板文档。
页码，1/31
jQuery Mobile 和 JSON
学习如何创建由 jQuery Mobile 驱动的移动 web 应用程序
Ableson Frank, 企业家, Navitend
简介： 今天，jQuery 驱动着 Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序逐渐减 少。现在，主要移动平台上的浏览器的功能都赶上了桌面浏览器，因此 jQuery 团队引入了 jQuery Mobile（或 JQM）。JQM 的使命是向所有主要移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 — 不管使用哪 种查看设备。本教程在一个面向销售力量自动化的应用程序背景下介绍 jQuery Mobile 的基本设计概念。您可以创建一 个直观形象的移动 web 应用程序，与一个 Internet 承载的网站进行交互，存储和管理销售机会。
针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用 程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设 备上更轻松地访问您的应用程序。
清单 1 中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依 赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见 参考资 料 中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可；基本上，这意味 着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。
与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页 面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。
清单 1 展示了将 jQuery Mobile 文件添加到应用程序是多么简单！
页码，3/31
清单 1. 将 jQuery Mobile 添加到应用程序
我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑 文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直 观。您也可以在 vi 中编辑文件，但谁想这样做呢？为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。
<!DOCTYPE html> <html>
<head> <title>IBM jQuery Tutorial</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1
关于本教程
页码，2/31
本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的领先浏览器的移动 web 应用程序。JQM 用于 向一些移动设备（比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等）上运行的基 于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后 者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些 方法。最后，本教程检查一个基本销售力量自动化需求。
为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应 用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟 悉其他服务器端平台，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容 易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移 动程序员，而不是启动到移动空间中的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本 jQuery Mobile 应用程序和如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作 （比如 insert、update、delete）。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通 用。最后，您将您的移动 web 应用程序的快捷键安装到 iPod 和 Android 设备的主屏幕上，展示如何部署 web 应用程 序。
回页首
先决条件
要跟随本教程，您需要以下组件：
l 文本编辑器 — 可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++ 是一个很 好用的开源编辑器。
l JQuery Mobile 链接 — 实际上您无需下载任何内容。必要的文件通过 jQuery's Content Delivery Network (CDN) 提供。
注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别 是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为 的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。
JQM — 最新的 jQuery 家族成员
JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一 样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基。事实上，当 JQM 致力于统一和优化这个代码基时， jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。
回页首
面向触摸
JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关 于编写 web 应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。 JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看 图 1 中的图像，它们 展示了 JQM 样式化表单元素的一个子集。
/jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1
l Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。 l WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。 l 移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。 l PHP 和 MySQL 托管环境 — 用于应用程序的服务器端。
图 1. JQM 表单元素
页码，4/31
除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。
回页首 扩展 DOM 在传统 web 应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：
1. 往返服务器 2. 下载 HTML 3. 解析 HTML 4. 呈现 HTML，包括应用层叠样式表
标记本文！
发布日期： 2011 年 4 月 11 日 级别： 中级
访问情况 144 次浏览 建议： 0 (添加评论)
Leabharlann Baidu
开始之前
平均分 （共 0 个评分 ）
常用缩略词
l Ajax：异步 JavaScript + XML l ASP：活动服务器页 l CSS：层叠样式表 l DOM：文档对象模型 l FTP：文件传输协议 l GPL：GNU 通用公共许可 l HTML：超文本标记语言 l HTTP：超文本传输协议 l MIT：麻省理工学院 l SQL：结构化查询语言 l UI：用户界面 l XML：可扩展标记语言
除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减 形式的 jQuery 核心库的引 用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减 意味着代码针对快速下 载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓 存！）来大幅提高应用程序性能。
<head> <title>IBM JQuery Tutorial</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" /> <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script> <script src="http://jquery.ibm.navitend.com/utils.js"></script> </head>
请参见 参考资料 获取帮助链接；下载 样例应用程序的源代码。
jQuery Mobile
我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 有一个大型已安装基，JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 模式。我们看看 JQM 项目希望实现的目标。
清单 1中的代码实际上是本教程的样例代码中的一个潜在高峰（sneak peak），本教程稍后还将讨论它。注意，现在一 个样式表已经直接从 jQuery 的 Content Delivery Network (CDN) 下载下来。CDN 用于分发跨 Internet 分发经常使用的 文件，使得下载速度尽可能快。CDN 通常部署在一些大型基础架构上，通过在 Internet 上的一些战略位置放置文件， 将这些文件需要传输的路径减小到最小距离。jQuery CDN 和其他类似 CDN 通常托管在一些世界级大型基础架构上， 比如 amazon.com 和其他 Internet 巨头提供的基础架构。
JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功 能包裹。当取回整个页面成本很高时，通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请 求并在多数情况下将那些请求转换成特殊的 Ajax 调用，JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是：当 访客导航通过 JQM 构建的 web 应用程序时，页面的 DOM 将被操作，而不是每次替换每个页面。为提供这种行为的 一些上下文，请查看 清单 2 中的 JQM 样板文档。
页码，1/31
jQuery Mobile 和 JSON
学习如何创建由 jQuery Mobile 驱动的移动 web 应用程序
Ableson Frank, 企业家, Navitend
简介： 今天，jQuery 驱动着 Internet 上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序逐渐减 少。现在，主要移动平台上的浏览器的功能都赶上了桌面浏览器，因此 jQuery 团队引入了 jQuery Mobile（或 JQM）。JQM 的使命是向所有主要移动浏览器提供一种统一体验，使整个 Internet 上的内容更加丰富 — 不管使用哪 种查看设备。本教程在一个面向销售力量自动化的应用程序背景下介绍 jQuery Mobile 的基本设计概念。您可以创建一 个直观形象的移动 web 应用程序，与一个 Internet 承载的网站进行交互，存储和管理销售机会。
针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用 程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设 备上更轻松地访问您的应用程序。
清单 1 中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依 赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见 参考资 料 中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可；基本上，这意味 着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。
与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页 面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。
清单 1 展示了将 jQuery Mobile 文件添加到应用程序是多么简单！
页码，3/31
清单 1. 将 jQuery Mobile 添加到应用程序
我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑 文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直 观。您也可以在 vi 中编辑文件，但谁想这样做呢？为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。