Jua*_*eno 8 jquery jquery-mobile
如果我正确阅读以下文档:http://jquerymobile.com/demos/1.1.0/docs/api/methods.html
使用pageContainer和role应该将一个页面的内容替换为我当前页面,例如,好像它是一个保留页眉和页脚但只更改内容的模板.
我想做一个简单的例子来理解它是如何工作的,但我有一段时间.
这是我的超级简单示例.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="static/css/jquery.mobile-1.1.0.min.css" type="text/css" />
<script type="text/javascript" charset="utf-8" src="static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="static/js/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.mobile.changePage('page2.html',{
'pageContainer': $('#content_container'),
'role':'content'
});
});
</script>
</head>
<body >
<div data-role="page">
<div data-theme="a" data-role="header">
<div data-role="navbar" data-iconpos="top">
My Header
</div>
</div>
<div id='content_container' data-role="content">
<p>Page 1 </p>
</div>
<div data-theme="a" data-role="footer">
My Footer
</div>
</div>
</body>
</html>
这是第2页
<html>
<body>
<div data-role="page">
<p>Page 2</p>
</div>
</body>
</html>
当这个加载时,我没有将"Page 1"替换为"Page 2",而是被重定向到一个新的空页面.任何指向我做错的指示都将不胜感激.
这里有一种通过 API 来完成此操作的方法，不幸的是，直接利用 jquery 的加载并不能保持该方法所保留的元素格式。
$(document).bind('pageload',function(evt,data){
$(document).unbind('pageload');
$(data.page).fadeIn();
});
$.mobile.loadPage('page2.html',{'pageContainer':$('#content_container')});