jquery怎樣做出分頁效果

這次帶給大家jquery怎樣做出分頁效果，使用jquery做出分頁效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

基於jquery.page.js的一款簡單的分頁效果，供大家參考，具體內容如下

nbsp;html> 
 
 
<meta> 
<title>简单的jQuery分页插件</title> 
<style> 
*{ 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;} 
</style> 
 
 
<br><br><br> 
<p></p> 
<center><pre class="brush:php;toolbar:false"><br> 

  <script></script>  <script></script>  <script> $(".tcdPageCode").createPage({ pageCount:100, current:1, backFn:function(p){ console.log(p); } }); </script>   

呼叫方法如下：

$(".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('<a>上一页</a>'); 
        }else{ 
          obj.remove('.prevPage'); 
          obj.append('<span>上一页</span>'); 
        } 
        //中间页码 
        if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ 
          obj.append('<a>'+1+'</a>'); 
        } 
        if(args.current-2 > 2 && args.current  5){ 
          obj.append('<span>...</span>'); 
        } 
        var start = args.current -2,end = args.current+2; 
        if((start > 1 && args.current  args.pageCount-4 && args.current >= args.pageCount){ 
          start--; 
        } 
        for (;start = 1){ 
            if(start != args.current){ 
              obj.append('<a>'+ start +'</a>'); 
            }else{ 
              obj.append('<span>'+ start +'</span>'); 
            } 
          } 
        } 
        if(args.current + 2 = 1 && args.pageCount > 5){ 
          obj.append('<span>...</span>'); 
        } 
        if(args.current != args.pageCount && args.current '+args.pageCount+''); 
        } 
        //下一页 
        if(args.current 下一页'); 
        }else{ 
          obj.remove('.nextPage'); 
          obj.append('<span>下一页</span>'); 
        } 
      })(); 
    }, 
    //绑定事件 
    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);

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

jQuery在新增元素時無法觸發綁定事件怎麼處理

手機號碼的正規驗證公式

JS怎麼實作左右兩邊選單新增與移除

如何用jQuery封裝animate.css程式碼

#

以上是jquery怎樣做出分頁效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！