扫一扫分享
mobilebone.js单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 无兼容要求单页PC应用等。
mobilebone设计理念是一个纯UI表现层的JS应用,如果没有mobilebone.js,我们的项目依然是可以运作的,只是形式上是传统的页面跳转。明白这一点,就应该可以理解为何请求页面中的src地址的script不执行了。
这种无侵入的设计理念使得mobilebone更像是一个外挂,一个精美的外衣,日后不喜欢了,直接拿掉就可以,完全不要担心前端变化太快项目跟不上怎么办。同时,保留了传统页面seo友好等优点。
类原生APP的过场体验,适用于这些场景:
引入相关的css以及JS, 如下:
<link rel="stylesheet" href="mobilebone.css">
<script src="mobilebone.js"></script>
HTML结构需要有一定的要求:
body
page
page
page
每个page是个满屏元素, 相当于一个独立的页面。
Mobilebone会自动捕获页面上的a元素,如果其href值存在猫腻,就会触发切换行为。例如:
<a href="#targetPage">目标页面</a>
当click/tap此元素时候,页面会自动无刷新切换到id为targetPage的页面。
也可以使用ajax请求。例如:
<a href="detail.php?id=112">请求详情页</a>
所有ajax请求默认是缓存的,如果你想根据url地址不缓存,可以设置data-reload或者data-reload="true";如果你想根据url根地址不缓存,需要设置data-reload="root"。 你可以控制切换的方向,任意扩展动画类型,可以被seajs, requiejs模块化加载(require('mobilebone')),可以和Backbone组合使用等。
mobilebone.js只做了一件事情,切换。所以,JS文件很小,gzip后4~5K, 而且很灵活,几乎没有任何UI的限制,适用于各个项目各个场景。同时,巧妙提供各类缓存管理、事件管理的接口,就像是个完整健全的骨架体系,就等你来加血添肉了!
手机预览