PhoneGap開發(fā)-解決跳轉(zhuǎn)時閃屏的問題

標(biāo)簽(空格分隔): Android PhoneGap


解決PhoneGap頁面跳轉(zhuǎn)時閃屏的問題可以借助JQ Mobile中使用的方法飘千,首先在html頁面中利用<div>標(biāo)簽編寫多個頁面驳癌,然后通過JS來控制<div>的顯示與隱藏來實現(xiàn)頁面跳轉(zhuǎn)的功能晤揣。以下為一個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代碼控制三個頁面的顯示與隱藏柒凉,就能實現(xiàn)頁面跳轉(zhuǎn)。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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市隐砸,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蝙眶,老刑警劉巖季希,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異幽纷,居然都是意外死亡式塌,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門友浸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來峰尝,“玉大人,你說我怎么就攤上這事尾菇【澄觯” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵派诬,是天一觀的道長劳淆。 經(jīng)常有香客問我,道長默赂,這世上最難降的妖魔是什么沛鸵? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮缆八,結(jié)果婚禮上曲掰,老公的妹妹穿的比我還像新娘。我一直安慰自己奈辰,他們只是感情好栏妖,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著奖恰,像睡著了一般吊趾。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瑟啃,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天论泛,我揣著相機與錄音,去河邊找鬼蛹屿。 笑死屁奏,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的错负。 我是一名探鬼主播坟瓢,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼勇边,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了折联?” 一聲冷哼從身側(cè)響起粥诫,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎崭庸,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體谊囚,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡怕享,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了镰踏。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片函筋。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖奠伪,靈堂內(nèi)的尸體忽然破棺而出跌帐,到底是詐尸還是另有隱情,我是刑警寧澤绊率,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布谨敛,位于F島的核電站,受9級特大地震影響滤否,放射性物質(zhì)發(fā)生泄漏脸狸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一藐俺、第九天 我趴在偏房一處隱蔽的房頂上張望炊甲。 院中可真熱鬧,春花似錦欲芹、人聲如沸卿啡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颈娜。三九已至,卻和暖如春滞伟,著一層夾襖步出監(jiān)牢的瞬間揭鳞,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工梆奈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留野崇,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓亩钟,卻偏偏與公主長得像乓梨,于是被迫代替她去往敵國和親鳖轰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容