自己動(dòng)手寫(xiě)的jquery分頁(yè)控件(非常簡(jiǎn)單實(shí)用)
最近接了一個(gè)項(xiàng)目,其中有需求要用到j(luò)query分頁(yè)控件,上網(wǎng)也找到了需要分頁(yè)控件,各種寫(xiě)法各種用法,都是很復(fù)雜,最終決定自己動(dòng)手寫(xiě)一個(gè)jquery分頁(yè)控件,全當(dāng)是練練手了。寫(xiě)的不好,還請(qǐng)見(jiàn)諒,本分頁(yè)控件在chrome測(cè)試過(guò),其他的兼容性不知道怎么沒(méi)時(shí)間測(cè)試呢。歡迎有同樣需求的小伙伴采用,在使用過(guò)程發(fā)現(xiàn)有問(wèn)題歡迎提出批評(píng)建議。

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'><上一頁(yè)</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'>下一頁(yè)></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);
以上內(nèi)容是小編給大家分享的自己動(dòng)手寫(xiě)的jquery分頁(yè)控件(非常簡(jiǎn)單實(shí)用),希望對(duì)大家有所幫助。
相關(guān)文章
基于jquery實(shí)現(xiàn)動(dòng)態(tài)豎向柱狀條特效
很多數(shù)據(jù)統(tǒng)計(jì)效果中,柱狀條方式的算是比較常見(jiàn)的一種,形象直觀,下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實(shí)例,并且具有一定的動(dòng)態(tài)效果,感興趣的朋友可以參考一下2016-02-02
jQuery中Nicescroll滾動(dòng)條插件的用法
本篇文章主要介紹了jQuery中Nicescroll滾動(dòng)條插件的用法,Nicescroll滾動(dòng)條插件是一個(gè)非常強(qiáng)大的基于jQuery的滾動(dòng)條插件,有需要的可以了解下。2016-11-11
使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo
這篇文章給大家介紹使用jQuery.Qrcode插件在客戶端動(dòng)態(tài)生成二維碼并添加自定義Logo的實(shí)現(xiàn)思路,涉及到Jquery.Qrcode基本使用,Jquery.Qrcode對(duì)中文字符的支持及Jquery.Qrcode添加自定義Logo圖片的相關(guān)知識(shí),本文介紹非常詳細(xì),具有參考價(jià)值,感興趣的朋友一起看看吧2016-09-09
jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果
本篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
jQuery實(shí)現(xiàn)按鍵盤(pán)方向鍵翻頁(yè)特效
本文給大家分享的是使用jQuery實(shí)現(xiàn)按鍵盤(pán)的方向鍵進(jìn)行翻頁(yè)的特效,代碼十分的簡(jiǎn)單,功能很實(shí)用,這里推薦給大家,希望大家能夠喜歡。2015-03-03
jQuery標(biāo)簽替換函數(shù)replaceWith()的使用例子
這篇文章主要介紹了jQuery標(biāo)簽替換函數(shù)replaceWith()的使用例子,使用replaceWith可以替換模板里的標(biāo)簽,還可以實(shí)現(xiàn)多語(yǔ)言網(wǎng)站,需要的朋友可以參考下2014-08-08
判斷一個(gè)對(duì)象是否為jquery對(duì)象的方法
在用jquery的each做循環(huán)遍歷的時(shí)候常常會(huì)使用到this,要使用jquery的方法 前提此對(duì)象必須是jquery對(duì)象,下面為大家介紹下jquery對(duì)象的判斷方法2014-03-03
超好用的jQuery分頁(yè)插件jpaginate用法示例【附源碼下載】
這篇文章主要介紹了超好用的jQuery分頁(yè)插件jpaginate用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery分頁(yè)插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下2018-12-12

