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

最新推荐文章于 2022-06-19 16:18:34 发布

九流裱糊匠

最新推荐文章于 2022-06-19 16:18:34 发布

阅读量974

点赞数

分类专栏： js 文章标签：分页 javascript jquery

本文链接：https://blog.csdn.net/z20905547/article/details/19977681

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

做为一个伸手党，我总会给自己很多理由让自己心安理得的继续伸手。每每谈论起做过的项目，总是“切不到肉”。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)' οnclick='$(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)' οnclick='$(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)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
	  		}
	  		elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+","+pc+")'>"+pc+"</a></li>";
	  		return true; 	
	  	})())||(cur>= (pc-5) && (function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(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)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
	  		}
	  		return true; 	
	  	})())||( function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(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)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+","+pc+")'>"+j+"</a></li>";
	  	  }
	  	  elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+","+pc+")'>"+pc+"</a></li>";
	  	  return true; 
	  	}
	  	)();
	  }
	  elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' οnclick='$(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>

最终效果是

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