自己动手写的jquery分页控件(非常简单实用)

前端技术 2023/09/02 JavaScript

最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性不知道怎么没时间测试呢。欢迎有同样需求的小伙伴采用，在使用过程发现有问题欢迎提出批评建议。

 

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);

以上内容是小编给大家分享的自己动手写的jquery分页控件(非常简单实用)，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/5715

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案