mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
124 lines (114 loc) • 4.14 kB
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">
<style>
p { font-size: 14px; color: #666; }
.text-shadow { text-shadow: 1px 1px #eee; }
</style>
</head>
<body>
<div id="pageHome" class="page out" data-onpagefirstinto="home" data-animationstart="start" data-animationend="end">
<h2>主页</h2>
<ul>
<li><a href="#page1">页面1</a></li>
<li><a href="#page2">页面2</a></li>
<li><a href="#page3">页面3</a></li>
<li><a href="#page4">页面4 - mergeCallback测试</a></li>
</ul>
<ul>
<li><a href="../index.html" data-ajax="false">« 返回测试引导首页</a></li>
</ul>
<p></p>
</div>
<div id="page1" class="page out" data-callback="callback" data-params="animationstart=start&animationend=end">
<a href="#pageHome" data-rel="back">«返回1</a>
<p></p>
</div>
<div id="page2" class="page out" data-params="root=window&onpagefirstinto=callback_page">
<a href="#pageHome" data-rel="back">«返回2</a>
<p>该页面首次载入，按钮会被居中</p>
</div>
<div id="page3" class="page out" data-root="callback_page.test_obj" data-animationend="random_bgcolor">
<a href="#pageHome" data-rel="back">«返回3</a>
<p class="text-shadow">预期效果为每次动画载入随机灰度背景色</p>
</div>
<div id="page4" class="page out" data-root="window" data-fallback="fallbackJoin">
<a href="#pageHome" data-rel="back">«返回4</a>
<div><input type="checkbox" id="mergeCallback" checked style="width:16px; height:16px;"><label for="mergeCallback">mergeCallback为true</label></div>
<p></p>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
FUN = {
time: function() {
var date = new Date();
return [date.getHours(), date.getMinutes(), date.getSeconds()].join(":");
},
status: {
into: "进入",
out: "离开"
},
callback: function() {
console.log(this.status.into = "回调执行！this对应的是Fun!");
},
home: function(pageInto, pageOut, options) {
pageInto.querySelector("p").innerHTML += "首次载入时间是：" + this.time() + "<br>";
},
start: function(page, into_or_out, options) {
page.querySelector("p").innerHTML += "页面即将进行"+ this.status[into_or_out] +"动画，时间是：" + this.time() + "<br>";
},
end: function(page, into_or_out) {
page.querySelector("p").innerHTML += "页面"+ this.status[into_or_out] +"动画完成，时间是：" + this.time() + "<br>";
}
};
// 2014-12-28新增回调合并时候的上下文测试
Mobilebone.callback = function() {
// 上下文为当前page回调所在的对象，例如本测试页面：
// 1. 默认为Fun;
// 2. page2因为root=window, 因此上下文为window
// 3. 页面3则是 callback_page.test_obj
// 需要注意的是，如果存在回调合并的情况，其公用同一个上下文this, 值同上规则
console.log("全局回调上下文this: " + this.time);
console.log(this);
};
Mobilebone.onpagefirstinto = function(pageinto) {
console.log("global: onpagefirstinto");
};
Mobilebone.animationstart = function(page) {
console.log("global: animationstart");
};
window.callback_page = function(page) {
// 按钮居中
page.style.textAlign = "center";
};
callback_page.test_obj = {
random_bgcolor: function(page, into_or_out) {
if (into_or_out == "into") {
page.style.backgroundColor = "rgba(0,0,0,."+ Math.round(Math.random() * 10) +")";
}
}
};
Mobilebone.rootTransition = FUN;
var flag_fallback = "not";
Mobilebone.fallback = function(pagein, pageout) {
if (pageout.id == "page4") {
flag_fallback = "page4";
} else {
flag_fallback = "not";
}
};
var fallbackJoin = function(pagein, pageout) {
flag_fallback += '-merge';
pageout.querySelector("p").innerHTML = flag_fallback;
};
document.getElementById("mergeCallback").onclick = function() {
Mobilebone.mergeCallback = Boolean(this.checked);
};
</script>
</body>
</html>