基于jquery.page.js实现分页效果

基于jquery.page.js的一款简单的分页效果，供大家参考，具体内容如下

 
 
 
 
 
 
*{ margin:0; padding:0; list-style:none;} 
a{ text-decoration:none;} 
a:hover{ text-decoration:none;} 
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;text-align:center;} 
.tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px; line-height: 25px; padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;} 
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;} 
.tcdPageCode span.disabled{ display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px; color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;} 
 
 
 



 
 
 
 

 
 
 
 
 
 
 
 

调用方法如下：

$(".tcdPageCode").createPage({
pageCount:10,
current:1,
backFn:function(p){
//单击回调方法，p是当前页码
}
});

pageCount：总页数
current：当前页

以下是jquery.page.js源代码：

(function($){ 
  var ms = { 
    init:function(obj,args){ 
      return (function(){ 
 ms.fillHtml(obj,args); 
 ms.bindEvent(obj,args); 
      })(); 
    }, 
    //填充html 
    fillHtml:function(obj,args){ 
      return (function(){ 
 obj.empty(); 
 //上一页 
 if(args.current > 1){ 
   obj.append('上一页'); 
 }else{ 
   obj.remove('.prevPage'); 
   obj.append('上一页'); 
 } 
 //中间页码 
 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
   obj.append(''+1+''); 
 } 
 if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ 
   obj.append('...'); 
 } 
 var start = args.current -2,end = args.current+2; 
 if((start > 1 && args.current < 4)||args.current == 1){ 
   end++; 
 } 
 if(args.current > args.pageCount-4 && args.current >= args.pageCount){ 
   start--; 
 } 
 for (;start <= end; start++) { 
   if(start <= args.pageCount && start >= 1){ 
     if(start != args.current){ 
obj.append(''+ start +''); 
     }else{ 
obj.append(''+ start +''); 
     } 
   } 
 } 
 if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ 
   obj.append('...'); 
 } 
 if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ 
   obj.append(''+args.pageCount+''); 
 } 
 //下一页 
 if(args.current < args.pageCount){ 
   obj.append('下一页'); 
 }else{ 
   obj.remove('.nextPage'); 
   obj.append('下一页'); 
 } 
      })(); 
    }, 
    //绑定事件 
    bindEvent:function(obj,args){ 
      return (function(){ 
 obj.on("click","a.tcdNumber",function(){ 
   var current = parseInt($(this).text()); 
   ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); 
   if(typeof(args.backFn)=="function"){ 
     args.backFn(current); 
   } 
 }); 
 //上一页 
 obj.on("click","a.prevPage",function(){ 
   var current = parseInt(obj.children("span.current").text()); 
   ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); 
   if(typeof(args.backFn)=="function"){ 
     args.backFn(current-1); 
   } 
 }); 
 //下一页 
 obj.on("click","a.nextPage",function(){ 
   var current = parseInt(obj.children("span.current").text()); 
   ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); 
   if(typeof(args.backFn)=="function"){ 
     args.backFn(current+1); 
   } 
 }); 
      })(); 
    } 
  } 
  $.fn.createPage = function(options){ 
    var args = $.extend({ 
      pageCount : 10, 
      current : 1, 
      backFn : function(){} 
    },options); 
    ms.init(this,args); 
  } 
})(jQuery); 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。