mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
69 lines (65 loc) • 2.45 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>
#container { padding: 0; overflow: hidden; }
.list { position: absolute; width: 100%; height: 100%;
-webkit-animation: .35s ease-in-out forwards;
animation: .35s ease-in-out forwards;
text-align: center; line-height: 60px;
}
.list.out { display: none; }
.footer { background-color: #eee; }
.footer a.active { background-color: #333; color: #fff; }
</style>
</head>
<body>
<div id="pageHome" class="page out">
<ul>
<li><a href="#page1">点击进入一个头尾固定的页面</a></li>
</ul>
<ul>
<li><a href="../index.html" data-ajax="false">« 返回测试引导首页</a></li>
</ul>
</div>
<div id="page1" class="page out">
<div class="header">
<a href="#pageHome" data-rel="back">返回</a>
<h1>首页</h1>
</div>
<div id="container" class="content">
<div id="content1" class="in list">内部内容1</div>
<div id="content2" class="out list">内部内容2</div>
<div id="content3" class="out list">内部内容3</div>
</div>
<div class="footer">
<h4><a href="#content1" class="active" data-rel="auto" data-container="container" data-classpage="list">内容1</a></h4>
<h4><a href="#content2" data-rel="auto" data-container="container" data-classpage="list">内容2</a></h4>
<h4><a href="#content3" data-rel="auto" data-container="container" data-classpage="list">内容3</a></h4>
<h4><a href="ajax-page.html" data-rel="auto" data-container="container" data-classpage="list">ajax内容4</a></h4>
</div>
</div>
<script src="../../src/mobilebone.js"></script>
<script>
Mobilebone.callback = function(page_in, page_out) {
var index_in = page_in.innerHTML.replace(/\D/g, ""), index_out;
var footerLinks = document.querySelectorAll(".footer a");
var ele_link_in = footerLinks[index_in - 1], ele_link_out = null;
if (ele_link_in && page_in.classList.contains("list")) {
ele_link_in.classList.add("active");
}
if (page_out && page_out.classList.contains("list")) {
index_out = page_out.innerHTML.replace(/\D/g, "");
if (ele_link_out = footerLinks[index_out - 1]) {
ele_link_out.classList.remove("active");
}
}
}
</script>
</body>
</html>