jquery mobile 頁面跳轉(zhuǎn)方法

quasiceo 2015-03-22

展開全文

jquery mobile 頁面跳轉(zhuǎn)方法

發(fā)表于2年前(2013-05-22 18:02) 閱讀（7258） | 評論（2） 4人收藏此文章, 我要收藏

贊0

如果使用JavaScript代碼切換當(dāng)前顯示的頁面，可以調(diào)用jQuery Mobile中的changePage()方法,。該方法可以設(shè)置跳轉(zhuǎn)頁面的URL地址,、跳轉(zhuǎn)時的動畫效果和需要攜帶的數(shù)據(jù)，接下來通過一個簡單的實例詳細說明該方法的使用過程,。

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

1. 功能說明

新建一個HTML頁面,，在頁面中顯示“頁面正在跳轉(zhuǎn)中…”文字，然后調(diào)用changePage()方法,，從當(dāng)前頁以“slideup”的動畫切換效果跳轉(zhuǎn)到“about.htm”頁面,。

2. 實現(xiàn)代碼

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

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

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Mobile 跳轉(zhuǎn)頁面</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>跳轉(zhuǎn)頁面</h1></div>
　　<div data-role="content">
　　     <p>頁面正在跳轉(zhuǎn)中...</p>
　　</div>
　　<div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
　</div>
</body>
</html>

3. 頁面效果

該頁面在Opera Mobile Emulator 12.0下執(zhí)行的效果如圖2-8所示,。

4. 源碼分析

在本實例中，由于changePage()方法在頁面加載時被執(zhí)行,，因此,，在瀏覽主頁面時，便直接跳轉(zhuǎn)至目標(biāo)頁“about.htm”,；使用changePage()方法除了可以跳轉(zhuǎn)頁面外,，還能攜帶數(shù)據(jù)傳遞給跳轉(zhuǎn)的目標(biāo)頁，如下面代碼所示：
$.mobile.changePage("login.php",
{ type: "post",
data: $("form#login").serialize()
},
"pop", false, false
)

上述代碼表示：將Id號為“l(fā)ogin”的表單數(shù)據(jù)進行序列化后,，傳遞給“l(fā)ogin.php"頁面進行處理。另外,，“pop”表示跳轉(zhuǎn)時的頁面效果,，第一個“false”值表示跳轉(zhuǎn)時的方向，如果為“true”則表示反方向進行跳轉(zhuǎn),，默認值為“false”,；第二個“false”值表示完成跳轉(zhuǎn)后是否更新歷史瀏覽記錄，默認值為“true”，表示更新,。

說明　當(dāng)指定跳轉(zhuǎn)的目標(biāo)頁面不存在或傳遞的數(shù)據(jù)格式不正確時,，都會在當(dāng)前頁面出現(xiàn)一個錯誤信息提示框，幾秒鐘后自動消失,，不影響當(dāng)前頁面的內(nèi)容顯示,。