我正在使用phonegap + jquery mobile，并且有一个可以工作的提交功能，提交后它会转换到另一个页面。这些页面是内部页面，例如 data-role="pages"就像 jquery mobile 使用的那样。问题是，在它最终转换到正确的内部页面之前，它会瞬间显示第一页的 data-role="pages"设置。它并不会阻止它工作，我只是试图阻止它闪烁第一页，因为它不相关，并使其正确转换到正确的页面。这是我的 JavaScript:
function addarticle(){
var truth=$("#addform").validate().form()
if(truth==true){
var headlinetemp=$('#headline').val();
var articletemp=$('#article').val();
navigator.notification.activityStart();
$.ajax({
type:'POST',
url: "http://server.net/droiddev/backbone1/index.php/welcome/addarticle/",
data: { 'headline': headlinetemp, 'article': articletemp},
success:function(){
$('#headline').val('');
$('#article').val('');
$.mobile.changePage($('#thanks'), { transition: "slide"});
//above is suppose to take you to thank you page without blinking the first page
navigator.notification.activityStop();
},
error:function(xhr){
navigator.notification.activityStop();
alert('Error: Article was not added.');
}
});
}
else{alert('Please Correct the Form');}
}
这是 html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<style type="text/css"> #ajaxarea1{width:308px;
display:block;
margin:2px auto;
height:50px;
overflow:hidden;}
#errorarea ul li{ color:red;}
.center{text-align:center;}
</style>
</head>
<body onload="init()" style="">
<!-- Start of first page -->
<div data-role="page" id="foo" data-title="Page Foo" data-theme="d" >
<div data-role="header" data-theme="d" data-position="fixed">
<h1>Foo</h1><a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-iconpos="notext">Back</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar" data-role="button" data-theme="d" data-transition="slide">bar</a></p>
<a href="#addart" data-role="button" data-theme="d" >Add Article</a>
<!--<input type="text" id="numinput" placeholder="Enter a number.."></input>-->
<div id="ajaxarea1"><p>This should change by hitting the button below</p></div>
<button type="button" id="calcbtn" onclick="change_ajaxarea1()">Ajax call</button>
</div><!-- /content -->
</div>
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="thanks" data-theme="d">
<p> testing thank you page!</p>
</div>
<div data-role="page" id="bar" data-theme="d" data-title="Page bar ya fool!">
<div data-role="header" data-theme="d">
<h1>Bar</h1>
<a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
</div><!-- /header -->
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
<a href="http://server.net">Test ajax</a>
<div style="margin-top:10px;"><input type="text" placeholder="Testing placeholder.." style=""></input></div>
</div><!-- /content -->
<!--<div data-role="footer" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The footer is over here and i hope this doesnt get cut off. </p>
</div> -->
<!-- /footer -->
</div><!-- /page -->
<!-- Start of third(add) page -->
<div data-role="page" id="addart" data-theme="d" data-title="Page bar ya fool!">
<div data-role="header" data-theme="d">
<h1>Add article</h1>
<a href="#" data-role="button" style="float:left;" data-rel="back" data-icon="arrow-l" data-theme="d" data-iconpos="notext">Back</a>
</div><!-- /header -->
<div data-role="content">
<form id="addform" style="text-align:center;"> <div id="errorarea"><ul>
</ul></div><label for="Headline">Headline</label><br/><input type="text" name="Headline" title="Enter a title for the Headline at least 5 chars" class="required" id="headline" style="margin: 10px auto 20px auto;" placeholder="enter article headline.."></input>
<br/>
<label for="Article">Article</label><br/><textarea cols="40" rows="8" name="Article" id="article" class="required" title="Enter a article" name="textarea" style="margin: 10px auto 20px auto;" placeholder="enter article content.." id="textarea"></textarea>
<br/>
<input data-inline="true" style="display:inline-block;clear:both;text-align:center;" type="submit" value="Add Article" onclick="addarticle()"></input>
</form>
</div>
<!-- /content -->
<!--<div data-role="footer" data-position="fixed">
<p style="width:100%;margin:0 auto;display:block;padding:5px;">The footer is over here and i hope this doesnt get cut off. </p>
</div> -->
<!-- /footer -->
</div><!-- /page -->
</body>
</html>
我希望我的问题已经说清楚了。谢谢
最佳答案
对于页面加载时所有闪烁的内容，请在 head 标记中插入:
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no" />;
这应该可以解决任何问题。
关于提交后过渡期间jquery移动页面闪烁，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7543815/