$.mobile对象

继承扩展jQuery Mobile的初始化事件

jQuery Mobile中包含了一个初始化的事件，该事件在jQuery框架的document.ready事件加载前就能被加载，名字叫mobileinit。这 就允许开发者继承和扩展jQuery Mobile的默认全局选项。为了继承和扩展mobileinit事件，只需要将自定义的Javascript事件处理程序脚本放在jQuery Mobile库加载前进行加载即可，但要注意放在jQuery框架本身后进行加载，如下代码所示：

然后，为了扩展mobileinit事件，必须首先使用jquery的bind事件将自定义方法和

Mobileinit事件绑定，如下所示：

  1. $(document).bind("mobileinit", function() {  
  2. //在这里编写新的全局选项代码  
  3. });  

接下来，就可以使用jQuery的extend方法去继承$mobile对象，然后可以简单地通过属性=值的方法重新设置jQuery Mobile的新的全局属性，如下代码：

  1. $(document).bind("mobileinit", function() {  
  2. $.extend( $.mobile , {  
  3. property = value  
  4. });  
  5. });  

如果仅是设置一个属性值，则也可以使用如下代码实现，而不需要继承$mobile对象：

  1. $(document).bind("mobileinit", function() { 
  2. $.mobile.property = value; 
  3. }); 

可以看到$.mobile对象为设置所有属性的入口点。

jQuery Mobile创建自定义命名空间

在jQuery Mobile中，甚至可以自定义象HTML5中的data-attribute等系列属性，比如data-role等。这通过自定义命名空间即可实现。比 如可以实现自定义一个名字，变成data-自定义名-role这样的形式，这可以通过$.mobile对象中增加ns属性来指定，如下代码：

  1. $(document).bind("mobileinit", function() { 
  2. $.mobile.ns = "my-custom-ns"; 
  3. }); 

通过上面的代码，建立了一个data-my-customer-ns-role的属性，而不是传统jQuery Mobile中指定的data-role。通过设置自定义的命名空间，可以方便开发者在CSS选择器中进行指定，同时如果要自定义mobile小插件的主 题，则也必须使用自定义命名空间，以示区别。

页面初始化

jQuery Mobile提供了一个叫autoInitializePage的属性，这个属性表示页面是否应该初始化，其默认值为true。然而，如果是继承扩展 了$.mobile对象，开发者则可以将该值设置为false,并且在稍晚的时候对页面初始化进行设置。下面的代码中，演示了当其他脚本在运行时，如何暂 时延迟页面的初始化。如果有大量的客户端脚本运行，则一个很好的建议方法是延迟页面的初始化，直到DOM完成加载客户端脚本。

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.   <title>Understanding the jQuery Mobile API</title> 
  5.   <script type="text/javascript" src="jquery.js"></script> 
  6.   <script type="text/javascript"> 
  7.     $(document).bind("mobileinit", function() { 
  8.       $.mobile.autoInitializePage = false; 
  9.     }); 
  10.   </script> 
  11.   <script type="text/javascript" src="jquery.mobile.js"></script> 
  12. </head>         
  13. <body> 
  14.   <div data-role="page"> 
  15.     <div data-role="content"> 
  16.       <ul data-role="listview" id="my-list"></ul> 
  17.     </div> 
  18.   </div> 
  19.   <script type="text/javascript"> 
  20.     $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>'); 
  21.     $.mobile.autoInitializePage = true; 
  22.   </script> 
  23. </body> 
  24. </html> 

jQuery Mobile自定义子页的KEY

当在jQuery Mobile中引用子页时，默认使用的是ui-page做为KEY标识。开发者可以通过$.mobile对象的subPageUrlKey去重新设置，比 如如果定义了subPageUrlKey为my-page,则默认的子页引用将从web-page.html&ui-page=value改为 web-page.html&my-page=value,这样做的一个好处是开发者可让url更友善更容易维护。

jQuery Mobile设置当前激活页面的样式

当使用了jQuery Mobile后，默认当前激活页面中的ui-page元素都会使用框架默认的样式中定义的ui-page-active，如果要对其进行修改，可以设置$.mobile对象中的activePageClass属性，比如：

  1. $(document).bind("mobileinit", function(){ 
  2. $.mobile.activePageClass="ui-page-custom"; 
  3. }); 

其中ui-page-custome则为用户自定义的样式。

设置默认页面和对话框的动画效果

默认的jQuery Mobile的页面和对话框的效果都是通过ajax实现的。默认的页面切换效果是幻灯片切换，默认的对话框出现的效果是弹出。如果需要改变这些效果的话 ，同样是如下代码所示，设置$.mobile对象的defaultPageTransition和defaultDialogTransition属性就 可以了。

  1. $(document).bind("mobileinit", function() { 
  2. $.mobile.defaultPageTransition = "fade"; 
  3. $.mobile.defaultDialogTransition = "fade"; 
  4. }); 

jQuery Mobile提供了6种效果供用户选择，分别是：slide, slideup, slidedown, pop, fade, 和flip，用户可以按照上面的方法进行设置。

自定义加载及错误信息.

另外两个全局设置参数是加载及错误显示信息。加载信息会在加载页面时显示给用户看，要更改这个设置，只需要修改$.mobile对象的loadingMessage属性即可，如下：

  1. $(document).bind("mobileinit", function() { 
  2. $.mobile.loadingMessage = "Please wait"; 
  3. }); 

同样，可以设置$.mobile对象的属性pageLoadErrorMessage来自定义错误信息，如下：

  1. $(document).bind("mobileinit", function() { 
  2. $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.'; 
  3. }); 

深入jQuery Mobile的事件

现在，我们来深入jQuery Mobile的事件，我们可以通过jQuery Mobile的API来扩展如下的事件类型。

  • Touch事件
  • 方向Orientation事件
  • 滚动scroll事件

Touch事件

在jQuery Mobile中，有不少关于touch的事件。其中主要的有如下5类：tap,taphold,swipe,sipeleft,swiperight，它们的含义如下：

Touch事件
事件名 含义
tap 当用户点屏幕时触发
taphold

当用户点屏幕且保持触摸超过1秒时触发
swipe 当页面被垂直或者水平拖动时触发。这个事件有其相关联的属性，分别为 scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThreshold
swipeleft 当页面被拖动到左边方向时触发
swiperight 当页面被拖动到右边方向时触发

要绑定这些事件，只需要在document.ready()中进行编程即可，如下代码示例：

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.   <title>Understanding the jQuery Mobile API</title> 
  5.   <link rel="stylesheet" href="jquery.mobile.css" /> 
  6.   <script src="jquery.js"></script> 
  7.   <script type="text/javascript"> 
  8.     $(document).ready(function(){ 
  9.       $(".tap-hold-test").bind("taphold", function(event) { 
  10.         $(this).html("Tapped and held"); 
  11.       });   
  12.     }); 
  13.   </script> 
  14.   <script src="jquery.mobile.js"></script> 
  15. </head> 
  16.  
  17. <body> 
  18.   <div data-role="page" id="my-page"> 
  19.     <div data-role="header"> 
  20.             <h1>Header</h1> 
  21.         </div> 
  22.         <div data-role="content"> 
  23.             <ul data-role="listview" id="my-list"> 
  24.                 <li class="tap-hold-test">Tap and hold test</li> 
  25.             </ul> 
  26.     </div> 
  27.   </div> 
  28. </body> 
  29. </html> 

从上面的代码可以看到，将一个list列表跟taphold事件进行了绑定，当DOM加载完毕后，当触发taphold事件后，就会显示Tapped and held的提示信息。

jQuery Mobile方向感应事件

在现在的智能手机中，都有对方向变换的自动感知功能，比如当手机方向从水平方向切换到垂直方向时，则会触发该事件。在jQuery Mobile中，可以通过

orientationchange事件进行绑定，并且可以设定是垂直方向还是水平方向，如下代码所示：

  1. $(document).ready(function(){ 
  2. $('body').bind('orientationchange', function(event) { 
  3. alert('orientationchange: '+ event.orientation); 
  4. }); 
  5. }); 

在上面的代码中，通过对body元素绑定orientationchange事件，并显示出当前的orientation属性。但要注意的是，即使 在 DOM加载完后，还是应该重新调用该事件，因为在DOM加载时有时可能orientationchange事件还没能完全加载完毕，所以应该按如下的方法 在ready加载后，再加载一次：

  1. $(document).ready(function(){ 
  2. $('body').bind('orientationchange', function(event) { 
  3. alert('orientationchange: '+ event.orientation); 
  4. }); 
  5. $('body').trigger('orientationchange'); 
  6. }); 

jQuery Mobile滚动事件

当用户在设备上滚动页面时，jQuery Mobile提供了滚动事件进行监听。其中首先介绍的是scrollstart事件，该事件发生在页面滚动开始时，如下代码：

  1. $(document).ready(function(){ 
  2. $('body').bind('scrollstart', function(event) { 
  3. //相关的滚动开始代码 
  4. }); 
  5. }); 

同样，当滚动停止后，则可以用scrollstop事件进行监听，如下代码：

  1. $(document).ready(function(){ 
  2. $('body').bind('scrollstop', function(event) { 
  3. //相关滚动停止的代码 
  4. }); 
  5. }); 

jQuery Mobile API提供的一些实用方法

在jQuery Mobile框架API中，还提供了一些实用的方法，下面逐一简单介绍。

1)动态改变页面

在jQuery Mobile中，可以使用动态改变页面，比如从一个页面到另一个页面可以编程来改变.该方法用于页面间跳转，以点击一个链接或者提交表单的形式出现，比如如下代码：

在上面的代码中，在my-list的listview中，动态增加了两个链接，一种page-2.html是静态的，而另外一个链接，是当用户点该 链接时，再触发跳转到page-2.html。其中，注意到这里使用的是mobile对象的changepage事件，其中带两个参数，第一个参数是目标 页面 (就是这里的page-2.html),第2个参数是各种跳转的效果，分为如下几个：

transition、 reverse、changeHash、 role、pageContainer、 type、data、reloadPage

下面举出几个相关例子：

  1. //以slideup效果 跳转到 "about us" 页面 
  2. $.mobile.changePage("about/us.html", "slideup"); 
  3. //跳转到 "search results" 页面，提交id为 "search"的表单数据 
  4. $.mobile.changePage({ 
  5. url: "searchresults.php"， 
  6. type: "get"， 
  7. data: $("form#search").serialize() 
  8. }); 

2) 静态加载页面

另外一个$.mobile对象的重要实用方法是loadPage。开发者可以从外部加载一个页面，在渲染后插入到当前页面的DOM中，并且不会影响 到当前显示的页面内容。这个方法可以让我们在不影响当前显示页面的情况下在后台加载页面，这个方法经常用在需要预加载页面的情况下，并且可以通 过$.mobile.changePage()方法来跳转到这个预加载的页面，只需配置URL参数就可以了。例子如下：

Link to another page

3) $.mobile对象的一些实用工具方法

$.mobile对象的一些实用工具方法，小结如下表：

方法名描述

  • $.mobile.path.parseUrl 将一个URL进行解析成带有16个属性的对象
  • $.mobile.path.makePathAbsolute 将文件或目录转变为带绝对路径的形式
  • $.mobile.path.makeUrlAbsolute 将一个相对路径转变为一个绝对路径
  • $.mobile.path.isSameDomain 对比两个URL是否相同
  • $.mobile.path.isRelativeUrl 判断地址是否相对地址
  • $.mobile.path.isAbsoluteUrl 判断地址是否绝对地址
  • $.mobile.path.base 得出URL地址的base部分

 

 

$.mobile.changePage (method)

从一个页面到另一个页面可以编程来改变.该方法用于页面间跳转，以点击一个链接或者提交表单的形式出现， (当那些特性被启用时).

Arguments

to

◆String， url: ("about/us.html")

◆jQuery 对象 ($("#about"))

◆一个指定了两个页面引用的数组[from，to] ，用以在已知的page进行跳转. From 是当前所能看到的页面( 或者是 $.mobile.activePage ).

◆发送表单数据的对象. ({to: url， data: serialized form data， type: "get" or "post"}

transition (string， 过渡效果: "pop"， "slide"，" "none")

reverse (boolean， default: false). 设置为true时将导致一个反方向的跳转.

changeHash (boolean， default: true). 当页面change完成时更新页面的URL hash.

示例:

  1. //以slideup效果 跳转到 "about us" 页面 
  2.  
  3. $.mobile.changePage("about/us.html", "slideup"); 
  4.  
  5. //跳转到 "search results" 页面，提交id为 "search"的表单数据 
  6.  
  7. $.mobile.changePage({ 
  8.  
  9. url: "searchresults.php"， 
  10.  
  11. type: "get"， 
  12.  
  13. data: $("form#search").serialize() 
  14.  
  15. }); 
  16.  
  17. //以pop效果 跳转到 "confirm" 页面 并且在url hash里不记录其历史 
  18.  
  19. $.mobile.changePage("../alerts/confirm.html"， "pop"， false， false); 

$.mobile.pageLoading (method)

显示或隐藏 页面加载消息，该消息由$.mobile.loadingMessage进行配置.

Arguments:

Done (boolean，默认为 false， 这意味着加载已经开始). 设置为True会隐藏 页面加载消息.

示例:

  1. //提示页面加载 
  2.  
  3. $.mobile.pageLoading(); 
  4.  
  5. //隐藏页面加载 
  6.  
  7. $.mobile.pageLoading( true ); 

$.mobile.path (methods， properties)

Utilities for getting， setting， and manipulating url paths. TODO: document as public API is finalized.

$.mobile.base (methods， properties)

Utilities for working with generated base element. TODO: document as public API is finalized.

$.mobile.silentScroll (method)

在不触发scroll事件处理程序的情况下在Y轴上进行滚动.

Arguments:

yPos (number， 默认为 0). 传递任何数字以在Y坐标上进行滚动.

示例:

  1. // Y上滚动 100px 
  2.  
  3. $.mobile.silentScroll(100); 

$.mobile.addResolutionBreakpoints (method)

为min/max width class 添加width折断点 被添加到HTML元素上. (译注:折断点指的是当屏幕或浏览器宽度在到达某个范围时，容器元素将会发生折断现象--比如当宽度为480时2个radiobutton会排成一排，而 宽度改变为320时，2个radiobutton可能会自动折断成两排)

Arguments:

values (number 或者 array). 传递任何数字或者数字数组.

示例:

  1. //添加一个 400px 的分辨率断点 
  2.  
  3. $.mobile.addResolutionBreakpoints(400); 
  4.  
  5. //添加二个分辨率断点 
  6.  
  7. $.mobile.addResolutionBreakpoints([600，800]);
posted @ 2014-08-14 12:24  阳光小屋  阅读(452)  评论(0)  编辑  收藏  举报