在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的官网最佳实践。
这样就可以合理的组织多个页面了。