@52fhy 2015-09-25T12:08:51.000000Z 字数 4750 阅读 594

mobilebone.js使用笔记

JavaScript

mobilebone.js使用笔记

mobilebone.js主要用来是网页呈现单页效果，添加类似native app的页面切换效果。原理是：当打开a链接里的页面时，不再以传统的新页面打开，而是以ajax-html的方式，将新页面的内容作为一个页面片段追加到原来页面。由于默认的缓存作用，下次打开将瞬间打开子页面。默认切换有切入切除效果。

目录结构

--
  --src   核心文件
    --mobilebone.js
    --mobilebone.css
    --mobilebone.animate.css 附加转场动画
  --example           精湛示例
  --docs              APIs文档
  --test              UI比较挫的测试页面
    index.html        测试引导
    --base-slide      基本切换
    --ajax-html       Ajax请求HTML测试
    --ajax-json       Ajax请求JSON数据测试
    --callback        回调测试
    --transition      其他切换效果测试，animate.css可以关注下
    --fixed-header-footer    固定的头部与底部
    --form-submit     表单提交
    --prevent-default Mobilebone默认行为的中断与介入
    --modular-load    模块化加载测试
    --backbone        与backbone组合使用演示
    --complex   复杂实例，微信模拟

简单使用

代码引入

<link rel="stylesheet" href="mobilebone.css">
<script src="mobilebone.js"></script>

不依赖第三方插件。

建议的网页布局：

<body>
  <div id="pageHome" class="page out"></div>
  <div id="page1" class="page out"></div>
  <div id="page2" class="page out"></div>
  <div id="page3" class="page out"></div>
</body>

其中每个带有class="page"的都视为一个页面片段，默认展示第一个页面片段，即示例里的pageHome，其它子页面被隐藏。id的作用是在返回的时候正确的找到原来的页面。下面的完整例子进行讲解：

test/transition/index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>切换动画</title>
<link rel="stylesheet" href="../../src/mobilebone.css">
<link rel="stylesheet" href="../test.css">
<link rel="stylesheet" href="animate.css">
<style>
.custome.in {
    -webkit-animation: fadein .35s .25s both;
    animation: fadein .35s .25s both;
}
.custome.out {
    -webkit-animation-name: fadeout;
    animation-name: fadeout;
}
</style>
</head>
<body class="turn-flip">
<div id="pageHome" class="page out" data-form="custome">
    <ul>
        <li><a href="#page1">页面1 - fade</a></li>
        <li><a href="#page2">页面2 - flip</a></li>
        <li><a href="#page3">页面3 - turn</a></li>
        <li><a href="#page4">页面4 - flow</a></li>
        <li><a href="#page5">页面5 - slideup</a></li>
    </ul>
    <ul>
        <li><a href="../index.html" data-ajax="false">&laquo; 返回测试引导首页</a></li>
    </ul>
</div>
<div id="page1" class="page out" data-form="fade">
    <a href="#pageHome" data-rel="back">&laquo;返回1</a>
    <p>淡入淡出效果</p>
</div>
<div id="page2" class="page out" data-form="flip">
    <a href="#pageHome" data-rel="back">&laquo;返回2</a>
    <p>弹入弹出效果</p>
</div>
<div id="page3" class="page out" data-form="turn">
    <a href="#pageHome" data-rel="back">&laquo;返回3</a>
    <p>翻页效果</p>
</div>
<div id="page4" class="page out" data-form="flow">
    <a href="#pageHome" data-rel="back">&laquo;返回4</a>
    <p>流入流出效果</p>
</div>
<div id="page5" class="page out" data-form="slideup">
    <a href="#pageHome" data-rel="back">&laquo;返回5</a>
    <p>上移淡出效果</p>
</div>
<script src="../../src/mobilebone.js"></script>
</body>
</html>

访问DEMO页后，我们会发现，只有id="pageHome"的div展示，也就是第一个page类。当点击li里的任意一个子链接会进入对应的页面片段，如#page1。

现在做几点总结：
mobilebone要生效，必须满足
1. 主页面的class必须有page类,out类建议也加上，否则在刷新子页面会出现重叠。
2. 链接必须是a链接，如<a href="#page1">页面1 - fade</a>。其中href是子页面链接，子页面可以是片段，即不包含<head>、css、js等内容。

当然，a链接里还可以添加其它属性。

data-rel="back" 定义返回的方式，可以没有。tab页切换建议值是auto
data-title="标题" 设置子页面标题（适用于加载页面片段）
data-reload="false" 默认是false，为true时子页面每次刷新
data-ajax="false" 避免Ajax加载，使用传统刷新
data-formdata="c=1&d=1" 给子页面传的参数
data-timeout="30000" 设置请求超时时间为30秒。
data-params="datatype=json&timeout=20000&success=fun_success" 自定义参数
data-form="fade" 需要mobilebone.animate.css支持
data-success="globalObject.fun.xxx_ajax_success 请求成功会调用的方法，后面会讲

示例：

<a href="#page1" data-title="子页面" data-reload="false">页面1</a>

有时候我们可能是在js里进行返回到主页面的，这时候没有a链接可以点击，我们可以使用location.href = '#pageHome';方式进行返回，即只要触发点击href里的#pageHome即可，就可以返回对应的id的主页面了。

默认浏览器上的返回按钮会返回到上一个page页面里。

全局设置

Mobilebone.captureLink = true; //捕获a标签，执行Mobilebone过场效果。建议true

此为全局设置，会影响整个页面标签的tap/click行为。但是可以设置data-ajax的值为true还是false做局部重置。

Mobilebone.evalScript = true;//支持内联js。建议true

默认是false，即在子页面写js无效。注意：只会执行内联JS脚本，src外链JS忽略。见API

Mobilebone.captureForm = false; //不自动执行form表单。如果为true，有可能导致表单重复提交。建议false

是否捕获页面上的表单，执行Ajax请求并把返回结果装载成新页面无刷新载入。此为全局设置，影响整个页面。默认为true.

子页面回调

当使用了需要mobilebone.js加载子页面时候，在子页面写js事件将无效。这时候需要在来源页（即主页面）使用需要mobilebone写。

fallback(pageInto, pageOut, response → options)
每次过场页面退出的时候都会执行, v.1.1.4+新增。参数与onpagefirstinto含义一致，不赘述。

上面摘自文档。在主页面我们可以使用普通的事件回调拿到页面进入那时刻的内容，如表单里的数据，但是对于在子页面进行输入再提交的数据取不到。使用Mobilebone.fallback()可以取到。

在Mobilebone.fallback()方法里可以监听到页面退出时刻文档里的内容。

Mobilebone.fallback = function(pageInto, pageOut){
    $('#user_save').click(function(){
		var nickname = $("input[name='nickname']").val();
		var gender = $("input[name='gender']:checked").val();
		$.ajax({
            url: "#",
            data: {'nick':nickname, 'gender':gender},
            dataType: 'json',
            type:'POST',
            success: function(){},
            error: function(){}
        });
    });
  }

#user_save以及"input[name='nickname']"这里都是子页面的内容，是在主页面使用Mobilebone.fallback()获取到的。

pageOut为子页面退出（用户点击返回按钮）时候的文档DOM。使用console.log(pageOut)可以打印输出。

文档上的示例：

Mobilebone.callback = function(pagein) {
    // NOT: var element = document.querySelector("#ID");
    var element = pagein.querySelector("#ID");
    // do sth by using elememt...
};

参考：
1. mobilebone.js-mobile移动web APP单页切换骨架 « 张鑫旭-鑫空间-鑫生活
http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/
2.演示：http://rawgit.com/zhangxinxu/mobilebone/master/test/index.html

（前后两个图分别是develop和master两个分支的测试页）