Phonegap閱讀html文件

我試圖在我的應用程序中獲得良好的頁面轉換。使用HTML和JavaScript。我嘗試了數據轉換屬性，但速度很慢。Phonegap閱讀html文件

我想出的解決方案是讀取html文件並將其粘貼到index.html中，並使用css3動畫進行頁面轉換。

我也與阿賈克斯tryed這一點：

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]

我怎樣才能成功地讀取我的HTML文件，該文件是在WWW文件夾？

來源

2012-10-16 Klaasvaak

我找到答案：

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

有了這個代碼我的的test.html加載到使用id =「第1頁」，這是體內一個div。

我怎麼辦網頁過渡：

在這個例子中，我從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-16 10:44:54 Klaasvaak

Phonegap閱讀html文件

回答

相關問題