您的位置：首页 > 其它

PhoneGap开发-解决跳转时闪屏的问题

2012-04-25 09:01 253 查看
解决PhoneGap页面跳转时闪屏的问题可以借助JQ Mobile中使用的方法，首先在html页面中利用<div>标签编写多个页面，然后通过JS来控制<div>的显示与隐藏来实现页面跳转的功能。以下为一个JQ Mobile页面代码示例：

<!-- Container Page -->
<div data-role="page" data-theme="c" id="containerPage">

<!-- Contact List -->
<div data-role="header" id="hdrList" data-nobackbtn="true">
<h1><img align="top" src=\'#\'" /contacts.png"> Contacts</h1>
<a id="buttonAddContact" data-icon="plus" class="ui-btn-right"
href="javascript:addContact();return false;" data-role="button" data-inline="true">Add</a>
</div>
<div data-role="content" id="contentList" data-theme="c">
<ul data-role="listview" data-dividertheme="c" id="contactSelections"></ul>
</div>
<div data-role="footer" id="ftrList"></div>

<!-- Progress -->
<div data-role="header" id="hdrProgress" data-nobackbtn="true" data-theme="c">
<h1>Processing...</h1>
</div>
<div data-role="content" id="contentProgress" data-theme="c">
<div align="CENTER"><h4>Please wait.</h4></div>
<div align="CENTER"><img id="spin" src=\'#\'" /wait.gif"/></div>
</div>
<div data-role="footer" id="ftrProgress" data-theme="c"></div>

<!-- Create Account -->
<div data-role="header" id="hdrAccount" data-nobackbtn="true" data-theme="c">
<h1>Create Account</h1>
</div>
<div data-role="content" id="contentAccount" data-theme="c">
<div align="CENTER"><img src=\'#\'" /contacts-master-bgd.png"></div>
<div align="CENTER"><h4>Please enter name of the new account for this application</h4></div>
<div align="CENTER">Contacts created with this application will be associated with the new account specified below.
Other contacts can be viewed, however, cannot be deleted or modified with this application.</div>
<div align="CENTER" id="accountDiv" data-role="fieldcontain">
<input id="accountName" type="text" />
</div>
<div align="CENTER">
<a href="javascript:createAccount();return false;" data-role="button"
data-inline="true">Save</a>
</div>
<div align="CENTER"><P> <P> <P> </div>
</div>
<div data-role="footer" id="ftrAccount" data-theme="c"></div>

</div> <!-- Container Page Ends Here -->
其中包含一个容器页面（Container Page）和三个普通页面，分别为Contact List, Progress, Create Account, 然后通过JS代码控制三个页面的显示与隐藏，就能实现页面跳转。JS示例代码如下：
<script>
// Commonly used variables
var contactSelectionsVar;
var hdrListVar;
var contentListVar;
var ftrListVar;
var hdrProgressVar;
var contentProgressVar;
var ftrProgressVar;
var hdrAccountVar;
var contentAccountVar;
var ftrAccountVar;

$(document).ready(function () {
// Initialize commonly used variables
hdrListVar = $('#hdrList');
contentListVar = $('#contentList');
ftrListVar = $('#ftrList');
hdrProgressVar = $('#hdrProgress');
contentProgressVar = $('#contentProgress');
ftrProgressVar = $('#ftrProgress');
hdrAccountVar = $('#hdrAccount');
contentAccountVar = $('#contentAccount');
ftrAccountVar = $('#ftrAccount');
contactSelectionsVar = $('#contactSelections');

showProgress();
contactSupport.getAllContacts('setContactsList','showAccount');
});

function hideList(){
hdrListVar.hide();
contentListVar.hide();
ftrListVar.hide();
}

function showList(){
hideProgress();
hideAccount();
hdrListVar.show();
contentListVar.show();
ftrListVar.show();
}

function hideProgress(){
hdrProgressVar.hide();
contentProgressVar.hide();
ftrProgressVar.hide();
}

function showProgress(){
hideList();
hideAccount();
hdrProgressVar.show();
contentProgressVar.show();
ftrProgressVar.show();
}

function hideAccount(){
hdrAccountVar.hide();
contentAccountVar.hide();
ftrAccountVar.hide();
}

function showAccount(){
hideList();
hideProgress();
hdrAccountVar.show();
contentAccountVar.show();
ftrAccountVar.show();
}
</script>
上面的代码中通过show()和hide()方法显示和隐藏<div>来实现屏幕跳转。经过测试不会出现闪屏的现象。
本文出自 “PhoneGap插件开发” 博客，请务必保留此出处http://prostorys.blog.51cto.com/1522778/843701
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航