HTML5开发之jQuery分页插件jqPagination可自定义输入页码
jqPagination是一款基于jQuery的分页插件，这款jQuery分页插件非常实用，不仅可以上下翻页，而且也支持第一页和最后一页的翻页。另外，jqPagination还支持自定义输入页码来跳转到任意页。jqPagination分页插件的UI外观也比较漂亮，分页按钮不仅大气，而且还有渐变的颜色，看起来很简单，你可以将jqPagination应用在自己的个人博客上。
下面我们来简单介绍一下jqPagination分页插件实现的代码，主要由HTML代码、CSS代码以及jQuery代码组成，实现也比较简单。
HTML代码：
<div>
<ahref="#"data-action="first">&laquo;</a>
<ahref="#"data-action="previous">&lsaquo;</a>
<inputtype="text"readonly="readonly"/>
<ahref="#"data-action="next">&rsaquo;</a>
<ahref="#"data-action="last">&raquo;</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);
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...