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.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两个分支的测试页)

mobilebone.js使用笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  3. js读书笔记

    js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...

  4. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  5. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  6. mobilebone.js 移动web APP单页切换骨架

    轻便体积小 原生无依赖 插件可扩展 设计无限制 动效可定制 动静两相宜 能进亦能退 桌面也兼修 一句话功能简介跟传统网页浏览的差别仅仅在于无刷新! 例如,我们浏览首页,首页上有个如下HTML链接: & ...

  7. node.js系列笔记之node.js初识《一》

    node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...

  8. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  9. WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

随机推荐

  1. Cannot assign to 'self' outside of a method in the init family

    今天在重写父类的init方法时报错如下: error:Cannot assign to 'self' outside of a method in the init family 这种问题以前从来没有 ...

  2. Tornado 异步客户端

    前言 Tornado是很优秀的非阻塞式服务器,我们一般用它来写Web 服务器,据说知乎就是用Tornado写的. 如果对tornado源码不是很了解,可以先看一下另一篇文章: http://yunji ...

  3. H5-考试判断题

    1.所有的元素设置了浮动后都可以设置宽高. 2.行元素都不能设置宽高跟上下边距 3.所有的css样式优先级中“!important”优先级最高(及其不推荐使用) 4.改变元素的transition值, ...

  4. 【转】sudo命令情景分析

    文章转自:http://www.cnblogs.com/hazir/p/sudo_command.html Linux 下使用 sudo 命令,可以让普通用户也能执行一些或者全部的 root 命令.本 ...

  5. HP 7440老机器重启

    一大早内存就报内存100% 处理流程 1.kmeminfo -u | more ,找出内存占用过大的进程ID --------------------------------------------- ...

  6. VS2015 建立C++ dll库文件

    最近在写一个图片处理,正好用到C++封装DLL给C#调用,一下是总结:   建立一个C++的Win32DLL,这里要注意选择"Export symbols"导出符号.点击完成. 如 ...

  7. C#读写xml文件的常用方法

    已知有一个XML文件(bookshop.xml)如下: <?xml version="1.0" encoding="gb2312" ?> <b ...

  8. Redis在CentOS6.4中的安装

    首先,介绍一下Redis数据库.Redis是一种面向“键/值”对数据类型的内存数据库,可以满足我们对海量数据的读写需求. 1)redis的键只能是字符串: 2)redis的值支持多种数据类型: a:字 ...

  9. [Leetcode][JAVA] Best Time to Buy and Sell Stock I, II, III

    Best Time to Buy and Sell Stock Say you have an array for which the ith element is the price of a gi ...

  10. 基于VC的声音文件操作(二)

    (二)VC的声音操作 操作声音文件,也就是将WAVE文件打开获取其中的声音数据,根据所需要的声音数据处理算法,进行相应的数学运算,然后将结果重新存储与WAVE格式的文件中去:可以使用CFILE类来实现 ...