Rumah >hujung hadapan web >tutorial js >Kawalan paging jquery DIY (sangat mudah dan praktikal)_jquery
Saya baru-baru ini mengambil projek, yang memerlukan penggunaan kawalan paging jquery. Saya juga mendapati keperluan untuk kawalan paging di Internet Pelbagai kaedah dan penggunaan adalah sangat rumit . Tiba masanya untuk melatih tangan anda. Maaf atas penulisan yang teruk. Kawalan halaman ini telah diuji dalam Chrome. Saya tidak tahu mengapa saya tidak mempunyai masa untuk menguji keserasian lain. Rakan-rakan yang mempunyai keperluan yang sama dialu-alukan untuk menerimanya Jika anda mendapati sebarang masalah semasa penggunaan, anda dialu-alukan untuk membuat kritikan dan cadangan.
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; }
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'?'_right':'_left')+"'><div class='_before Hidden'><上一页</div><ul class='_ul'>"; for (var i = ; i <= count ; i++) { strHtml += "<li data-index='"+(i==?'frist':i==count?'last':'middle')+"' class='"+(i==?'_select':'')+" "+(i>_this.options.maxpage?'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);
Kandungan di atas adalah kawalan paging jquery yang ditulis oleh saya sendiri (sangat mudah dan praktikal) yang dikongsi oleh editor dengan anda. Saya harap ia akan membantu semua orang.