jquery mobile 頁面跳轉方法

時間 2019-11-13

原文原文鏈接

若是使用JavaScript代碼切換當前顯示的頁面，能夠調用jQuery Mobile中的changePage()方法。該方法能夠設置跳轉頁面的URL地址、跳轉時的動畫效果和須要攜帶的數據，接下來經過一個簡單的實例詳細說明該方法的使用過程。 javascript

實例2-8　使用changePage()方法跳轉頁面 php

1. 功能說明 css

新建一個HTML頁面，在頁面中顯示「頁面正在跳轉中…」文字，而後調用changePage()方法，從當前頁以「slideup」的動畫切換效果跳轉到「about.htm」頁面。 html

2. 實現代碼 java

新建一個HTML頁面2-8.htm，加入代碼如代碼清單2-8所示。 jquery

代碼清單2-8　jQuery Mobile 中的changePage()方法

<!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>
    <script type="text/javascript">
        $(function() {
            $.mobile.changePage("about.htm",
            { transition: "slideup" });
        })
    </script>
</head>
<body>
<div data-role="page" id="e1">
　　<div data-role="header"><h1>跳轉頁面</h1></div>
　　<div data-role="content">
　　     <p>頁面正在跳轉中...</p>
　　</div>
　　<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
　</div>
</body>
</html> web

3. 頁面效果 ide

該頁面在Opera Mobile Emulator 12.0下執行的效果如圖2-8所示。 post

4. 源碼分析動畫

在本實例中，因爲changePage()方法在頁面加載時被執行，所以，在瀏覽主頁面時，便直接跳轉至目標頁「about.htm」；使用changePage()方法除了能夠跳轉頁面外，還能攜帶數據傳遞給跳轉的目標頁，以下面代碼所示：
$.mobile.changePage("login.php",
{ type: "post",
data: $("form#login").serialize()
},
"pop", false, false
)

上述代碼表示：將Id號爲「login」的表單數據進行序列化後，傳遞給「login.php"頁面進行處理。另外，「pop」表示跳轉時的頁面效果，第一個「false」值表示跳轉時的方向，若是爲「true」則表示反方向進行跳轉，默認值爲「false」；第二個「false」值表示完成跳轉後是否更新歷史瀏覽記錄，默認值爲「true」，表示更新。

說明　當指定跳轉的目標頁面不存在或傳遞的數據格式不正確時，都會在當前頁面出現一個錯誤信息提示框，幾秒鐘後自動消失，不影響當前頁面的內容顯示。