jQuery Mobile API 针对移动网站定制提供了另一个级别的控制。从全局选项的自定义设置,到钩住交互事件和曝光的方法,一切都可以使用该 API 实现,并且在本文中进行介绍。在本文结束时,您就会知道如何精细地定义您想在移动网站中使用的自定义选项,以及如何编写与 jQuery Mobile 框架进行交互的自定义代码。
本文介绍了一系列来自 jQuery Mobile 框架的有用的属性、事件和曝光的方法。在每一节中,将介绍各个选项,并提供代码样例,以说明它是如何完成的。要运行任何代码样例,您必须先下载 jQuery 和 jQuery Mobile 框架的">最新版本,或在您的 HTML 文件中直接引用来自 jQuery 内容交付网络 (CDN) 的文件。
全局选项
以下全局选项都可以通过 jQuery Mobile API 提供,它们使您能够改变 jQuery Mobile 的默认行为:
扩展 jQuery Mobile 的初始化事件 创建自定义名称空间 页面初始化 自定义子页面的 URL 键 设置活动页面和按钮类 设置默认的页面和
对话转换 自定义加载和错误消息
扩展 jQuery Mobile 的初始化事件
jQuery Mobile 包括一个初始化事件,该事件甚至会先于 jQuery 的 document.ready 事件进行加载。jQuery Mobile 实际上在文档对象本身上触发其初始化事件,该事件名称为 mobileinit。这使您可以覆盖和扩展 jQuery Mobile 的默认全局选项,这是整篇文章的出发点。要扩展 mobileinit 事件,您需要在 jQuery Mobile 被加载之前,以及 jQuery 框架加载之后,添加自定义的 JavaScript 事件处理程序(参见清单 1)。
清单 1. 扩展 jQuery Mobile mobileinit 事件
<script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="custom-jqm-mobileinit.js"></script><script type="text/javascript" src="jquery.mobile.js"></script>
要扩展 mobileinit 事件,您首先需要将它与一个自定义函数进行绑定。清单 2 显示了一个示例,使用 bind 方法扩展 mobileinit 事件。
清单 2. 绑定到 mobileinit 事件
$(document).bind("mobileinit",
function() { // Override global options here});
当您成功绑定到 mobileinit 事件后,您就可以覆盖全局选项。要覆盖全局选项,您可以使用 jQuery 的 extend 方法来扩展 $.mobile 对象(见清单 3),也可以简单地通过直接设置每个属性来覆盖它们。
清单 3. 扩展 $.mobile 对象
$(document).bind("mobileinit", function() { $.extend( $.mobile , { property = value });});
如果有多个您想更新的属性,extend 方法是一个更清晰的选项,因为您不需要多次写入 $.mobile 对象。然而,如果您只想更新一个属性,只需很少的代码行就可以设置每个属性(见清单 4)。
清单 4. 覆盖每个属性值
$(document).bind("mobileinit", function() { $.mobile.property = value;});
$.mobile 对象是设置所有属性的起始点。