jquery mobile的两种页面跳转方式

目前在做使用jquerymobile + cordova来创建hybrid mobile app。

总结一下jquerymobile中的页面切换方式。

方式1：所有html都放在一个index.html中

    
    
    
    
    



    
    
天气预报
    
    

         
今天 | 明天
        
    
    
    
©2012 rttop.cn studio
    




    
    
今天天气
    
    

         
4～-7℃
晴转多云
微风
        
    
    
    
©2012 rttop.cn studio
    

方式2：多个html页面相互切换

    
    
    
    
    



    
天气预报
    

         
今天 | 明天 | 后天
    
    
©2012 rttop.cn studio


    
今天天气
    

         
4～-7℃
晴转多云
微风
         
         rttop.cn提供
         
    
    
©2012 rttop.cn studio

about.htm内容

关于rttop

     
   
        rttop.cn是一家新型高科技企业，正在努力实现飞翔的梦想。
     

©2012 rttop.cn studio

jqm页面切换机制mechanism

对于方式1，，在一个页面中，不论相同框架的“page”容器有多少，只要对应的Id 号唯一，就可以通过内部链接的方式进行容器间的切换。在切换时， jQuery Mobile 会在文档中寻找对应“Id”的容器， 然后通过动画的效果切换到该页面中。

对于方式2，单击一个指向外部页面的超级链接（如about.htm) , jQuery Mobile 将自动分析该URL 地址，自动产生一个AJAX 请求。在请求过程中，会弹出一个显示进度的提示框。如果请求成功， jQueryMobile 将自动构建页面结构，注入主页面的内容，同时，初始化全部的jQuery Mobile 组件，将新添加的页面内容显示在浏览器中，如果请求失败，jQuery Mobile 将弹出一个错误信息提示框，数秒后该提示框自动消失，页面也不会刷新。

如果不想采用AJAX 请求的方式打开一个外部页面，只需要在链接元素中将“rel”属性设置为“external”，或data-ajax=false，该页面将脱离整个jQueryMobile 的主页面环境．以独自打开的页面效果在浏览器中显示。

如果采用AJAX 请求的方式打开一个外部页面，注入主页画的内容也是以“page ”为目标，“page”以外的内容将不会被注入主页函中：另外，必须确保外部加载页面URL 地址的唯一性。这也就是说明，其他页面只要写div data-role=page就可以，相同的head不需要重写写，即css及js文件只需要在index.html中引用一次就可以。

不过要注意的是，如果一旦没有按照jquery mobile默认的ajax方式进行切换，那么页面就无法加载head内容了，比如在js文件中使用window.location.href= “about.htm”，就只加载了about.htm中div的内容。解决方案就是在js文件中仍要使用jqm的页面切换方式

//window.location.reload();
$.mobile.changePage(about.htm, {
	allowSamePageTransition: true,
	transition: 'none',
	reloadPage: true,
});