单页切换骨架适用于移动web APP,Hybird混合APP,Phonegap开发：mobilebone.js
jopen
9年前
mobilebone.js
单页切换骨架。适用于移动web APP, Hybird混合APP, Phonegap开发等。
为何需要？
类原生APP的过场体验，适用于这些场景：
1. Phonegap等类似跨移动开发平台，其静态页面都是index.html, 单页面，因此，需要跟原生一样的过场体验。
2. Hybird app开发，原生APP内嵌web APP, 为了两者体验一致，不至于交互太唐突，也需要无刷新过场效果。
3. 就算是纯粹的移动web 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">target page</a>
当tap此元素时候，页面会自动无刷新切换到id为targetPage的页面。你可以控制切换的方向，或者使用Ajax获取HTML或JSON, 可以被seajs, requiejs模块化加载(require('mobilebone'))，可以和Backbone组合使用等。
更多信息请参考这里.
优势？
mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。