单页面切换插件Mobilebone简介

Mobilebone是国内大牛张旭鑫写的一个单页面切换插件，特点是轻量级，且效果也不错，最近的webAPP项目里用过，暂时没发现有什么坑，特此安利一下，顺便介绍简单用法。

解决问题

移动端webAPP模拟原生应用的各类页面切换效果。

项目的demo：

推荐实践

作者在Mobilebone里提供了多种构造跳转页面的方式，甚至封装了ajax工具方法，以方便实现页面分步加载，但在我我的实践过程中发现还是用它的基本切换最好：主页面与子页面的结构都在一个HTML文件中，即第一次加载后所有页面实际已都存在，我们做页面切换只是让几个标签元素交替显示。
这个其实作者在自己的博客中也提到了，好处是切换更流畅（只异步请求数据，而不是后台拼接好的HTML），也更容易自己控制。作者原文如下：

虽然Mobilebone提供了直接请求JSON数据的方法，并提供了视图渲染接口。但是，以我个人经验，对于实际开发，这种实现策略是不推荐的。我认为更好的实现方法应该是这样的。页面骨架，也就是page主体，也就是一个空div默认就载入，然后所有的切换都是基本切换，而不是Ajax切换。在切换即将开始的时候（回调），您就可以使用自己，例如Zepto的Ajax方法去请求你需要的JSON数据，做你任何想做的事情，完全没有Mobilebone的限制。

页当然，这样做有一点不好的地方是会影响首次加载速度（毕竟所有HTML结构要在一开始就全部加载），这种基本切换适用于子页面内容相对简单的情况，我的项目中子页面的内容基本上是用js生成出来的，在实际上静态的HTML结构就只有个外壳。
html结构：

<div id="pageHome" class="page in"></div>
<div id="pageChild1" class="page out">
    <a href="#pageHome" data-rel="back" class="backto"><span class="backto-mark"></span><span>返回</span></a>
</div>
<div id="pageChild2" class="page out">
.....
</div>

如上的HTML结构就是Mobilebone的基本切换所需的基本结构了，每一个page元素为一个页面，我在pageChild1这个子页面中增加了一个返回按钮，href内填写的是’#’+跳转页面的id，data-rel指定了跳转的过场动画为back（默认的页面切换动画只有左右滑动切换）。
这样从子页面返回主页面当然是没问题的，因为这时没有请求新数据也不需要回调，但当我们从主页面跳到子页面时应该怎么处理呢？我们需要增加回调函数，如下：

1	<a href="#pageChild1" data-reload data-preventdefault="getDetails" id="xxx"></a>

//主页面只有一处点击跳转时
Mobilebone.callback = function(pagein) {
        if(pagein.id == "pageDetails"){
            //判断进入的页面为子页面
        }
    };
//有多处需要跳转时
var getDetails = function(target) {
        if (target != null && target.id != "") {
            //target为点击的元素，可用来传递数据
        }
    }

当主页面跳转子页面只有一处时可以使用Mobilebone提供的公用的callback方法，通过判断进入的页面是子页面则进行数据ajax请求及解析数据。
若有多处跳转，如在列表点击每一项查看详情时则需要data-preventdefault属性指定页面跳转的处理函数，并传入相应的id等参数，同样调用ajax请求数据。

主要API

Mobilebone.callback：进入页面时执行
Mobilebone.fallback：离开页面时执行
分别可以用于页面切换时进入页面请求数据，离开页面清空数据。
每个方法都有pageInto和pageOut参数，表示进入和离开的页面对应的DOM元素对象。
查看在线demo
参考文档

解决问题

项目的demo：

推荐实践

主要API

参考文档