2

我正在尝试在我的应用程序中获得良好的页面转换。使用 HTML 和 JavaScript。我尝试了 data-transition 属性，但速度很慢。

我想出的解决方案是读取 html 文件并将它们粘贴到 index.html 并使用 css3 动画进行页面转换。

我也用ajax试过这个：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    $.ajax({
        url: 'test.html',
        success: function(data) {
            console.log('success');
            console.log(data);
        },
        error: function() {
            console.log('error');
        }
    });
}

日志：

success
[object Document]

如何成功读取 www 文件夹中的 html 文件？

4

1 回答 1

2

我找到了答案：

    $('#page1').load('test.html');

使用此代码，我将 test.html 加载到 id="page1" 的 div 中，该 div 位于主体内部。

我如何进行页面转换：

在此示例中，我从 login.html 导航到 test.html 并返回。两个 html 文件都加载到 index.html 中

索引.html：

    <!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="mycss.css" />
    <script src="phonegap.js"></script>
    <script src="jquery-1.8.2.js"></script>
    <script>
    document.addEventListener("deviceready", onDeviceReady, false);
    var pages = new Array();
    var currentpage;
    var otherpage;

    function onDeviceReady() {
        console.log('deviceReady');
        currentpage = $('#page1');
        otherpage = $('#page2');
        pushPage('login.html');
        document.addEventListener("backbutton", popPage, false);
    }

    function popPage(){
        if(pages.length == 1){
            console.log('exit app end of stack');
            navigator.app.exitApp();
        } else{
            console.log('pop page');
            //swap page vars
            var temp = currentpage;
            currentpage = otherpage;
            otherpage = temp;

            currentpage.load(pages[pages.length - 2]);

            currentpage.removeClass();
            otherpage.removeClass();

            currentpage.addClass("pagePopIn");
            otherpage.addClass("pagePopOut");

            pages.pop();
        }
    }

    function pushPage(url){
        pages.push(url);

        //swap page vars
        var temp = currentpage;
        currentpage = otherpage;
        otherpage = temp;

        currentpage.load(url, function(response, status, xhr){
            currentpage.removeClass();
            otherpage.removeClass();

            currentpage.addClass("pagePushIn");
            otherpage.addClass("pagePushOut");
        });
    }

    </script>
</head>

<body id="body">
    <div id="page1">
    </div>
    <div id="page2">
    </div>

</body>
</html>

登录.html：

<h1>Log in</h1>
<input type="text" />
<input type="password"/>
<button type="button" onclick="pushPage('register.html');">Register</button>
<button type="button" onclick="pushPage('test.html');">Log in</button>

测试.html：

<button type="button" onclick="popPage();">Terug</button>
<h1>Test</h1>
This is a test!</br>
This is a test!</br>

mycss.css：

body{
    padding: 0px;
    margin: 0px;
    background-color: white;
    width: 100%;
    height: 100%;
}

button{
    background-color: #004A91;
    color: #E2007A;
    padding: 15px;
    font-weight: bold;
    font-family: "camingodos-web", "verdana", sans-serif;
    border-style:none;
    min-height: 45px;
}

button:active{
    background-color: red;
}

h1{
    margin: 10px;
    padding: 8px;
    color: #E2007A;
    font-weight: bold;
    font-family: "camingodos-web", "verdana", sans-serif;
}

.pagePopIn{
    padding: 0px;
    margin: 0px;
    position:absolute;
    width:100%;
    -webkit-animation:pagePopInTransition 0.8s;
    animation:pagePopInTransition 0.8s;
}

.pagePopOut{
    padding: 0px;
    margin: 0px;
    position:absolute;
    visibility: hidden;
    width:100%;
    -webkit-animation:pagePopOutTransition 0.8s;
    animation:pagePopOutTransition 0.8s;
}

@keyframes pagePopInTransition{
    0%   {left:-100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@-webkit-keyframes pagePopInTransition /* Safari and Chrome */
{
    0%   {left:-100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@keyframes pagePopOutTransition{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:100%; width:100%; visibility: hidden; opacity: 0.5;}
}

@-webkit-keyframes pagePopOutTransition /* Safari and Chrome */
{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:100%; width:100%; visibility: hidden; opacity: 0.5;}
}

.pagePushIn{
    padding: 0px;
    margin: 0px;
    position:absolute;
    width:100%;
    -webkit-animation:pagePushInTransition 0.6s;
    animation:pagePushInTransition 0.6s;
}

.pagePushOut{
    padding: 0px;
    margin: 0px;
    position:absolute;
    visibility: hidden;
    width:100%;
    -webkit-animation:pagePushOutTransition 0.6s;
    animation:pagePushOutTransition 0.6s;
}

@keyframes pagePushInTransition{
    0%   {left:100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@-webkit-keyframes pagePushInTransition /* Safari and Chrome */
{
    0%   {left:100%; width:100%; visibility: visible;}
    100% {left:0px; width:100%;}
}

@keyframes pagePushOutTransition{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:-100%; width:100%; visibility: hidden; opacity: 0.5;}
}

@-webkit-keyframes pagePushOutTransition /* Safari and Chrome */
{
    0%   {left:0px; width:100%; visibility: visible; opacity: 1;}
    100% {left:-100%; width:100%; visibility: hidden; opacity: 0.5;}
}
于 2012-10-16T10:44:54.947 回答