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

来源：互联网发布：广东11选5遗漏数据编辑：程序博客网时间：2024/05/19 04:53

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.'; 
});