mobilebone
Version:
Bone main for mobile web APP with a sigle page mode by using HTML5 history API router.
51 lines (47 loc) • 1.81 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>
body { background-color: #cd0000; }
</style>
</head>
<body>
<div id="pageHome" class="page out" style="background-color: #f0f3f9;">
<ul>
<li><a href="#&page1" data-reload>页面1-#&page1</a></li>
<li><a href="#page2" data-reload data-formdata="type=0">页面2-#page2-传参</a></li>
<li><a href="#page3?id=1">页面3-传参</a></li>
<li><a>测试菊花：<div class="mask"><s class="loading"></s></div></a></li>
</ul>
<ul>
<li><a href="../index.html" id="back" data-ajax="false">« 返回测试引导首页</a></li>
<li id="result"></li>
</ul>
</div>
<div id="page1" class="page out" style="background-color:#39C;"><a href="#&pageHome" data-rel="back">«返回1</a></div>
<div id="page2" class="page out" style="background-color:#39C;"><a href="#&pageHome" data-rel="back">«返回2</a></div>
<div id="page3" class="page out" style="background-color:#39C;"><a href="#&pageHome" data-rel="back">«返回3</a></div>
<script src="../../src/mobilebone.js"></script>
<!-- 某不知名tap插件兼容测试 -->
<!--
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.tap.js"></script>
-->
<!-- 厂子的frozenjs兼容测试 -->
<script src="zepto.js"></script>
<script src="frozen.js"></script>
<script>
Mobilebone.callback = function (pageInto, pageOut, options) {
console.log(options.query);
};
$("#back").on("tap", function() {
location.href = this.href;
});
</script>
</body>
</html>