您的位置：首页 > Web前端 > JavaScript

【菜鸟手打js】第一篇-静态分页条

2014-02-26 14:55 239 查看

做为一个伸手党，我总会给自己很多理由让自己心安理得的继续伸手。每每谈论起做过的项目，总是“切不到肉”。25号在一个代码分享站看到一些大牛的分享，突兀的就想自己也应该写点经常用的js组件，省的每次都得拿别人搜半天、改半天，最后还是不伦不类的。
关于翻页，应该是江湖常用组件排行前十的货了，网上现成的很多，真分页、伪分页、滚动加载等等。对于这个分页的翻页条个人比较中意

这样的。但之前一直懒得去写，都是只给个上一页/下一页按钮，提示下总共多少页，当前你在第几页应付过去。所以就从这个开始先写静态的，慢慢扩展。
先确定下需求，我要分页条最多显示的有效页数是11页（奇数比较对称），这样就分为两种情况总页数不大于11不需要省略号以及大于11时需要省略号。
这样就是小于11时for(var i=1;i<pagecount;i++)一个循环就够。大于11时又有三种分支，当前页不大于6就只有后省略号，小于pagecount-5就只有前省略号，其余的就前后都有。
接下来就开始写了，前前后后花了个把小时把模子写出来了。先贴代码：
js部分

<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
//<!--匿名自执行函数，jquery做实参传入可作为局部变量
(function ($){
//声明为jquery对象方法，便于区别实例化
$.fn.changepage=function (cur,pc){
elereturn="<ul class='pageul'>";
//未找到更好的方法前先用parentNode....
elereturn+=cur>1?"<li class='out'><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+(cur-1)+","+pc+")'>上一页</a></li>":"<li class='out'>上一页</li>";
if(pc<=11){
for (var i = 1; i < pc+1; i++) {
elereturn+=(i==cur)?"<li class='cur'>"+i+"</li>":"<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+i+","+pc+")'>"+i+"</a></li>";
}
}else{//利用js的&&、||执行特点减少分支语句，可读性会降低
(cur<=6 && (function (){
for (var j = 1; j < 11; j++) {
elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
}
elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+","+pc+")'>"+pc+"</a></li>";
return true;
})())||(cur>= (pc-5) && (function (){
elereturn+="<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage(1,"+pc+")'>1</a></li><li><span>....</span></li>";
for (var j = (cur-5); j < pc+1; j++) {
elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
}
return true;
})())||( function (){
elereturn+="<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage(1,"+pc+")'>1</a></li><li><span>....</span></li>";
for (var j = cur-4; j < cur+5; j++) {
elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
}
elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+","+pc+")'>"+pc+"</a></li>";
return true;
}
)();
}
elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+(cur+1)+","+pc+")'>下一页</a></li>":"<li class='out'>下一页</li></ul>";
this.empty();
this.append(elereturn);

}
})($);
$(function(){
//静态实现先这样
$("#page1").changepage(2,15);
$("#page2").changepage(1,50);
})
//-->
</script>

CSS部分：

<style type="text/css">

.turnpage{
font-size:14px;
width:100%;
text-align:center;
}

.turnpage ul li{
width:30px;
height:25px;
border:solid 1px #aaaaaa;
border-radius:3px;
text-align:center;
list-style-type:none;
display:inline;
float:left;
line-height:25px;
}
.turnpage ul li a{
width:100%;
text-decoration:none;
color:#11cccc;

}
.turnpage ul li a:hover {
color:red;
font-size;16px;
}
.turnpage .cur{

background-color:#e3e3e3;
}
.turnpage .out{
width:60px;

}

</style>

js和css没有独立出来放文件里，因为后面肯定得改，代码还短先放一个页面里。

最后HTML部分：

<!DOCTYPE html>
<html>
<!--
*Data:2014-02-05
*Author:Harry
*Version:Bate	1.0
*Tested:IE6、IE8、IE9、IE10、Chrome28.0
*PS:border-radius为Css3新增边框半径属性，IE6下无效
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>翻页</title>
<body>
<div id="page1"  class="turnpage">

</div>
<br/>
<div id="page2"  class="turnpage">

</div>
</body>

</html>

最终效果是

先做个想要的效果，下一步会先改成动态的。慢慢扩展，以后就是我的专属代码了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航