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">« 返回测试引导首页</a></li>
</ul>
</div>
<div id="page1" class="page out" data-form="fade">
<a href="#pageHome" data-rel="back">«返回1</a>
<p>淡入淡出效果</p>
</div>
<div id="page2" class="page out" data-form="flip">
<a href="#pageHome" data-rel="back">«返回2</a>
<p>弹入弹出效果</p>
</div>
<div id="page3" class="page out" data-form="turn">
<a href="#pageHome" data-rel="back">«返回3</a>
<p>翻页效果</p>
</div>
<div id="page4" class="page out" data-form="flow">
<a href="#pageHome" data-rel="back">«返回4</a>
<p>流入流出效果</p>
</div>
<div id="page5" class="page out" 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...
};
参考:
- 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使用笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- js读书笔记
js读书笔记 基本类型的基本函数总结 1. Boolean() 数据类型 转换为true的值 转换为false的值 Boolean true false String 任何非空字符串 "&q ...
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- mobilebone.js 移动web APP单页切换骨架
轻便体积小 原生无依赖 插件可扩展 设计无限制 动效可定制 动静两相宜 能进亦能退 桌面也兼修 一句话功能简介跟传统网页浏览的差别仅仅在于无刷新! 例如,我们浏览首页,首页上有个如下HTML链接: & ...
- node.js系列笔记之node.js初识《一》
node.js系列笔记之node.js初识<一> 一:环境说明 1.1 Linux系统CentOS 5.8 1.2 nodejs v0.10.15 1.3 nodejs源码下载地址 htt ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
随机推荐
- iframe自动适应高度
iframe代码,注意要写ID <iframe src="test.html" id="main" width="700" heigh ...
- android Studio项目运行时报错“Could not identify launch activity: Default Activity not found”
出现红色的小叉叉,有点蒙圈的感觉 其实只是因为AndroidManifest.xml里面没有设置运行初始的activity <activity android:name=".MainA ...
- 在spark中操作mysql数据 ---- spark学习之七
使用spark的 DataFrame 来操作mysql数据. DataFrame是比RDD更高一个级别的抽象,可以应用SQL语句进行操作,详细参考: https://spark.apache.org/ ...
- JavaScript求最大数最小数
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- python学习之路-day1-python基础1
本节内容: Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else ...
- 尽量少用if else
Michael Feathers是Object Mentor International公司的技术顾问.他的工作不仅是技术开发,他还参与对世界各地技术团队进行培训.指导等工作.他曾开发了将JUnit迁 ...
- Ubuntu系统监控cpu memery 磁盘Io次数 IO速率 网卡 运行时间等信息的采集
实验室最近在做的项目要做ubuntu系统监控,要获得系统的一些信息并返回给web服务器. web服务器与ubuntu主机的通信我写的程序用的是socket,至于为什么不用java程序ssh到对应的主机 ...
- freeCodeCamp:Title Case a Sentence
确保字符串的每个单词首字母都大写,其余部分小写. 像'the'和'of'这样的连接符同理. /*思路 将字符串转为小写.toLowerCase() 分割字符串以单词形式组成数组myarr 确保数组中的 ...
- LeetCode(93) Restore IP Addresses
题目 Given a string containing only digits, restore it by returning all possible valid IP address comb ...
- 图层的核心动画(CABaseAnimation)
Main.storyboard // // ViewController.m // 7A14.图层的核心动画 // // Created by huan on 16/2/4. // Copyr ...