jQueryMobile页面跳转应注意的事项

阅读更多

页面跳转:

页面跳转时pagebeforechange事件会被触发两次,通过$(document).bind("pagebeforechange", handleChangePage);来绑定pagebeforechange事件的触发函数handleChangePage(e,data),第一次 触发时data.toPage是到达页面的url,类型是string。第二次触发时data.toPage是e.fn.e.init[1](搞不懂具体 是什么东西)。

第二次触发时可以获取到达页面的信息,因此可以在第二次触发时来增加自己的操作,也就是if(typeof data.toPage != “string”).这时可以用e.target.baseURI来获取到达页面的uri,类型是string,然后就可以分析出参数等一些东西。

利用e.target.find(“pageId”)来获取到达页的相应元素加以控制。

 

“get”方式提交时可以直接解析e.target.baseURI来获取参数

“post”方式提交时可以分析data.options.data来获取参数。也可以在changePage里利用$(“form”).serializeArray()转换为JSON对象(这种方式比较好)或者$(“form”).serialize()转换成字符串。

如果发生中文乱码问题,可以尝试使用decodeURIComponent(str)进行解码。

 

 代码实例:

index.html

 
 
 
Page Title 

 
 
 
 
 





 


 

 
.header.
 

a.html


Open dialog

姓名:

密码:



 
footer
 

a.html




Page Title



 
 
 


href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />








.header.



footer




Jquerymobile加载页面相关知识:

如果采用ajax的方式链接到一个有多page的文档doc1,那么只会加载第一个page,这时就无法在这个page上链接到文档doc1上的其他page了。利用subpage插件可以实现多page文档的加载。

使用ajax方式来跳转到下一个文档时,由于jquerymobile框架的限制不会加载

外面的js和css资源,所以把应当把js和css代码放到
里面。

Jquerymobile中推荐在捕获pageinit事件的函数中来操作page里的元素。例:

$( document).delegate("#aboutPage", "pageinit", function() {

  alert('Apage with an ID of "aboutPage" was just created by jQuery Mobile!');

});

 

预加载页面

1data-prefetch> ...

2、$.mobile.loadPage( pageUrl, { showLoadMsg: false } );

使用单一页面模式时,通过以上两种方式Jquerymobile会在主界面加载后在后台加载预加载的文件,同时会触发pagecreate事件。

这样能够流畅地转移到预加载的页面而不会显示加载的信息

 

缓存页面

保留所有访问过的页面

$.mobile.page.prototype.options.domCache = true;

缓存特定的页面

data-dom-cache="true">
pageContainerElement.page({ domCache: true });

 

 

HashAjax页面驱动模型:

通过Ajax形式来跳转页面时,会触发hashchange 事件,jquerymobile在处理这个事件时会修改location.href的值。

Jquerymobile是通过给页面添加 "ui-page-active" 样式来设置显示的页面的。

 

pushState 插件:

jquerymobile利用 history.replaceState函数将基于hash的长的url转换为更加简洁的完整的文档地址。如果浏 览器不支持 history.replaceState,或者禁用了这一特性,地址栏就会显示基于hash的url(就是带#的url)。

Jquerymobile这时会触发hashchange事件,可以通过$(window).bind("hashchange",function(e){});来进行捕获

可以在文档完全加载前通过设置$.mobile.pushStateEnabled=false来禁用这一特性。

如果不支持ajax的导航模式,或者设置了 rel="external" 或$.mobile.ajaxEnabled=false,则建议禁用这一特性以获得更加连贯的行为。

 

 

 

 

小知识:

一、Jquery页面加载函数写法:

1)

$(document).ready(function(){

         ...

})

 

2)

 

$(function(){

                   ...

})

二、jquerymobile中这种写法

(function(window, undefined ) {

    ...// code goes here

})(window)

前一个括号是声明一个函数,后面的括号是调用这个函数并传参。

函数带undefined参数的目的是防止在外部声明了undefined变量导致错误的引用。

三、使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

history.pushState():改变当前页面的URL,将URL放入浏览器历史里

history.replaceStat():将指定的URL替换当前的URL

如何调用

var state = {

         title: title,

         url: options.url,

         otherkey: othervalue

};

window.history.pushState(state,document.title, url);

如何响应浏览器的前进、后退操作

window对象上提供了onpopstate事件,上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

window.addEventListener('popstate',function(e){

  if (history.state){

         var state = e.state;

//do something(state.url, state.title);

  }

}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

你可能感兴趣的:(jquery,mobile)