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

我在html/css/javascript中使用phonegap構建應用程序。使用jquery mobile和phonegap的應用程序的頁面轉換

所以，我第一次想要簡單的頁面到頁面導航。我tryed這一點：

指數：

<!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頁面加載很慢和數據轉換= 「幻燈片」似乎被忽略。

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

，我真的不明白。 HTML文件不是本地存儲的嗎？那麼爲什麼要做XMLHtppRequest呢？

我的問題是：如何獲得一個良好的頁面轉換（快速和效果）？

來源

2012-10-15 Klaasvaak

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

屬性rel="external"禁用阿賈克斯導航，跳過過渡效果，並刷新你的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>

讓我知道你的結果。

來源

2012-10-15 09:42:26 Littm

我得到：XMLHttpRequest無法加載文件：/// /test.html。 Access-Control-Allow-Origin不允許Origin null。 – Klaasvaak

set data-ajax =「false」它會工作 – AppMobiGurmeet

錯誤消失了。但仍然沒有轉換 – Klaasvaak

嘗試this由Piotr Walczyszyn提供的解決方案。強烈建議任何人一起使用Jquery mobile和Phonegap。

來源

2013-03-12 11:56:14

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

回答

相關問題