在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的官網最佳實踐。
這樣就可以合理的組織多個頁面了。
版權聲明：本文為博主原創文章，未經博主允許不得轉載。