随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让我们有点眼花缭乱。
最近刚好比较清闲，所以没事准备撸撸前端的根基javascript,纯属练练手，写个分页，顺便跟大家分享一下
使用方法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>分页效果</title>
<style type="text/css">
#page-coat a{
text-decoration:none;
display: inline;
float: left;
padding: 3px 10px 3px 10px;
overflow: hidden;
border:1px solid #ccc;
color:#999;
margin-right: 5px;
cursor: pointer;
background: #fff;
}
#page-coat a:hover{
border: 1px solid #FF6600;
background-color: #FF6600;
color: #fff;
}
#page-coat span{
display: inline;
float: left;
color:#999;
background: #fff;
}
#page-coat a.lmw-current{
color: #FF6600;
border: 1px solid #FF6600;
background-color: #FFEEE5;
}
</style>
</head>
<body class="l-bg2">
<p id="page-coat">
</p>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
'total':100,
'click':function(e){ //e为当前页码
/* $.get('/php',{"page":e},function(data){
console.log('ok')
})*/
}
}
var page = new pageFunc(conf);
</script>
</html>用原生还是比较麻烦的，为了实现业务，还得去封装一个模仿JQ的.on事件绑定方法。写的比较简陋，一些配置接口没有暴露出来，还可以再抽象暴露。
下载本文