Heim > Artikel > Web-Frontend > JQuerys Pager-Implementierung code_jquery
JQuerys Pager-Implementierung code_jquery
- WBOYOriginal
- 2016-05-16 15:02:341508Durchsuche
Das Beispiel in diesem Artikel teilt den spezifischen Implementierungscode von JQuerys Pager als Referenz. Der spezifische Inhalt ist wie folgt
Rendering:
Code:
HTML-Code:
<!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-Code:
.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-Code
(function(window, undefined){
/**
* 创建元素节点并返回
*/
function create(tagName, className, parent){
var element = document.createElement(tagName);
element.className = className;
parent.appendChild(element);
return element;
}
/**
* 数组消除重复
*/
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;
//存储数字
this.__numbers = [];
//储存省略号
this.__dots = [];
this.__wrapper = create('div', 'pager-box', this.__parent);
this.__body = create('div', 'pager', this.__wrapper);
//存储上一页
this.__preBtn = create('a', 'prev', this.__body);
this.__preBtn.href = 'javascript:void(0);';
this.__preBtn.innerText = (obj.label && obj.label.prev) || '上一页';
//存储数字
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);
}
}
//存储下一页
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;
//点击省略号
if(target.tagName.toLowerCase() == 'span') return;
//点击了不能点击的上一页或者下一页
if(hasClassName(target, 'js-disabled')) return;
//点击了当前页
if(hasClassName(target, 'js-selected')) return;
if(target == this.__preBtn){
//点击了上一页
this._$setIndex(this.__index - 1);
}else if(target == this.__nextBtn){
//点击了下一页
this._$setIndex(this.__index + 1);
}else{
//点击了数字
var index = target.innerText;
this._$setIndex(index);
}
};
/**
* 跳转页数
*/
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){
//总页数小于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
})
}
};
/**
* 得到总页数
*/
pro._$getIndex = function(){
return this.__index;
};
/**
* 得到上一个页数
*/
pro._$getLast = function(){
return this.__last;
};
//变成全局
window.Pager = Pager;
})(window);
Hauptidee:
Der Paginator ist in die folgenden 4 Situationen unterteilt:
Fall 1, wenn die Gesamtzahl
Fall 2, wenn die Gesamtzahl >= 8 und der Index 9ecbf04f6349bd81378a886dadf71a03= 8 und 5 <= Index <= insgesamt - 4, werden 1 und die letzte Seite sowie die 5 Elemente in angezeigt Mitte.
Übergeben Sie beim Instanziieren der Pager-Klasse ein Einstellungsobjekt:
{
parent: element, //给分页器设置父节点
index: index, //设置当前页
total: total, //设置总页数
onchange: function(){} //页数变化回调函数
}
Wenn wir Pager instanziieren, führen Sie die Anweisungen im Pager-Funktionskörper aus, weisen Sie zuerst den Wert zu und führen Sie dann die Initialisierungsfunktion aus:
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);
};
Initialisierungsfunktion this.__init-Struktur:
Pager.prototype.__init = function(obj){
(根据上面分析的情况进行处理)
...
this._$setIndex(this.__index); //跳转到初始页
//绑定分页器点击函数
this.__body.onclick = this.__doClick.bind(this);
};
Die Initialisierung ist abgeschlossen. Nach dem Klicken wird die entsprechende Beurteilung vorgenommen und this._$setIndex(index) wird zum Springen verwendet.
Weitere Artikel zu Paginierungs-Tutorials finden Sie in den folgenden Themen:
Bedienung der Javascript-Paging-Funktion
JQuery-Paging-Funktionsbetrieb
Betrieb der PHP-Paging-Funktion
ASP.NET-Paging-Funktionsbetrieb
Download: Papier
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn