我正在尝试在我的应用程序中获得良好的页面转换。使用 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 文件？
最佳答案
我找到了答案:
$('#page1').load('test.html');
使用此代码，我将 test.html 加载到主体内部的 id="page1"的 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>
登录.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;}
}
关于javascript - Phonegap读取html文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12912456/