亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

JQuery的Pager分頁器實(shí)現(xiàn)代碼

 更新時(shí)間：2016年05月03日 11:49:06   作者：康東揚(yáng)  
這篇文章主要為大家詳細(xì)介紹了JQuery的Pager分頁器實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JQuery的Pager分頁器的具體實(shí)現(xiàn)代碼，供大家參考，具體內(nèi)容如下

效果圖：

代碼：

html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>分頁器</title>
 <link href="pager.css" rel="stylesheet"/>
</head>
<body>
 <div id="pager"></div>
 <script src="pager.js"></script>
 <script>
 function doChangePage(obj){
  //TO DO
 }

 var pagerBox = document.getElementById('pager');

 var pager = new Pager({
  index: 1,
  total: 15,
  parent: pagerBox,
  onchange: doChangePage
 });
 </script>
</body>
</html>

css代碼：

.pager-box:after{
 display:block;
 height:0;
 visibility:hidden;
 clear:both;
 content:'';
}
.pager{
 float:left;
 position:relative;
 left:50%;
 font-family:微軟雅黑;
}
.pager a,.pager span{
 position:relative;
 left:-50%;
 display:block;
 float:left;
 margin-left:5px;
 border:1px solid #b6bcc1;
 padding: 5px 10px;
 text-decoration:none;
 color:#b6bcc1;
 border-radius:3px;
}
.pager span{
 border:0;
}
.pager a.js-selected{
 background:#b6bcc1;
 color:#fff;
 cursor:default;
}
.pager a.js-disabled{
 background:#f1f1f1;
 border-color:#f1f1f1;
 cursor:default;
 color:#fff;
}

pager.js代碼

(function(window, undefined){

 /**
 * 創(chuàng)建元素節(jié)點(diǎn)并返回
 */
 function create(tagName, className, parent){
 var element = document.createElement(tagName);
 element.className = className;
 parent.appendChild(element);
 return element;
 }

 /**
 * 數(shù)組消除重復(fù)
 */
 function clearRepeat(arr){
 var obj = {},
  result = [];
 for(var i = 0, len = arr.length; i < len; i++){
  obj[arr[i]] = 1;
 }
 for(var i in obj){
  result.push(i);
 }
 return result;
 }

 /**
 * 添加類名
 */
 function addClassName(element, className){
 var aClass = element.className.split(' ');
 aClass.push(className);
 aClass = clearRepeat(aClass);
 element.className = aClass.join(' ');
 }
 /**
 * 刪除類名
 */
 function delClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) aClass.splice(index, 1);
 element.className = aClass.join(' ');
 }

 /**
 * 檢查是否含有類名
 * @param element
 * @param className
 * @returns {boolean}
 */
 function hasClassName(element, className){
 var aClass = element.className.split(' '),
  index = aClass.indexOf(className);
 if(index > 0) return true;
 return false;
 }

 var Pager = function(obj){

 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分頁器
 this.__init(obj);

 };

 var pro = Pager.prototype;
 /**
 * 初始化分頁器
 */
 pro.__init = function(obj){
 if(this.__total < this.__index) return;
 //存儲(chǔ)數(shù)字
 this.__numbers = [];
 //儲(chǔ)存省略號(hào)
 this.__dots = [];
 this.__wrapper = create('div', 'pager-box', this.__parent);
 this.__body = create('div', 'pager', this.__wrapper);
 //存儲(chǔ)上一頁
 this.__preBtn = create('a', 'prev', this.__body);
 this.__preBtn.href = 'javascript:void(0);';
 this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一頁';
 //存儲(chǔ)數(shù)字
 if(this.__total < 8){
  for(var i = 0; i < this.__total; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  t.innerText = i + 1;
  this.__numbers.push(t);
  }
 }else{
  for(var i = 0; i < 2; i++){
  var t = create('span', 'dots', this.__body);
  t.innerText = '...';
  this.__dots.push(t);
  };
  for(var i = 0; i < 7; i++){
  var t = create('a', 'number', this.__body);
  t.href = 'javascript:void(0);';
  this.__numbers.push(t);
  }

 }
 //存儲(chǔ)下一頁
 this.__nextBtn = create('a', 'next', this.__body);
 this.__nextBtn.href = 'javascript:void(0);';
 this.__nextBtn.innerText = (obj.label && obj.label.next) || '下一頁';
 //
 this._$setIndex(this.__index);
 //
 this.__body.onclick = this.__doClick.bind(this);
 };

 pro.__doClick = function(e){
 var e = e || window.event,
  target = e.target || e.srcElement;
 //點(diǎn)擊省略號(hào)
 if(target.tagName.toLowerCase() == 'span') return;
 //點(diǎn)擊了不能點(diǎn)擊的上一頁或者下一頁
 if(hasClassName(target, 'js-disabled')) return;
 //點(diǎn)擊了當(dāng)前頁
 if(hasClassName(target, 'js-selected')) return;

 if(target == this.__preBtn){
  //點(diǎn)擊了上一頁
  this._$setIndex(this.__index - 1);
 }else if(target == this.__nextBtn){
  //點(diǎn)擊了下一頁
  this._$setIndex(this.__index + 1);
 }else{
  //點(diǎn)擊了數(shù)字
  var index = target.innerText;
  this._$setIndex(index);
 }

 };

 /**
 * 跳轉(zhuǎn)頁數(shù)
 */
 pro._$setIndex = function(index){

 index = parseInt(index);
 //更新信息
 if(index != this.__index){
  this.__last = this.__index;
  this.__index = index;
 }
 //處理
 delClassName(this.__preBtn, 'js-disabled');
 delClassName(this.__nextBtn, 'js-disabled');
 if(this.__total < 8){
  //總頁數(shù)小于8的情況
  if(this.__last) delClassName(this.__numbers[this.__last - 1], 'js-selected');
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');

 }else{
  this.__dots[0].style.display = 'none';
  this.__dots[1].style.display = 'none';
  for(var i = 0; i < 7; i++){
  delClassName(this.__numbers[i], 'js-selected');
  };
  if(this.__index < 5){
  for(var i = 0; i < 6; i++){
   this.__numbers[i].innerText = i + 1;
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  addClassName(this.__numbers[this.__index - 1], 'js-selected');
  if(this.__index == 1) addClassName(this.__preBtn, 'js-disabled');
  }else if(this.__index > this.__total - 4){
  for(var i = 1; i < 7; i++){
   this.__numbers[i].innerText = this.__total + i -6;
  }
  this.__numbers[0].innerText = '1';
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  addClassName(this.__numbers[this.__index + 6 - this.__total], 'js-selected');
  if(this.__index == this.__total) addClassName(this.__nextBtn, 'js-disabled');
  }else{
  this.__numbers[0].innerText = '1';
  for(var i = 1; i < 6; i++){
   this.__numbers[i].innerText = this.__index - 3 + i;
   if(i == 3) addClassName(this.__numbers[i], 'js-selected');
  }
  this.__numbers[6].innerText = this.__total;
  this.__dots[0].style.display = 'block';
  this.__body.insertBefore(this.__dots[0], this.__numbers[1]);
  this.__dots[1].style.display = 'block';
  this.__body.insertBefore(this.__dots[1], this.__numbers[6]);
  }

 }
 if(typeof this.__onchange == 'function'){
  this.__onchange({
  index: this.__index,
  last: this.__last,
  total: this.__total
  })
 }

 };
 /**
 * 得到總頁數(shù)
 */
 pro._$getIndex = function(){
 return this.__index;
 };
 /**
 * 得到上一個(gè)頁數(shù)
 */
 pro._$getLast = function(){
 return this.__last;
 };
 //變成全局
 window.Pager = Pager;

})(window);

主要思路：

分頁器共分為以下4種情況：

情況1，當(dāng)total < 8 時(shí)，所有的頁碼全部顯示。

情況2，當(dāng)total >= 8 且 index < 5時(shí)，顯示1-6和最后一頁。

情況3，當(dāng)total >= 8 且 index > total - 4時(shí)，顯示1和最后6項(xiàng)。

情況4，當(dāng)total >= 8 且 5 <= index <= total - 4時(shí)，顯示1和最后一頁，和中間5項(xiàng)。

Pager類實(shí)例化時(shí)傳入一個(gè)設(shè)置對(duì)象：

{
 parent: element, //給分頁器設(shè)置父節(jié)點(diǎn)
 index: index, //設(shè)置當(dāng)前頁
 total: total, //設(shè)置總頁數(shù)
 onchange: function(){} //頁數(shù)變化回調(diào)函數(shù)
}

當(dāng)我們實(shí)例化Pager時(shí)，執(zhí)行Pager函數(shù)體內(nèi)的語句，首先賦值，然后就執(zhí)行初始化函數(shù)：

var Pager = function(obj){
 //賦值
 this.__total = obj.total || 1;
 this.__index = obj.index || 1;
 this.__parent = obj.parent;
 this.__onchange = obj.onchange;
 //初始化分頁器
 this.__init(obj);
};

初始化函數(shù)this.__init結(jié)構(gòu)：

Pager.prototype.__init = function(obj){

 (根據(jù)上面分析的情況進(jìn)行處理)
 ...
 this._$setIndex(this.__index); //跳轉(zhuǎn)到初始頁
 //綁定分頁器點(diǎn)擊函數(shù)
 this.__body.onclick = this.__doClick.bind(this);
};

初始化完成，點(diǎn)擊后就會(huì)做出相應(yīng)的判斷，并使用this._$setIndex(index)進(jìn)行跳轉(zhuǎn)。

更多關(guān)于分頁教程的文章，請(qǐng)查看以下專題：

javascript分頁功能操作
jquery分頁功能操作
php分頁功能操作
ASP.NET分頁功能操作

下載：paper

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • 關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)

    關(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)

    下面小編就為大家?guī)硪黄P(guān)于Jquery中的bind(),on()綁定事件方式總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷

    jQuery基于當(dāng)前元素進(jìn)行下一步的遍歷

    通過jQuery方法選中了元素，如何基于這些已經(jīng)選中的元素進(jìn)行下一步的遍歷呢？下面有個(gè)不錯(cuò)的示例，大家可以參考下
    2014-05-05

    • 最新評(píng)論