基于JS分页控件实现简单美观仿淘宝分页按钮效果

前端之家收集整理的这篇文章主要介绍了基于JS分页控件实现简单美观仿淘宝分页按钮效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最新版本代码请移步到

在线测试链接:

分页按钮思想:

1、少于9页,全部显示

2、大于9页,1、2页显示,中间页码当前页为中心,前后各留两个页码

附件中有完整例子的压缩包下载。已更新到最新版本

先看效果图:

01输入框焦点效果

02效果

模仿淘宝的分页按钮效果控件kkpager JS代码

Js代码

页码 pno : 1,//总页码 total : 1,//总数据条数 totalRecords : 0,//是否显示总页数 isShowTotalPage : true,//是否显示总记录数 isShowTotalRecords : true,//是否显示页码跳转输入框 isGoPage : true,//链接前部 hrefFormer : '',//链接尾部 hrefLatter : '',/****链接算法****/ getLink : function(n){ //这里的算法适用于比如: //hrefFormer=http://www.xx.com/news/20131212 //hrefLatter=.html //那么首页(第1页)就是http://www.xx.com/news/20131212.html //第2页就是http://www.xx.com/news/20131212_2.html //第n页就是http://www.xx.com/news/20131212_n.html if(n == 1){ return this.hrefFormer + this.hrefLatter; }else{ return this.hrefFormer + '_' + n + this.hrefLatter; } },//跳转框得到输入焦点时 focus_gopage : function (){ var btnGo = $('#btn_go'); $('#btn_go_input').attr('hideFocus',true); btnGo.show(); btnGo.css('left','0px'); $('#go_page_wrap').css('border-color','#6694E3'); btnGo.animate({left: '+=44'},50,function(){ //$('#go_page_wrap').css('width','88px'); }); },//跳转框失去输入焦点时 blur_gopage : function(){ setTimeout(function(){ var btnGo = $('#btn_go'); //$('#go_page_wrap').css('width','44px'); btnGo.animate({ left: '-=44' },100,function() { $('#btn_go').css('left','0px'); $('#btn_go').hide(); $('#go_page_wrap').css('border-color','#DFDFDF'); }); },400); },//跳转页面跳转 gopage : function(){ var str_page = $("#btn_go_input").val(); if(isNaN(str_page)){ $("#btn_go_input").val(this.next); return; } var n = parseInt(str_page); if(n < 1 || n >this.total){ $("#btn_go_input").val(this.next); return; } //这里可以按需改window.open window.location = this.getLink(n); },//分页按钮控件初始化 init : function(config){ //赋值 this.pno = isNaN(config.pno) ? 1 : parseInt(config.pno); this.total = isNaN(config.total) ? 1 : parseInt(config.total); this.totalRecords = isNaN(config.totalRecords) ? 0 : parseInt(config.totalRecords); if(config.pagerid){this.pagerid = config.pagerid;} if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;} if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;} if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;} this.hrefFormer = config.hrefFormer || ''; this.hrefLatter = config.hrefLatter || ''; if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;} //验证 if(this.pno < 1) this.pno = 1; this.total = (this.total <= 1) ? 1: this.total; if(this.pno > this.total) this.pno = this.total; this.prv = (this.pno<=2) ? 1 : (this.pno-1); this.next = (this.pno >= this.total-1) ? this.total : (this.pno + 1); this.hasPrv = (this.pno > 1); this.hasNext = (this.pno < this.total); this.inited = true; },//生成分页控件Html generPageHtml : function(){ if(!this.inited){ return; } var str_prv='',str_next=''; if(this.hasPrv){ str_prv = ''; }else{ str_prv = ''; } if(this.hasNext){ str_next = ''; }else{ str_next = '下一页'; } var str = ''; var dot = '...'; var total_info=''; if(this.isShowTotalPage || this.isShowTotalRecords){ total_info = '页'; } //分页处理 if(this.total <= 8){ for(var i=1;i<=this.total;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } }else{ if(this.pno <= 5){ for(var i=1;i<=7;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } str += dot; }else{ str += ''; str += ''; str += dot; var begin = this.pno - 2; var end = this.pno + 2; if(end > this.total){ end = this.total; begin = end - 4; if(this.pno - begin < 2){ begin = begin-1; } }else if(end + 1 == this.total){ end = this.total; } for(var i=begin;i<=end;i++){ if(this.pno == i){ str += ''; }else{ str += ''; } } if(end != this.total){ str += dot; } } } str = ""+str_prv + str + str_next + total_info + gopage_info; $("#"+this.pagerid).html(str); } };

html调用代码

HTML代码

以上是示例中是必传参数,页码、总页数、总记录数这些是要根据获取服务端pager对象当相关值,还有可选的参数:pagerid、isShowTotalPage、isShowTotalRecords、isGoPage、getLink

注意链接算法哟,以下是默认链接算法(这个getLink方法也可以作为config参数):

Js代码

链接算法****/ getLink : function(n){ //这里的算法适用于比如: //hrefFormer=http://www.xx.com/news/20131212 //hrefLatter=.html //那么首页(第1页)就是http://www.xx.com/news/20131212.html //第2页就是http://www.xx.com/news/20131212_2.html //第n页就是http://www.xx.com/news/20131212_n.html if(n == 1){ return this.hrefFormer + this.hrefLatter; }else{ return this.hrefFormer + '_' + n + this.hrefLatter; } }

CSS代码

效果图:

1、没有数据或只有一页数据时效果

2、有多页时当效果

3、第5页效果

4、第6页效果分页效果2)

5、第17页效果(接近尾页效果

6、尾页效果

7、输入框焦点效果

最后注意,若要使用,使用时请修改分页获取链接当算法,不然不适用哟

里面输入框我把ID写死了,样式也是写当行内样式,懒得提取出来了,影响不大,各位看官若要用自己再修修,呵呵

以上所述是小编给大家介绍的基于JS分页控件实现简单美观仿淘宝分页按钮效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章