HTML5开发之jQuery分页插件jqPagination可自定义输入页码

jqPagination是一款基于jQuery的分页插件,这款jQuery分页插件非常实用,不仅可以上下翻页,而且也支持第一页和最后一页的翻页。另外,jqPagination还支持自定义输入页码来跳转到任意页。jqPagination分页插件的UI外观也比较漂亮,分页按钮不仅大气,而且还有渐变的颜色,看起来很简单,你可以将jqPagination应用在自己的个人博客上。

HTML5开发之jQuery分页插件jqPagination可自定义输入页码

下面我们来简单介绍一下jqPagination分页插件实现的代码,主要由HTML代码、CSS代码以及jQuery代码组成,实现也比较简单。

HTML5开发之jQuery分页插件jqPagination可自定义输入页码

HTML代码:

<div>

<ahref="#"data-action="first">«</a>

<ahref="#"data-action="previous">‹</a>

<inputtype="text"readonly="readonly"/>

<ahref="#"data-action="next">›</a>

<ahref="#"data-action="last">»</a>

</div>

很简单,在页面上陈列了4个翻页按钮和一个页码输入框。

CSS代码:

.pagination{

display:inline-block;

border:1pxsolid#CDCDCD;

border-radius:3px;}

.paginationa{

display:block;

float:left;

width:20px;

height:20px;

outline:none;

border-right:1pxsolid#CDCDCD;

border-left:1pxsolid#CDCDCD;

color:#555555;

vertical-align:middle;

text-align:center;

text-decoration:none;

font-weight:bold;

font-size:16px;

font-family:Times,'TimesNewRoman',Georgia,Palatino;

/*ATTN:needabetterfontstack*/

background-color:#f3f3f3;

background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#f3f3f3),color-stop(100%,lightgrey));

background-image:-webkit-linear-gradient(#f3f3f3,lightgrey);

background-image:linear-gradient(#f3f3f3,lightgrey);}

.paginationa:hover,.paginationa:focus,.paginationa:active{

background-color:#cecece;

background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#e4e4e4),color-stop(100%,#cecece));

background-image:-webkit-linear-gradient(#e4e4e4,#cecece);

background-image:linear-gradient(#e4e4e4,#cecece);}

.paginationa.disabled,.paginationa.disabled:hover,.paginationa.disabled:focus,.paginationa.disabled:active{

background-color:#f3f3f3;

background-image:-webkit-gradient(linear,lefttop,leftbottom,color-stop(0%,#f3f3f3),color-stop(100%,lightgrey));

background-image:-webkit-linear-gradient(#f3f3f3,lightgrey);

background-image:linear-gradient(#f3f3f3,lightgrey);

color:#A8A8A8;

cursor:default;}

.paginationa:first-child{

border:none;

border-radius:2px002px;}

.paginationa:last-child{

border:none;

border-radius:02px2px0;}

.paginationinput{

float:left;

margin:0;

padding:0;

width:120px;

height:20px;

outline:none;

border:none;

vertical-align:middle;

text-align:center;}

/*giganticclassfordemopurposes*/

.gigantic.pagination{

margin:30px0;}

.gigantic.paginationa{

height:60px;

width:60px;

font-size:50px;

line-height:50px;}

.gigantic.paginationinput{

width:300px;

height:60px;

font-size:30px;}

jQuery代码:

(function($){

"usestrict";

$.jqPagination=function(el,options){

//Toavoidscopeissues,use'base'insteadof'this'

//toreferencethisclassfrominternaleventsandfunctions.

varbase=this;

//AccesstojQueryandDOMversionsofelement

base.$el=$(el);

base.el=el;

//getinputjQueryobject

base.$input=base.$el.find('input');

//AddareversereferencetotheDOMobject

base.$el.data("jqPagination",base);

base.init=function(){

base.options=$.extend({},$.jqPagination.defaultOptions,options);

//iftheuserhasn'tprovidedamaxpagenumberintheoptionstryandfind

//thedataattributeforit,ifthatcannotbefound,useoneasamaxpagenumber

if(base.options.max_page===null){

if(base.$input.data('max-page')!==undefined){

base.options.max_page=base.$input.data('max-page');

}else{

base.options.max_page=1;

}

}

//ifthecurrent-pagedataattributeisspecifiedthistakespriority

//overtheoptionspassedin,solongasit'sanumber

if(base.$input.data('current-page')!==undefined&&base.isNumber(base.$input.data('current-page'))){

base.options.current_page=base.$input.data('current-page');

}

//removethereadonlyattributeasJavaScriptmustbeworkingbynow;-)

base.$input.removeAttr('readonly');

//settheinitialinputvalue

//passtruetopreventpagedcallbackformbeingfired

base.updateInput(true);

//***************

//BINDEVENTS

base.$input.on('focus.jqPaginationmouseup.jqPagination',function(event){

//ifevent===focus,selectalltext...

if(event.type==='focus'){

varcurrent_page=parseInt(base.options.current_page,10);

$(this).val(current_page).select();

}

//ifevent===mouseup,returnfalse.FixesChromebug

if(event.type==='mouseup'){

returnfalse;

}

});

base.$input.on('blur.jqPaginationkeydown.jqPagination',function(event){

var$self=$(this),

current_page=parseInt(base.options.current_page,10);

//iftheuserhitsescapereverttheinputbacktotheoriginalvalue

if(event.keyCode===27){

$self.val(current_page);

$self.blur();

}

//iftheuserhitsenter,triggerblureventbutDONOTsetthepagevalue

if(event.keyCode===13){

$self.blur();

}

//onlysetthepageistheeventisfocusout..akablur

if(event.type==='blur'){

base.setPage($self.val());

}

});

base.$el.on('click.jqPagination','a',function(event){

var$self=$(this);

//wedon'twanttodoanythingifwe'veclickedadisabledlink

//returnfalsesowestopnormallinkactionbtualsodropoutofthisevent

if($self.hasClass('disabled')){

returnfalse;

}

//formac+windows(read:other),maintainthecmd+ctrlclickfornewtab

if(!event.metaKey&&!event.ctrlKey){

event.preventDefault();

base.setPage($self.data('action'));

}

});

};

base.setPage=function(page,prevent_paged){

//returncurrent_pagevalueifgettinginsteadofsetting

if(page===undefined){

returnbase.options.current_page;

}

varcurrent_page=parseInt(base.options.current_page,10),

max_page=parseInt(base.options.max_page,10);

if(isNaN(parseInt(page,10))){

switch(page){

case'first':

page=1;

break;

case'prev':

case'previous':

page=current_page-1;

break;

case'next':

page=current_page+1;

break;

case'last':

page=max_page;

break;

}

}

page=parseInt(page,10);

//rejectanyinvalidpagerequests

if(isNaN(page)||page<1||page>max_page){

//updatetheinputelement

base.setInputValue(current_page);

returnfalse;

}

//updatecurrentpageoptions

base.options.current_page=page;

base.$input.data('current-page',page);

//updatetheinputelement

base.updateInput(prevent_paged);

};

base.setMaxPage=function(max_page,prevent_paged){

//returnthemax_pagevalueifgettinginsteadofsetting

if(max_page===undefined){

returnbase.options.max_page;

}

//ignoreifmax_pageisnotanumber

if(!base.isNumber(max_page)){

console.error('jqPagination:max_pageisnotanumber');

returnfalse;

}

//ignoreifmax_pageislessthanthecurrent_page

if(max_page<base.options.current_page){

console.error('jqPagination:max_pagelowerthancurrent_page');

returnfalse;

}

//setmax_pageoptions

base.options.max_page=max_page;

base.$input.data('max-page',max_page);

//updatetheinputelement

base.updateInput(prevent_paged);

};

//ATTNthisisn'treallythecorrectnameisit?

base.updateInput=function(prevent_paged){

varcurrent_page=parseInt(base.options.current_page,10);

//settheinputvalue

base.setInputValue(current_page);

//setthelinkhrefattributes

base.setLinks(current_page);

//wemaywanttopreventthepagedcallbackfrombeingfired

if(prevent_paged!==true){

//firethecallbackfunctionwiththecurrentpage

base.options.paged(current_page);

}

};

base.setInputValue=function(page){

varpage_string=base.options.page_string,

max_page=base.options.max_page;

//thislookshorrible:-(

page_string=page_string

.replace("{current_page}",page)

.replace("{max_page}",max_page);

base.$input.val(page_string);

};

base.isNumber=function(n){

return!isNaN(parseFloat(n))&&isFinite(n);

};

base.setLinks=function(page){

varlink_string=base.options.link_string,

current_page=parseInt(base.options.current_page,10),

max_page=parseInt(base.options.max_page,10);

if(link_string!==''){

//setinitialpagenumbers+makesurethepagenumbersaren'toutofrange

varprevious=current_page-1;

if(previous<1){

previous=1;

}

varnext=current_page+1;

if(next>max_page){

next=max_page;

}

//applyeachpagenumbertothelinkstring,setitbacktotheelementhrefattribute

base.$el.find('a.first').attr('href',link_string.replace('{page_number}','1'));

base.$el.find('a.prev,a.previous').attr('href',link_string.replace('{page_number}',previous));

base.$el.find('a.next').attr('href',link_string.replace('{page_number}',next));

base.$el.find('a.last').attr('href',link_string.replace('{page_number}',max_page));

}

//setdisableclassonappropriatelinks

base.$el.find('a').removeClass('disabled');

if(current_page===max_page){

base.$el.find('.next,.last').addClass('disabled');

}

if(current_page===1){

base.$el.find('.previous,.first').addClass('disabled');

}

};

base.callMethod=function(method,key,value){

switch(method.toLowerCase()){

case'option':

//ifwe'regetting,immediatelyreturnthevalue

if(value===undefined&&typeofkey!=="object"){

returnbase.options[key];

}

//setdefaultobjecttotriggerthepagedevent(legacyopperation)

varoptions={'trigger':true},

result=false;

//ifthekeypassedinisanobject

if($.isPlainObject(key)&&!value){

$.extend(options,key)

}

else{//makethekeyvaluepairpartofthedefaultobject

options[key]=value;

}

varprevent_paged=(options.trigger===false);

//ifcurrent_pagepropertyissetcallsetPage

if(options.current_page!==undefined){

result=base.setPage(options.current_page,prevent_paged);

}

//ifmax_pagepropertyissetcallsetMaxPage

if(options.max_page!==undefined){

result=base.setMaxPage(options.max_page,prevent_paged);

}

//ifwe'venotgotaresultfireanerrorandreturnfalse

if(result===false)console.error('jqPagination:cannotget/setoption'+key);

returnresult;

break;

case'destroy':

base.$el

.off('.jqPagination')

.find('*')

.off('.jqPagination');

break;

default:

//thefunctionnamemustnotexist

console.error('jqPagination:method"'+method+'"doesnotexist');

returnfalse;

}

};

//Runinitializer

base.init();

};

$.jqPagination.defaultOptions={

current_page:1,

link_string:'',

max_page:null,

page_string:'Page{current_page}of{max_page}',

paged:function(){}

};

$.fn.jqPagination=function(){

//getanyfunctionparameters

varself=this,

$self=$(self),

args=Array.prototype.slice.call(arguments),

result=false;

//ifthefirstargumentisastringcallthedesiredfunction

//note:wecanonlydothistoasingleelement,andnotacollectionofelements

if(typeofargs[0]==='string'){

//ifwe'regetting,wecanonlygetvalueforthefirstpaginationelement

if(args[2]===undefined){

result=$self.first().data('jqPagination').callMethod(args[0],args[1]);

}else{

//ifwe'resetting,setvaluesforallpaginationelements

$self.each(function(){

result=$(this).data('jqPagination').callMethod(args[0],args[1],args[2]);

});

}

returnresult;

}

//ifwe'renotdealingwithamethod,initialiseplugin

self.each(function(){

(new$.jqPagination(this,args[0]));

});

};

})(jQuery);

相关推荐