文章/答案/技术大牛

发布

社区首页 >问答首页 >使用jquery mobile和phonegap的应用程序的页面转换

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

Stack Overflow用户

提问于 2012-10-15 17:23:59

回答 2查看 3.7K关注 0票数 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>

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呢？

我的问题是:我如何获得一个好的页面过渡(快速和有效果)？

javascript

android

html

cordova

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-10-15 17:42:27

您应该从<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>

让我知道你的结果。

票数 3

Stack Overflow用户

发布于 2013-03-12 19:56:15

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/12892684

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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