使用jquery mobile和phonegap的應用程序的頁面轉換

Question

我正在html / css / javascript中構建一個應用程序，並使用phonegap進行構建。

所以，我首先要擁有簡單的頁面到頁面導航。 我嘗試了這個：

指數：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        <a rel="external" data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

的test.html：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

結果：當我單擊按鈕時，test.html頁面加載非常緩慢，並且data-transition =“ slide”似乎被忽略了。

我找到了有關動態頁面加載的文章： https : //www.ibm.com/developerworks/mydeveloperworks/blogs/94e7fded-7162-445e-8ceb-97a2140866a9/entry/dynamic_page_loading_for_phonegap1?lang=en

我真的不明白。 HTML文件不是存儲在本地嗎？ 那么，為什么要使用XMLHtppRequest？

我的問題是：如何獲得良好的頁面過渡效果（快速且有效果）？

Answer 1

您應該從<a>鏈接中刪除rel="external" 。

屬性rel="external"禁用Ajax導航，跳過過渡效果，並刷新頁面test.html 。

刪除代碼后再嘗試。

index.html ：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">

        <!-- REMOVE THE ATTRIBUTE REL="EXTERNAL" FROM THE LINK -->
        <a data-role="button" href="test.html" data-transition="slide">click me</a>
    </div>

</body>

</html>

test.html ：

<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="jquery-1.8.2.js"></script>
    <script src="jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
</head>

<body id="body">
    <div id="container" data-role="page">
        New page!
    </div>

</body>

</html>

讓我知道您的結果。

Answer 2

試試這個由彼得Walczyszyn解決方案。 強烈建議任何人同時使用Jquery mobile和Phonegap。

使用jquery mobile和phonegap的應用程序的頁面轉換

問題描述

2 個解決方案

解決方案1
3 已采納 2012-10-15 09:42:26

解決方案2
1 2013-03-12 11:56:14

使用jquery mobile和phonegap的應用程序的頁面轉換

問題描述

2 個解決方案

解決方案1 3 已采納 2012-10-15 09:42:26

解決方案2 1 2013-03-12 11:56:14

解決方案1
3 已采納 2012-10-15 09:42:26

解決方案2
1 2013-03-12 11:56:14