目前在做使用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,
});