Heim > Web-Frontend > js-Tutorial > Hauptteil

DIY-JQuery-Paging-Steuerung (sehr einfach und praktisch)_jquery

WBOY
Freigeben: 2016-05-16 15:34:41
Original
1048 Leute haben es durchsucht

Ich habe kürzlich ein Projekt übernommen, das die Verwendung von JQuery-Paging-Steuerelementen erfordert. Außerdem habe ich festgestellt, dass verschiedene Schreibmethoden und -verwendungen sehr kompliziert sind . Es ist Zeit, Ihre Hände zu üben. Entschuldigung für den schlechten Text. Diese Paging-Steuerung wurde in Chrome getestet. Ich weiß nicht, warum ich keine Zeit habe, andere Kompatibilitäten zu testen. Freunde mit den gleichen Bedürfnissen können es gerne übernehmen. Sollten bei der Nutzung Probleme auftreten, können Sie gerne Kritik und Anregungen äußern.

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;
}
Nach dem Login kopieren

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);
Nach dem Login kopieren

Der obige Inhalt ist die von mir selbst geschriebene JQuery-Paging-Steuerung (sehr einfach und praktisch), die der Herausgeber mit Ihnen geteilt hat. Ich hoffe, dass sie für alle hilfreich ist.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!