jQuery Mobile开发进阶：API扩展介绍

最新推荐文章于 2024-08-17 11:32:55 发布

qjbagu

最新推荐文章于 2024-08-17 11:32:55 发布

阅读量887

点赞数

分类专栏： JavaScript android

android 同时被 2 个专栏收录

476 篇文章 2 订阅

订阅专栏

JavaScript

40 篇文章 0 订阅

订阅专栏

目前,jQuery Mobile是在HTML5 移动开发中的一个很不错的框架,它为熟悉Jquery的开发者进行移动开发提供了很大方便。jQuery Mobile使用的是HTML5和CSS3，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API,以供开发者扩展jQuery Mobile框架本身的功能。

准备工作

请先下载最新版本的jQuery Mobile框架(最新版本为1.0.1,下载地址为http://jquerymobile.com/ )。

全局设置

下面的这些jQuery Mobile列出的API，允许开发者更改其框架的默认事件行为

继承扩展jQuery Mobile的初始化事件
创建自定义命名空间
页面初始化
自定义子页的KEY
设置当前激活页的样式
设置默认页和对话框效果
自定义加载和自定义显示错误信息

下面逐一进行介绍

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

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

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

Mobileinit事件绑定，如下所示：

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

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

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

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

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

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

jQuery Mobile创建自定义命名空间

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

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

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

页面初始化

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

 
 <!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>

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属性，比如：

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

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

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

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

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

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

自定义加载及错误信息.

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

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

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

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

深入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()中进行编程即可，如下代码示例：

 
 <!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>

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

jQuery Mobile方向感应事件

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

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

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

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

 
 $(document).ready(function(){ 
$('body').bind('orientationchange', function(event) { 
alert('orientationchange: '+ event.orientation); 
}); 
$('body').trigger('orientationchange'); 
});

jQuery Mobile滚动事件

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

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

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

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

 
 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
  
  下面举出几个相关例子：
  
     
   //以slideup效果 跳转到 "about us" 页面 
$.mobile.changePage("about/us.html", "slideup"); 
//跳转到 "search results" 页面，提交id为 "search"的表单数据 
$.mobile.changePage({ 
url: "searchresults.php"， 
type: "get"， 
data: $("form#search").serialize() 
}); 
  
  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部分
  
  小结
  
  本文中介绍了jQuery Mobile在事件和处理属性方面的一些高级用法，并给出了相关例子，希望对读者有所帮助，更多的帮助请参考jQuery Mobile的帮助文档。