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的官网最佳实践。

这样就能够合理的组织多个页面了。

版权声明：本文为博主原创文章，未经博主容许不得转载。