JQuery Mobile 學習筆記2-4:changePage()方法跳轉頁面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Murphy_JQueryMobile的changePage()方法跳轉頁面</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.mobile.changePage('about.html',{
transition:'slideup'
});
});
</script>
</head>
<body>
<section data-role="page" id="el">
<header data-role="header"><h1>跳轉頁面</h1></header>
<div data-role="content">
<p>頁面正在跳轉中......</p>
</div>
<footer data-role="footer"><h4>©2013 imurphy.lofter.com</h4></footer>
</section>
</div>
</body>
</html>
about.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Murphy_JQueryMobile的changePage()方法跳轉頁面-about.html</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
</head>
<body>
<section data-role="page" id="el" data-add-back-btn="true">
<header data-role="header"><h1>關於Murphy</h1></header>
<div data-role="content">
<p>頁面直接從當前頁跳轉到“about.html”頁面中</p>
</div>
<footer data-role="footer"><h4>©2013 imurphy.lofter.com</h4></footer>
</section>
</div>
</body>
</html>
changePage()方法此方法除了可以跳轉頁面外,還能帶資料傳遞給跳轉的目標頁,如下面程式碼所示
.post('../visitor/checkRegister.do',{regemail:email,
}, function(data) {
//代表郵箱已註冊
if(data.data.regstatus=="true"){
//$.mobile.changePage("../front/Exhibition_mobile_login.html",{ transition: "pop" });
$.mobile.changePage('../front/Exhibition_mobile_login.html',{
data:"exhibition_id="+exhibition_id,
},
'pop',false,true
);
return false;
} 表示通過ajax實現了visitor/checkRegister.do'跳轉,如果成功的話就跳轉到
"pop"表示跳轉時頁面的效果
第一個"fasle"值表示跳轉·時的方向,如果為“true“表示反方向跳轉,預設值為"fasle"
第二個"fasle"表示完成跳轉後是否更新歷史記錄,預設為"true",表示更新
說明:如果指定跳轉的目標頁不存在或傳遞的資料格式不正確時,都會在當前頁面出現一個錯誤提示框,幾秒之後自動消失,不影響當前頁面的內容顯示
注:當作這個demo時遇到一個問題,就是在跳轉的時候出現了”error loading page“,那是jquery mobile不支援file://,也就是本地檔案,所以要將其上傳到伺服器上執行