使用 jQuery Mobile API 实现细粒度的自定义控制
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 的 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 对象是设置所有属性的起始点。 |
您可以通过名称空间自定义 HTML5 data- 属性，如 data-role。名称空间允许您添加一个自定义名称，例如，它将出现在 data-role 属性的 data- 和 -role 部分之间。允许您自定义的名称空间的 $.mobile 属性是 ns。清单 5 显示了一个使用 ns 属性设置自定义名称空间的示例。
清单 5. 创建自定义名称空间
$(document).bind("mobileinit", function() { $.mobile.ns = "my-custom-ns"; }); 在清单 5 中使用的自定义名称空间生成 data-my-custom-ns-role 而不是 data-role，这使您可以通过 CSS 选择器定位这些名称空间。通过 CSS 选择器定位自定义名称空间提供了另一种方式来为使用那些名称空间的移动小部件设计自定义主题。 |
jQuery Mobile 包括一个名称为 autoInitializePage 的属性，它确定 Web 页面是否应该被初始化。默认情况下，该属性值被设置为 true，因此当文档就绪时，页面总是被初始化。然而，通过扩展 $.mobile 对象，您可以将该属性设置为 false，并在稍后再处理页面初始化。清单 6 显示了一个如何能够在其他脚本运行时暂时延迟页面初始化的示例。如果在 Web 页面上有大量客户端 JavaScript 在运行，将初始化延迟至 DOM 完成加载可能是一个好主意，这样客户端 JavaScript 就会有机会运行。
清单 6. 为移动 Web 页面设置自动初始化
<!DOCTYPE HTML> <html> <head> <title>Understanding the jQuery Mobile API</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).bind("mobileinit", function() { $.mobile.autoInitializePage = false; }); </script> <script type="text/javascript" src="jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <ul data-role="listview" id="my-list"></ul> </div> </div> <script type="text/javascript"> $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>'); $.mobile.autoInitializePage = true; </script> </body> </html> 自定义子页面的 URL 键 |
当引用子页面时，jQuery Mobile 默认使用一个 URL 参数键 ui-page。您可以通过 $.mobile 对象中一个名为 subPageUrlKey 的属性来修改该键。这个属性中被更新的任何字符串值，都反映在部件生成的子页面 URL。例如，如果您使用 my-page 的一个自定义 subPageUrlKey，web-page.html&ui-page=value 这个默认的 URL 将变成 web-page.html&my-page=value。
除了提供一种方式来创建更具吸引力的 URL，自定义子页面的 URL 键还可以提供一种方式来缩短 URL，或将其值设置为更特定于要使用它们的网站的值。
当一个 Web 页面包括 jQuery Mobile 框架时，有一个默认的 CSS 类会自动被应用到 ui-page 元素。要修改默认值 ui-page-active，您只需修改 $.mobile 对象的 activePageClass 属性。通过更新该类，包含在框架中的默认 CSS 不再将其样式应用到 ui-page-active 类，因为它不再存在。因此，重要的是对应您为该属性提供的值来创建自己自定义的 CSS 类。
默认情况下，在 jQuery Mobile 中，当通过 Ajax 处理 Web 页面变更时，页面和对话包括一个转换效果。默认的页面转换是 slide，而默认的对话转换是 pop。如需修改这些值，您需要定位 defaultPageTransition 或 defaultDialogTransition 属性。清单 7 显示了修改这些属性值有多容易。
清单 7. 设置默认页面和对话转换
$(document).bind("mobileinit", function() { $.mobile.defaultPageTransition = "fade"; $.mobile.defaultDialogTransition = "fade"; }); 在该示例中，页面和对话的转换都是淡化效果。该框架包括六种基于 CSS 的转换效果： slide、slideup、slidedown、pop、fade 和 flip。您也可以通过包括 data-transition 属性，将这些效果直接应用到超链接上。 |
该框架控制的其他两种选项，分别是加载和错误消息。加载消息默认显示 loading 字符串值。要更新该属性，您只需定位 loadingMessage 属性。在清单 8 中，我将默认加载信息从 loading 修改为 Please wait。结果，当使用 Ajax 加载页面时，一个小对话框出现，其中显示了我的自定义加载消息。
$(document).bind("mobileinit", function() { $.mobile.loadingMessage = "Please wait"; }); pageLoadErrorMessage 的默认值是 Error Loading Page。我将更新该消息，将它修改为清单 9 中更加用户友好的消息。 |
清单 9. 设置默认错误消息
$(document).bind("mobileinit", function() { $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.'; }); 钩住 jQuery Mobile 事件 |
您可以使用 jQuery Mobile API 扩展以下事件类型：
- 触摸事件
- 方向事件
- 滚动事件
在 jQuery Mobile 中有一些触摸事件是可定制的。然而，这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用。当这些事件可用时，您可以触发任何自定义 JavaScript 作为对五种不同的事件的响应 tap、taphold、swipe、swipeleft 和 swiperight。这些事件全都是不言而喻的，如 表 1 所示。
表 1. jQuery Mobile 的可定制触摸事件
| 事件 | 描述 |
|---|---|
tap | 当快速点击屏幕时触发。 |
taphold | 当点击屏幕并继续接触屏幕大约一秒时触发。 |
swipe | 当 Web 页面被水平或垂直拖动时触发。该事件实际上是惟一与属性关联的事件。这些属性是 scrollSupressionThreshold、 durationThreshold、 horizontalDistanceThreshold 和 verticalDistanceThreshold。 |
swipeleft | 当 Web 页面被向左拖动时触发。 |
swiperight | 当 Web 页面被向右拖动时触发。 |
要绑定到任意这些触摸事件，您需要使用 document.ready 事件。当文档就绪时，您可以访问一个元素并绑定您选择的触摸事件（见清单 10）。
清单 10. 绑定到触摸事件
<!DOCTYPE HTML> <html> <head> <title>Understanding the jQuery Mobile API</title> <link rel="stylesheet" href="jquery.mobile.css" /> <script src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".tap-hold-test").bind("taphold", function(event) { $(this).html("Tapped and held"); }); }); </script> <script src="jquery.mobile.js"></script> </head> <body> <div data-role="page" id="my-page"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <ul data-role="listview" id="my-list"> <li class="tap-hold-test">Tap and hold test</li> </ul> </div> </div> </body> </html> 如您所见，代码将 taphold 触摸事件绑定到一个列表项。当文档就绪时，可通过 jQuery 定位该示例中的这个列表项。那么，它被定位并绑定到 taphold 事件，该事件修改列表项内的 HTML。 |
在智能手机和平板设备上，只有一个名称为 orientationchange 的方向事件。该事件在设备被垂直或水平旋转时触发。要确定设备按哪个方向旋转，您可以访问方向属性，它提供一个只读值 portrait 或 landscape。绑定到 orientationchange 事件要求您定位 body 元素，然后使用 bind 方法来绑定事件（见清单 11）。
清单 11. 将
orientationchange 事件绑定到 body 元素 $(document).ready(function(){ $('body').bind('orientationchange', function(event) { alert('orientationchange: '+ event.orientation); }); }); 在文档就绪后绑定事件，这也很重要。否则，您会获得不一致的结果，因为 body 元素可能在绑定时不可用。您也可以进一步增强该代码，当文档就绪时触发 orientationchange 事件（见清单 12）。 |
清单 12. 当文档就绪时触发
orientationchange 事件 $(document).ready(function(){ $('body').bind('orientationchange', function(event) { alert('orientationchange: '+ event.orientation); }); $('body').trigger('orientationchange'); }); 当文档就绪时触发事件，这使您可以确定 Web 页面初始加载时的方向。当您需要根据在用设备的当前方向显示内容时，这特别有用。您也可以通过 CSS 访问方向值，因为它们被添加到 Web 页面中的 HTML 元素。这些强大的特性使您可以根据设备的方向修改内容布局。 |
jQuery Mobile 包括滚动事件，当用户滚动 Web 页面时触发。第一个事件是 scrollstart 事件，它在页面滚动开始时触发。清单 13 显示了如何能够绑定到该事件，并添加在页面滚动开始时运行的自定义 JavaScript 代码。
清单 13. 绑定到
scrollstart 事件 $(document).ready(function(){ $('body').bind('scrollstart', function(event) { // Add scroll start code here }); }); 名称为 scrollstop 的另一个事件，在页面滚动停止时应用。如清单 14 所示，绑定到 scrollstop 事件的方法就和 scrollstart 绑定一样。 |
清单 14. 绑定到
scrollstop 事件 $(document).ready(function(){ $('body').bind('scrollstop', function(event) { // Add scroll stop code here }); }); 绑定到这两个事件都必须在文档正式就绪时完成。这保证了 body 元素存在，并可以被成功地绑定到事件。作为一个示例，在运行 JavaScript 代码时（页面滚动时显示在 Web 页面下方的选项），这两个事件很是有用的，被称为延迟加载，其中当 Web 页面初次加载时，不会加载图片。这使得页面加载时间较短，同时还提供了访问内容时相同的视觉吸引力。 |
通过使用 jQuery Mobile API 所提供的曝光方法，可以实现以下功能：
- 以编程方式修改页面
- 静默地加载页面
- 使用实用程序方法
jQuery Mobile 框架中有若干个曝光的方法，其中一个方法除了能够默认使用超链接和表单提交之外，还使您能够以编程方式修改页面。当您以编程方式修改页面时，会包括了从页面加载到页面转换时所发生的所有视觉效果。清单 15 显示了如何使用 $.mobile 对象的 changePage 方法修改页面。
changePage 方法修改页面 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="jquery.mobile.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("#my-page").live('pagecreate', function(event) { $("#alt-link").bind("click", function(event) { $.mobile.changePage("page-2.html"); }); }); </script> <script type="text/javascript" src="jquery.mobile.js"></script> </head> <body> <div data-role="page" id="my-page"> <div data-role="content"> <ul data-role="listview" id="my-list"></ul> </div> </div> <script type="text/javascript"> $('#my-list').append('<li><a href="page-2.html">Link to another page</a></li>'); $('#my-list').append('<li><a href="#" id="alt-link">Link to another page programmatically</a></li>'); </script> </body> </html> 有一个必需的参数，其名称为 to。该参数可以是一个字符串或对象。to 参数可以是绝对的或相对的 URL。对象参数必须是一个 jQuery 集合对象，换句话说，是被用作一个额外页面的内联元素。还有一些可选参数，您可以将其传递为一个对象： |
transitionreversechangeHashrolepageContainertypedatareloadPage
清单 15 没有使用任何可选参数。它只是传递了另一个 HTML 文件的名称。
要使用 changePage 方法，您需要做几件事。首先，您必须用 page 的一个 data-role 值创建一个 div 元素，并添加一个 ID 给它。有了这个 ID 后，您需要添加 pagecreate 事件，而不是 jQuery 的 document.ready。现在您可以添加您们的 click 事件。jQuery Mobile 建议您绑定一个链接，而不是直接调用 click 事件。最后，您可以使用 changePage 方法修改页面。
另一个很棒的 $.mobile 对象方法是 loadPage。您可以使用 loadPage 方法加载外部页面，而不需要显示它们。这是一种很有用的页面预加载方式，使页面可以在用户单击链接时更快速地显示出来。要使用这个方法，您需要编写与使用 changePage 方法时类似的代码。首先，您需要一个 page 元素，该元素有一个 ID，您可以访问它，以绑定 pagecreate 事件。然后，当 pagecreate 事件触发时，您可以调用 loadPage 事件（见清单 16）。
清单 16. 使用
loadPage 方法预加载页面 <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="jquery.mobile.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $("#my-page").live('pagecreate', function(event) { $.mobile.loadPage("page-2.html"); }); </script> <script type="text/javascript" src="jquery.mobile.js"></script> </head> <body> <div data-role="page" id="my-page"> <div data-role="content"> <ul data-role="listview" id="my-list"> <li><a href="page-2.html">Link to another page</a></li> </ul> </div> </div> </body> </html> loadPage 方法包括一个必需的 URL 参数，该参数可以是一个代表一个相对或绝对 URL 的字符串，您也可以传递一个对象。还有一个可选参数，可以接受拥有一个或多个以下属性的对象： |
rolepageContainertypedatareloadPageloadMsgDelay
当使用 jQuery Mobile 框架开发网站时，有大量内置的实用程序方法可以提供有用的功能（见表 2）。
表 2. jQuery Mobile 的当前内置实用程序方法
| 方法 | 描述 |
|---|---|
$.mobile.path.parseUrl | 将一个 URL 解析成具有 16 个属性的对象 |
$.mobile.path.makePathAbsolute | 将相对文件或目录转换成绝对路径 |
$.mobile.path.makeUrlAbsolute | 将相对 URL 转换成绝对 URL |
$.mobile.path.isSameDomain | 比较两个 URL |
$.mobile.path.isRelativeUrl | 确定 URL 是否相对 URL |
$.mobile.path.isAbsoluteUrl | 确定 URL 是否绝对 URL |
$.mobile.path.base | 使用生成的基础元素 |
jQuery Mobile 框架的使用很简单，但别让它的简单性愚弄您。幕后还发生了很多事情，并且有许多方法可以添加自定义功能，以提供强大的移动网站和应用程序。通过点击该 API，您可以告诉框架在默认情况下如何操作，通过使用曝光的方法加快页面加载，甚至绑定到客户端上发生的每一次交互。
文章出处： IBM developerWorks