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

来源：互联网发布：知乎关注谁编辑：程序博客网时间：2024/04/28 07:26

做为一个伸手党，我总会给自己很多理由让自己心安理得的继续伸手。每每谈论起做过的项目，总是“切不到肉”。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:Bate1.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>

最终效果是

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

0 0