jQuery數字分頁效果程式碼例項

admin發表於2017-04-15
jQuery

本章節分享一段程式碼例項，它實現了數字分頁效果。

點選對應數字或者兩端箭頭按鈕可以實現翻頁效果，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.pagingUl {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
}
.pagingUl li {
  float: left;
  width: 30px;
  height: 30px;
  list-style: none;
  text-align: center;
}
.pagingUl li a {
  text-decoration: none;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 28px;
  padding: 0;
  background: #fafafa;
  color: #666;
  font-size: 12px;
  border: 1px solid #ddd;
}
.prv, .next {
  width: 30px;
  height: 30px;
  float: left;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.first, .last {
  width: 30px;
  height: 30px;
  font-size: 12px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.pageTest {
  width: 1000px;
  height: 50px;
  margin-top: 100px;
}
.activP {
  background-color: #367fa9 !important;
  color: #fff !important;
}
.prv, .first {
  border-right: none;
}
.next, .last {
  border-left: none;
}
.prv, .first, .next, .last {
  float: right;
}
.pagingUl li::selection, .pagingUl li a::selection {
  background: transparent;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
(function($){
  $.fn.page = function(options){
    var defaults = {
      pageNumber:10
    };
    var opts = $.extend({},defaults, options);
    var method = {
      init:function(_this){
        var arr = {};
        arr.next = _this.find(".next");
        arr.first = _this.find(".first");
        arr.last = _this.find(".last");
        arr.prev = _this.find(".prv");
        arr.pagingUl = _this.find(".pagingUl");
        arr.li = arr.pagingUl.find("li");
        arr.a = arr.li.find("a");
        arr.activP = arr.li.find(".activP");
        method.nextClick(arr);
        method.prevClick(arr);
        method.liClick(arr);
        method.firstClick(arr);
        method.lastClick(arr);
        method.firstActivP(arr);
      },
      nextClick:function(arr){
        arr.next.on("click",function(){
          arr.num = arr.li.find(".activP").text()-1;
          if(arr.num==arr.li.last().find(arr.a).text()-1){
            arr.li.last().find(arr.a).addClass("activP");
            arr.li.last().siblings("li").find(arr.a).removeClass("activP");
          }
          else if ((arr.num > (parseInt(arr.li.first().find(arr.a).text()) - 2))
            && (arr.num < (parseInt(arr.li.last().find(arr.a).text()) - 1))) {
            arr.a.eq(arr.num).removeClass("activP");
            arr.a.eq(arr.num).parent("li").next().find(arr.a).addClass("activP");
            arr.a.eq(arr.num).parent("li").next().siblings("li").find(arr.a).removeClass("activP");
            arr.num = arr.num+1;
          }
        })
      },
      firstActivP:function(arr){
        arr.li.first().find(arr.a).addClass("activP");
      },
      prevClick:function(arr){
        arr.prev.on("click",function(){
          arr.num = arr.li.find(".activP").text();
          if(arr.num==arr.li.first().find(arr.a).text()){
            arr.li.first().find(arr.a).addClass("activP");
            arr.li.first().siblings("li").find(arr.a).removeClass("activP");
          }
          else if ((arr.num > parseInt(arr.li.first().find(arr.a).text()))
            && (arr.num < (parseInt(arr.li.last().find(arr.a).text()) + 1))) {
            arr.num = arr.num-1;
            arr.a.eq(arr.num).removeClass("activP");
            arr.a.eq(arr.num).parent("li").prev().find(arr.a).addClass("activP");
            arr.a.eq(arr.num).parent("li").prev().siblings("li").find(arr.a).removeClass("activP");
          }
        })
      },
      liClick:function(arr){
        arr.li.on("click",function(){
          $(this).find(arr.a).addClass("activP");
          $(this).siblings("li").find(arr.a).removeClass("activP");
          arr.num = $(this).find(arr.a).text()-1;
        })
      },
      firstClick:function(arr){
        arr.first.on("click",function(){
          arr.li.first().find(arr.a).addClass("activP");
          arr.li.first().siblings("li").find(arr.a).removeClass("activP");
          arr.num = arr.li.first().find(arr.a).text()-1;
        })
      },
      lastClick:function(arr){
        arr.last.on("click",function(){
          arr.li.last().find(arr.a).addClass("activP");
          arr.li.last().siblings("li").find(arr.a).removeClass("activP");
          arr.num = arr.li.last().find(arr.a).text()-1;
        })
      },
      pageNum:function(_this){
        var arr = {};
        arr.pagingUl = _this.find(".pagingUl");
        arr.str = '<ul  class="pagingUl">';
        for(var i = 1;i<opts.pageNumber+1;i++){
          arr.str += '<li><a href="javascript:;">'+i+'</a></li>'
        }
        arr.str += '</ul>';
        _this.find(".next").after(arr.str);
      }
    };
    method.pageNum($(this));
    method.init($(this));
  };
})(jQuery);
$(function () {
  $(".pageTest").page({
    pageNumber: 7
  })
})
</script>
</head>
<body>
<div class="pageTest">
  <div class="last">末頁</div>
  <div class="next">»</div>
  <div class="prv">«</div>
  <div class="first">首頁</div>
</div>
</body>
</html>

相關文章