Javascript 使用jquery mobile和phonegap的应用程序页面转换_Javascript_Android_Html_Cordova

Javascript 使用jquery mobile和phonegap的应用程序页面转换

javascript android html cordova

Javascript 使用jquery mobile和phonegap的应用程序页面转换,javascript,android,html,cordova,Javascript,Android,Html,Cordova,我正在用html/css/javascript构建一个应用程序，并使用phonegap来构建所以，我首先想做的是简单的逐页导航。我试着这样做：索引： <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.m

我正在用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页面加载速度非常慢，数据转换=“slide”似乎被忽略

我发现了一篇关于动态页面加载的文章：

我真的不明白。HTML文件不是存储在本地吗？那么，为什么要使用XMLHtpRequest呢

我的问题是：如何获得良好的页面转换（快速且有效）？

您应该从

链接中删除

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>

<!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>

让我知道您的结果。

您应该从

链接中删除

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>

<!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>

让我知道你的结果。

试试Piotr Walczyszyn的解决方案。强烈推荐同时使用Jquery mobile和Phonegap的用户

我得到：XMLHttpRequest无法加载file:////test.html. Access-Control-Allow-Origin不允许原点为null。错误已消失。但仍然没有人能把它建立在Phonegap之上。它仍然非常慢，没有页面转换。使用Galaxy Nexus 4.1是否可以打开文件

cordova.xml

，并检查是否有行

？另外，您能确认您的html文件

index.html

和

test.html

都在

assets/www

文件夹中吗？我还没有那个文件。所以我做了它，它现在被称为config.xml，顺便说一句。现在正在显示转换！但它仍然非常慢。我得到：XMLHttpRequest无法加载file:////test.html. Access-Control-Allow-Origin不允许原点为null。错误已消失。但仍然没有人能把它建立在Phonegap之上。它仍然非常慢，没有页面转换。使用Galaxy Nexus 4.1是否可以打开文件

cordova.xml

，并检查是否有行

？另外，您能确认您的html文件

index.html

和

test.html

都在

assets/www

文件夹中吗？我还没有那个文件。所以我做了它，它现在被称为config.xml，顺便说一句。现在正在显示转换！但还是很慢。