jQuery Mobile 和 JSON(2)_H5之家 - 中国HTML5教程资源分享第一站

JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功能包裹。当取回整个页面成本很高时，通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请求并在多数情况下将那些请求转换成特殊的 Ajax 调用，JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是：当访客导航通过 JQM 构建的 web 应用程序时，页面的 DOM 将被操作，而不是每次替换每个页面。为提供这种行为的一些上下文，请查看中的 JQM 样板文档。

清单 2. jQuery Mobile 页面结构

<!DOCTYPE html> <html> <head> <title>IBM jQuery Tutorial</title> <link 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> <div data-role="page"> <div data-role="header"> <h1>jQuery Tutorial</h1> </div> <div data-role="content"> Page content goes here! </div> <div data-role="footer"> Sample code for IBM developerWorks </div> </div> </body> </html>

JQM 随时准备使用 HTML5 data-* 属性。注意，清单 2 广泛使用 div 标记和 data-role 属性。在 HTML5 中，任何带有 data- 前缀的属性实际上将被验证解析器忽略，应用程序可以随意解释那些属性。这正是 JQM 所做的；事实上，JQM 特别依赖 data-role 属性来将其核心功能串联到一起。

展示了中的 data-role 属性的 4 个实例。

表 1. 清单 2 中的 data-role 属性的 4 个实例

data-role 属性注释

page这是一个应用程序的页面的封装 div。一个 HTML 文件可以包含一个或多个页面级 div 元素。

headerJQM 页面的页眉。

content内容 div 中驻留的内容。

footerJQM 页面的页脚。

当 JQM 应用程序从一个页面切换到下一个页面时，发生的主要行为是 content div 被交换出去以获取新页面的内容。除此之外，JQM 还有更多魔力。简言之，JQM 换出一个内容集以获取另一个内容集，并有选择地修改 DOM 的 CSS，以便从当前页面过渡到一个新页面，或者 — 同样重要的是 — 过渡到一个页面堆栈（或哈希）中的前一页。展示了本教程的样例应用程序的主页，该程序列示多个条目，在一个 iPod 上运行。

图 2. 应用程序的主屏幕

带有一列联系人条目的样例应用程序的主屏幕的屏幕截图

应用程序显示一个列表中的条目。当一个条目被选中时，JQM 载入一个新页面，同时向用户显示一个加载对话框，以便用户能了解正在进行的操作，如所示。

图 3. 载入一个新页面

载入一个新页面的屏幕截图

加载状态图标旋转一会儿，然后，当页面内容被下载或在现有 DOM 中被定位后，JQM 交换处当前可见的内容并显示新内容，如所示，图 4 展示了 JQM 中的一个对话框。

图 4. 添加新数据的 JQM 对话框

添加新数据的 JQM 对话框的屏幕截图（显示 Person、Conatct info 和 Comments 字段）

JQM 大量使用主题和颜色样本。注意，中的对话框的颜色方案（深灰色，黑色背景）不同于中的颜色方案（蓝色和灰色，浅色背景）。建议您查阅关于 jQuery Mobile web 页面上可以找到的主题的文档，参见中的链接。

当页面更改发生时，您可以选择以下几种过渡方式：

当用户往回导航时，过渡也可以反向进行。我特别喜欢翻页过渡。要选择一种特定过渡方式，这样使用 data-transition 属性：<a href="somepage.html" data-transition="flip">Go to some page</a>。

与 jQuery Core 类似，JQM 也提供绑定一些 JavaScript 事件的能力。下面是一些事件示例：

要连接这些事件中的一个，可以使用中的代码。

清单 3. 页面显示之前的通知

$('body').bind('pagebeforeshow',function(event,ui) { alert('beforeshow'); });

jQuery 采用美元符号（$）—$ 符号之后的就是 jQuery 语法。我们再看一个连接事件的例子。假设当一个列表条目被滑指时，您想执行一些操作。展示了捕获每个单独的列表项上的 swipeleft 事件的 jQuery 代码。

清单 4. 为列表项目指定一些滑指处理程序

$('li').each( function (idx) { $(this).bind ( 'swipeleft', function(event,ui) { alert("swipe left" + $(this).attr('data-ibm-jquery-key')); } ); });

这段代码详细说明如下：

混合数据和 UI 元素的优点还存在争议；但是，将数据直接存储在 UI 元素中的能力以及可以轻松绑定的函数提供了一些创造性的编码商机。

事实上，这个讨论只触及 jQuery Mobile 中的功能的皮毛，但现在已经足以说明问题了。现在考虑本教程的样例应用程序背后的动机。

销售力量自动化（SFA）

尽管大量的 App Stores 中从来都不缺乏娱乐应用程序，但许多业务应用程序都属于销售力量自动化类别。这些应用程序的设计目的是帮助管理单个销售人员或销售人员团队的销售行为的过程。无论何种行业，销售成功都归功于一个简单原则：“赢得继续下一步的权利”。如果您有一个合乎需要的销售流程，那么您最终会赢得订单。