mobilebone单页面插件加强自定义根目录

技术分享4,963 人阅读

近期在研究微信开发,发现之前那种PC端的WEB网页全页刷新的方式,在移动端体验起来非常不方便,因为在移动端因为屏幕小,显示一些其它内容时,需要加载另一个页面,然后后退回来。

一开始我用 jquery-pjax  这个插件(git地址),在页面定义一个内容区域,然后加载内容后把之前的内容替换掉,本来一开始用得满爽的,后来我用上了一个 knob 插件(一个圆盘进度条,其原理是用canvas画图),发现我加载其它页面后,再后退,之前knob渲染的图像不见了。所以我猜pjax它应该是将原内容区域的html内容缓存起来,后退时,又将内容恢复回来,可是 canvas恢复回来时是空的。

发现太麻烦了,还是重新找找有没有符合我要求的插件,几经搜索,让我发现了这个国产插件 mobilebone(git地址),非常不错的一个插件,跟我想象中要求的差不多。

它跟 jquery-pjax 插件不同的是,它是将 ajax 加载的内容重新装在一个 page 里挡提之前的内容,这种方式就不会出现之前那种现象了。

具体使用方法我就不介绍了,大家可以看它的git里面介绍,全是中文的,看一下就懂了,我要写的是我对它的修改,因为我发现它的作者好久不对它进行更新了。。。

 

因为我用的是Thinkphp 框架,所有的网址是/index.php?s=/admin/admin/index 这样,都是以index.php为根目录,我发现 mobilebone这个插件,它 ajax加载的网页如果是同一个根目录的,它就会将同一个根目录的page页面替换掉,结果会出现一个问题,就是我加载一个页面后,在加载后的页面上再加载其它页面,然后点后退,会出现空白页,因为都是同一个根目录,所以后面加载的页面将之前页面给替换掉了。

所以我对源文件mobilebone.js做了以下修改

这样修改后,只要在 a 标签上加上data-pageid=不同的值,插件里就会以pageid 为根目录区分 page了,哈哈哈!

 

后来我又用上了jquery-weui 的tab,里面它自带了切换,不过同时用上mobilebone的话,就会重复跳转了,我希望加个属性让mobilebone对我这个链接不起作用

这样修改后,只要我加上data-init=’false’后就可以了,哈哈哈!