使用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的应用程序的页面转换

回答

相关问题