技术开发 频道

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

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

0
相关文章