目前在做使用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,
});
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
