首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jQuery Mobile开发进阶:API扩张介绍

2012-11-04 
jQuery Mobile开发进阶:API扩展介绍全局设置  下面的这些jQuery Mobile列出的API,允许开发者更改其框架的

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

全局设置

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

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

  2、创建自定义命名空间

  3、页面初始化

  4、自定义子页的KEY

  5、设置当前激活页的样式

  6、设置默认页和对话框效果

  7、自定义加载和自定义显示错误信息

  下面逐一进行介绍

?

  继承扩展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完成加载客户端脚本。

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!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.activePage页面

  $.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的帮助文档。

热点排行