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');

このコードを使用して、本体内にあるid="page1"のdivにtest.htmlをロードします。

ページ遷移の方法：

この例では、login.htmlからtest.htmlに移動して戻ります。両方のhtmlファイルがindex.htmlにロードされます

index.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>

login.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>

test.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 に答える