目前在做使用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/