jquerymobile的两种页⾯跳转⽅式⽬前在做使⽤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="bile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="bile-1.0.1.js"
type="text/javascript"></script>
</head>
<body>
jquery是什么功能组件
<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 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 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="bile-1.0.1.min.css"
rel="Stylesheet" type="text/css"/>
<script src="Js/jquery-1.6.4.js"
type="text/javascript"></script>
<script src="bile-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 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 >
<a href="about.htm" rel="C">rttop</a>提供
</em>
</div>
<div data-role="footer"><h4>©2012 rttop 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是⼀家新型⾼科技企业，正在努⼒实现飞翔的梦想。
</p>
</div>
<div data-role="footer"><h4>©2012 rttop 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.ht
ml中引⽤⼀次就可以。
不过要注意的是，如果⼀旦没有按照jquery mobile默认的ajax⽅式进⾏切换，那么页⾯就⽆法加载head内容了，⽐如在js⽂件中使⽤window.location.href= “about.htm”，就只加载了about.htm中div的内容。解决⽅案就是在js⽂件中仍要使⽤jqm的页⾯切换⽅式
//load();
$.mobile.changePage(about.htm, {
allowSamePageTransition: true,
transition: 'none',
reloadPage: true,
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。