在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的代码中，如：

或全部添加到首页的页面中，这样也可以加快页面在用户触发的速度。

在Cordova中，推荐单页模式的理由是页面切换时，会需要重新加载设备驱动的js，这样会比较慢，具体可以参考Cordova的官网。

这样就可以合理的组织多个页面了。

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