JQueryMobile開發Cordova時多頁應用模式

在Cordova官網上推薦開發Cordova手機時使用單頁模式，結合JQueryMobile時，發現有點不知道如何實施單頁模式，若是把全部頁面都寫在主頁中，那主頁將會很大，大到不可維護，但是如何才能夠作才能夠利用JQueryMobile中的ajax導航優點呢？本文結合本身開發的一個項目，簡單介紹一下JQueryMobile開發多頁應用模式的方式。
JQueryMobile的基本頁面框架就是有不少「page」組成，每個page會由框架加載到頁面中，其餘頁面將不可見。除了「page」外還有「panel」和「dialog」能夠實現頁面的浮動效果。
div帶有data-role=」page」屬性，將是一個page，那麼如何把這些頁面分開到不一樣的html文件中呢？其實很簡單：把不一樣的page寫到不一樣的html文件中，在頁面切換時，直接使用就有href作跳轉就能夠了，也能夠經過js跳轉：

$(':mobile-pagecontainer').pagecontainer("change", "reader.html", {transition:"slidefade"});

老的版本使用changeto方法，1.4.5版本提示該方法已通過時，就再也不此處在作說明。
經過JQueryMobile加載的子頁面時不須要在「page」外寫多餘的代碼，這些代碼不會被加載（只有「page」的內容會經過框架插入到當前dom中），若是是子頁面須要的js或css，能夠添加到page的代碼中，如：

<div data-role="page">
<script> //這裏的代碼會在頁面加載時執行 </script>
<script src="js/test.js"></script>
</div>

或所有添加到首頁的頁面中，這樣也能夠加快頁面在用戶觸發的速度。
在Cordova中，推薦單頁模式的理由是頁面切換時，會須要從新加載設備驅動的js，這樣會比較慢，具體能夠參考Cordova的官網最佳實踐。

這樣就能夠合理的組織多個頁面了。

版權聲明：本文爲博主原創文章，未經博主容許不得轉載。