Maison > interface Web > js tutoriel > Contrôle de pagination DIY jquery (très simple et pratique)_jquery

Contrôle de pagination DIY jquery (très simple et pratique)_jquery

WBOY
Libérer: 2016-05-16 15:34:41
original
1085 Les gens l'ont consulté

J'ai récemment entrepris un projet qui nécessitait l'utilisation de contrôles de pagination jquery. J'ai également constaté le besoin de contrôles de pagination sur Internet. Diverses méthodes d'écriture et utilisations sont très compliquées. J'ai finalement décidé d'écrire moi-même un contrôle de pagination jquery. . Il est temps de pratiquer vos mains. Désolé pour la mauvaise écriture. Ce contrôle de pagination a été testé dans Chrome. Je ne sais pas pourquoi je n'ai pas le temps de tester d'autres compatibilités. Les amis ayant les mêmes besoins sont invités à l'adopter. Si vous rencontrez des problèmes lors de l'utilisation, vous êtes invités à faire des critiques et des suggestions.

css :

@charset "utf-";
* {
margin:px;
padding:px;
font-family:"微软雅黑";
font-size:px;
}
._ul {
float:left;
height:px;
display:block;
}
._ul li {
list-style-type:none;
height:px;
width:px;
border:px solid #eee;
cursor:pointer;
text-align:center;
line-height:px;
color:blue;
float:left;
margin: px;
}
._ul li:hover,._before:hover,._after:hover {
border:px solid #f;
background: #ffff;
}

.li-hover {
border:px solid #f;
background: #ffff;
}

._before {
width:px;
height:px;
border:px solid #eee;
float:left;
cursor:pointer;
text-align:center;
line-height:px;
color:blue;
margin: px;
}
._after {
width:px;
height:px;
border:px solid #eee;
float:left;
cursor:pointer;
text-align:center;
line-height:px;
color:blue;
margin: px;
}

.Hidden {
display:none;
}
._select {
border:px solid #fff !important;
color:black !important;
}
._left {
float:left;
margin-left:px;
}
._right {
float:right;
margin-right:px;
}
Copier après la connexion

js:

; (function ($, window, document, undefined) {
var isShow = function (ele,options) {
this.$element = ele,
this.defaults = {
maxpage: ,
count: ,
total: ,
float: 'right',
margin:'px',
getData:null
},
this.options = $.extend({}, this.defaults, options)
}
isShow.prototype={
showDiv:function(){
this.bindEvent();
},
showHtml:function(){
var _this = this, strHtml = "",count=Math.ceil(_this.options.total / _this.options.count);
strHtml += "<div class='"+(_this.options.float=='right'&#63;'_right':'_left')+"'><div class='_before Hidden'><上一页</div><ul class='_ul'>";
for (var i = ; i <= count ; i++) {
strHtml += "<li data-index='"+(i==&#63;'frist':i==count&#63;'last':'middle')+"' class='"+(i==&#63;'_select':'')+" "+(i>_this.options.maxpage&#63;'Hidden':'')+"'>"+i+"</li>";
}
strHtml += "</ul><div class='_after'>下一页></div></div>";
_this.$element.append(strHtml);
},
MoveIndex:function(index){
var _this = this, _index = this.options.maxpage, count = Math.ceil(_this.options.total / _this.options.count);
var middle = _index / ;
var curr = _this.$element.find("li");
if (count <= _index) {
$(curr).show();
} else {
var ftemp = ,ltemp=;
if (index < middle)
ftemp = (middle - index);
if (middle > count - index)
ltemp=(middle-(count-index));
$(curr).each(function () {
var currindex = parseInt($(this).text());
if (currindex > index - middle-ltemp && currindex <= parseInt(index) + parseInt(middle)+ftemp) {
$(this).show();
} else {
$(this).hide();
}
});
} 
},
WhichFind:function(status,_index){
var _this=this;
switch (status) {
case 'frist':
_this.$element.find("._before").hide();
_this.$element.find("._after").show();
break;
case 'last':
_this.$element.find("._after").hide();
_this.$element.find("._before").show();
break;
case 'middle':
_this.$element.find("div").show();
break;
}
_this.MoveIndex(_index);
_this.options.getData({ index: _index });
},
bindEvent:function(){
var _this = this;
_this.showHtml();
_this.$element.find("li").click(function () {
var status = $(this).data("index"), _index = $(this).text();
$(this).addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});

_this.$element.find("._before").click(function () {
var status = $("._select").prev().data("index"), _index = $("._select").prev().text();
$("._select").prev().addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});

_this.$element.find("._after").click(function () {
var status = $("._select").next().data("index"), _index = $("._select").next().text();
$("._select").next().addClass("_select").siblings().removeClass("_select");
_this.WhichFind(status,_index);
});
}
}
$.fn.FY = function (option) {
var fs = new isShow(this, option);
return fs.showDiv();
}
})(jQuery,window,document);
Copier après la connexion

Le contenu ci-dessus est le contrôle de pagination jquery écrit par moi-même (très simple et pratique) que l'éditeur a partagé avec vous. J'espère qu'il sera utile à tout le monde.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal