mobilebone.js 为何需要?如何使用?插件优势? 介绍
mobilebone.js 是单页切换骨架。适用于移动web APP, Hybrid混合APP, Phonegap开发, 无兼容要求单页PC应用等。
为何需要?
类原生APP的过场体验,适用于这些场景:
1. Phonegap等类似跨移动开发平台,其静态页面都是index.html, 单页面,因此,需要跟原生一样的过场体验。
2. Hybrid app开发,原生APP内嵌web APP, 为了两者体验一致,不至于交互太唐突,也需要无刷新过场效果。
3. 就算是纯粹的移动web APP, 使用无刷新模式也不失为一种不错的选型策略。
4. 对兼容性没有要求的单页PC应用,如类PowerPoint web文档,单页翻屏web站点等。
如何使用?
引入相关的CSS以及JS, 如下:
<link rel="stylesheet" href="mobilebone.css"> <script src="mobilebone.js"></script>
HTML结构需要有一定的要求:
body 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的限制,适用于各个项目各个场景。同时,巧妙提供各类缓存管理、事件管理的接口,就像是个完整健全的骨架体系,就等你来加血添肉了!
mobilebone.js 为何需要?如何使用?插件优势? 官网
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。