【first day】学会用不同方法实现页面自动翻动
今天学会了使用3种方法实现前后页的自动翻动
1、使用mobilebone.js框架
参考作者页面http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/，学习了框架的使用方法。
主要是用了框架中的page out flip类，用法很简单，为每一页添加一个id，让a标签的 href属性等于下一页的id即可。
<!DOCTYPE html> <html> <head> <title>页面滑动效果</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link type="text/css" href="css/mobilebone.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> </head> <body> <div id="page1" class="page out flip" data-title="1"> <p>Page1</p> <a href="#page2" class="btn"><span>next</span></a> </div> <div id="page2" class="page out flip" data-title="2"> <p>Page2</p> <a href="#page3" class="btn"><span>next</span></a> </div> <div id="page3" class="page out flip" data-title="3"> <p>Page3</p> <a href="#page4" class="btn"><span>next</span></a> </div> <div id="page4" class="page out flip" data-title="4"> <p>Page4</p> <a href="#page1"><span>back</span></a> </div> <script type="text/javascript" src="js/mobilebone.js"></script> </body> </html>2、用jquery完成。
虽然框架很好用，但是还是希望能够自己写代码实现一下，这时候，想到了最近学的jQuery里面的hide()和show()。于是，就基于jQuery自己写了一下代码，也能实现。只是也出现了一些问题。最开始，写的js代码是注释掉的那部分，可以看到，非常啰嗦，代码非常重复，于是又重新修改，写了一个遍历来实现，这样代码非常简洁。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不用框架的页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
<link rel="stylesheet" type="text/css" href="css/mobilebone.css">
</head>
<body>
<div id="home" class="page">
<P>This is the home page.</P>
<a class="btn" id="home-btn" data-action="go-page" data-page="home" data-next-page="page1">Next Page</a>
</div>
<div id="page1" class="page out">
<P>This is the first page.</P>
<a class="btn" id="page1-btn" data-action="go-page" data-page="page1" data-next-page="page2">Next Page</a>
</div>
<div id="page2" class="page out">
<P>This is the second page.</P>
<a class="btn" id="page2-btn" data-action="go-page" data-page="page2" data-next-page="page3">Next Page</a>
</div>
<div id="page3" class="page out">
<P>This is the third page.</P>
<a class="btn" id="page3-btn" data-action="go-page" data-page="page3" data-next-page="home">Back</a>
</div>
<div id="page4" class="page out">
<P>This is the last page.</P>
<a class="btn" id="page3-btn" data-action="go-page" data-page="page3" data-next-page="home">Back</a>
</div>
<script type="text/javascript" src="js/jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn").each(function() {
$(this).bind("click", function() {
var currentPage = $(this).attr("data-page");
var nextPage = $(this).attr("data-next-page");
$("#" + currentPage).hide();
$("#" + nextPage).show();
/*
$(this).parent().hide();
$(this).parent().next().show(); */
});
});
/*$("#home-btn").click(function(){
$("#home").css("display","none");
$("#page1").css("display","block")
});
$("#page1-btn").click(function(){
$("#page1").hide();
$("#page2").show();
});
$("#page2-btn").click(function(){
$("#page2").hide();
$("#page3").show();
});
$("#page3-btn").click(function(){
$("#page3").hide();
$("#home").show();
});*/
});
</script>
</body>
</html>