单页切换骨架 mobilebone.js

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: Android
• 软件首页: http://www.mobilebone.org
• 软件文档: http://rawgit.com/zhangxinxu/mobilebone/develop/docs/index.html

软件介绍

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

每个 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组合使用等。

当然，上面介绍的，只是强大功能的冰山一角，更多信息请参考这里.

插件

1. mobilebone.ppt.js: 可以让web页面表现如幻灯片演示，尺寸自适应。 demo点击这里。

优势？

mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后4~5K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。同时，巧妙提供各类缓存管理、事件管理的接口，就像是个完整健全的骨架体系，就等你来加血添肉了！

本文地址：https://codercto.com/soft/d/4902.html