目前在做使用jquerymobile + cordova来创建hybrid mobile app。
总结一下jquerymobile中的页面切换方式。
方式1：所有html都放在一个index.html中
-
<!DOCTYPE html> -
<html> -
<head> -
<title>jQuery Mobile 多容器页面结构</title> -
<meta name="viewport" content="width=device-width, -
initial-scale=1"/> -
<link href="Css/jquery.mobile-1.0.1.min.css" -
rel="Stylesheet" type="text/css"/> -
<script src="Js/jquery-1.6.4.js" -
type="text/javascript"></script> -
<script src="Js/jquery.mobile-1.0.1.js" -
type="text/javascript"></script> -
</head> -
<body> -
<div data-role="page"> -
<div data-role="header"><h1>天气预报</h1></div> -
<div data-role="content"> -
<p><a href="#w1">今天</a> | <a href="#">明天</a></p> -
</div> -
<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> -
</div> -
<div data-role="page" id="w1" data-add-back-btn="true"> -
<div data-role="header"><h1>今天天气</h1></div> -
<div data-role="content"> -
<p>4～-7℃<br/>晴转多云<br/>微风</p> -
</div> -
<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> -
</div> -
</body> -
</html>
方式2：多个html页面相互切换
-
<!DOCTYPE html> -
<html> -
<head> -
<title>jQuery Mobile 外部页面链接</title> -
<meta name="viewport" content="width=device-width, -
initial-scale=1"/> -
<link href="Css/jquery.mobile-1.0.1.min.css" -
rel="Stylesheet" type="text/css"/> -
<script src="Js/jquery-1.6.4.js" -
type="text/javascript"></script> -
<script src="Js/jquery.mobile-1.0.1.js" -
type="text/javascript"></script> -
</head> -
<body> -
<div data-role="page"> -
<div data-role="header"><h1>天气预报</h1></div> -
<div data-role="content"> -
<p><a href="#w1">今天</a> | <a href="#">明天</a> | <a href="#">后天</a></p> -
</div> -
<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> -
</div> -
<div data-role="page" id="w1" data-add-back-btn="true"> -
<div data-role="header"><h1>今天天气</h1></div> -
<div data-role="content"> -
<p>4～-7℃<br/>晴转多云<br/>微风</p> -
<em style="float:right;padding-right:5px"> -
<a href="about.htm" rel="C">rttop.cn</a>提供 -
</em> -
</div> -
<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> -
</div> -
</body> -
</html>
about.htm内容
-
<div data-role="page" data-add-back-btn="true"> -
<div data-role="header"><h1>关于rttop</h1></div> -
<div data-role="content"> -
<p> -
rttop.cn是一家新型高科技企业，正在努力实现飞翔的梦想。 -
</p> -
</div> -
<div data-role="footer"><h4>©2012 rttop.cn studio</h4></div> -
</div>
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, -
});
原文链接：https://blog.csdn.net/u013905744/article/details/77050830/