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" /div 

 div id="page1" /div 

 div id="page2" /div 

 div id="page3" /div 

 /body 

其中每个带有 的都视为一个页面片段，默认展示第一个页面片段，即示例里的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 

 div id="pageHome" data-form="custome" 

 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 

 li a href="../index.html" data-ajax="false" « 返回测试引导首页 /a /li 

 /ul 

 /div 

 div id="page1" data-form="fade" 

 a href="#pageHome" data-rel="back" «返回1 /a 

 p 淡入淡出效果 /p 

 /div 

 div id="page2" data-form="flip" 

 a href="#pageHome" data-rel="back" «返回2 /a 

 p 弹入弹出效果 /p 

 /div 

 div id="page3" data-form="turn" 

 a href="#pageHome" data-rel="back" «返回3 /a 

 p 翻页效果 /p 

 /div 

 div id="page4" data-form="flow" 

 a href="#pageHome" data-rel="back" «返回4 /a 

 p 流入流出效果 /p 

 /div 

 div id="page5" data-form="slideup" 

 a href="#pageHome" data-rel="back" «返回5 /a 

 p 上移淡出效果 /p 

 /div 

 script src="../../src/mobilebone.js" /script 

 /body 

 /html 

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

现在做几点总结：
mobilebone要生效，必须满足

主页面的class必须有page类,out类建议也加上，否则在刷新子页面会出现重叠。 链接必须是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.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...

};

JS基础教程2——JS实现与基础知识 JS可以写在HTML中 body 标签中并且用 scrpit 标签包裹，但是要注意一定要写在最后面不能写在前面！！！！！ JS还可以写在.js文件中(建议项目中js文件存放在js文件夹中)然后通过 dcrpit scr= 中scr导入js文件即可。