0

我正在 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>

测试.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 呢？

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

4

2 回答 2

3

您应该rel="external"从您的<a>链接中删除。

该属性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>

让我知道你的结果。

于 2012-10-15T09:42:26.753 回答
1

试试Piotr Walczyszyn 的这个解决方案。强烈推荐给任何同时使用 Jquery mobile 和 Phonegap 的人。

于 2013-03-12T11:56:14.883 回答