1. 程式人生 > >JQuery Mobile 學習筆記2-4:changePage()方法跳轉頁面

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>&copy;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>&copy;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://,也就是本地檔案,所以要將其上傳到伺服器上執行