kkpager转

最新推荐文章于 2024-08-16 08:56:47 发布

freshing123

最新推荐文章于 2024-08-16 08:56:47 发布

阅读量534

点赞数 1

分类专栏： js H5 \ CSS3 文章标签： js 分页

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

H5 \ CSS3

7 篇文章 0 订阅

订阅专栏

kkpager.js

/*
  kkpager V1.3
  https://github.com/pgkk/kkpager

  Copyright (c) 2013 cqzhangkang@163.com
  Licensed under the GNU GENERAL PUBLIC LICENSE
*/
var kkpager = {
        pagerid             : 'kkpager', //divID
        mode                : 'link', //模式(link 或者 click)
        pno                 : 1, //当前页码
        total               : 1, //总页码
        totalRecords        : 0, //总数据条数
        isShowFirstPageBtn  : true, //是否显示首页按钮
        isShowLastPageBtn   : true, //是否显示尾页按钮
        isShowPrePageBtn    : true, //是否显示上一页按钮
        isShowNextPageBtn   : true, //是否显示下一页按钮
        isShowTotalPage     : true, //是否显示总页数
        isShowCurrPage      : true,//是否显示当前页
        isShowTotalRecords  : false, //是否显示总记录数
        isGoPage            : true, //是否显示页码跳转输入框
        isWrapedPageBtns    : true, //是否用span包裹住页码按钮
        isWrapedInfoTextAndGoPageBtn : true, //是否用span包裹住分页信息和跳转按钮
        hrefFormer          : '', //链接前部
        hrefLatter          : '', //链接尾部
        gopageWrapId        : 'kkpager_gopage_wrap',
        gopageButtonId      : 'kkpager_btn_go',
        gopageTextboxId     : 'kkpager_btn_go_input',
        lang                : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        },
        //链接算法（当处于link模式）,参数n为页码
        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;
            }
            return this.hrefFormer + '_' + n + this.hrefLatter;
        },
        //页码单击事件处理函数（当处于mode模式）,参数n为页码
        click   : function(n){
            //这里自己实现
            //这里可以用this或者kkpager访问kkpager对象
            return false;
        },
        //获取href的值（当处于mode模式）,参数n为页码
        getHref : function(n){
            //默认返回'#'
            return '#';
        },
        //跳转框得到输入焦点时
        focus_gopage : function (){
            var btnGo = $('#'+this.gopageButtonId);
            $('#'+this.gopageTextboxId).attr('hideFocus',true);
            btnGo.show();
            btnGo.css('left','10px');
            $('#'+this.gopageTextboxId).addClass('focus');
            btnGo.animate({left: '+=30'}, 50);
        },
        //跳转框失去输入焦点时
        blur_gopage : function(){
            var _this = this;
            setTimeout(function(){
                var btnGo = $('#'+_this.gopageButtonId);
                btnGo.animate({
                    left: '-=25'
                  }, 100, function(){
                      btnGo.hide();
                      $('#'+_this.gopageTextboxId).removeClass('focus');
                  });
            },400);
        },
        //跳转输入框按键操作
        keypress_gopage : function(){
            var event = arguments[0] || window.event;
            var code = event.keyCode || event.charCode;
            //delete key
            if(code == 8) return true;
            //enter key
            if(code == 13){
                kkpager.gopage();
                return false;
            }
            //copy and paste
            if(event.ctrlKey && (code == 99 || code == 118)) return true;
            //only number key
            if(code<48 || code>57)return false;
            return true;
        },
        //跳转框页面跳转
        gopage : function(){
            var str_page = $('#'+this.gopageTextboxId).val();
            if(isNaN(str_page)){
                $('#'+this.gopageTextboxId).val(this.next);
                return;
            }
            var n = parseInt(str_page);
            if(n < 1) n = 1;
            if(n > this.total) n = this.total;
            if(this.mode == 'click'){
                this._clickHandler(n);
            }else{
                window.location = this.getLink(n);
            }
        },
        //不刷新页面直接手动调用选中某一页码
        selectPage : function(n){
            this._config['pno'] = n;
            this.generPageHtml(this._config,true);
        },
        //生成控件代码
        generPageHtml : function(config,enforceInit){
            if(enforceInit || !this.inited){
                this.init(config);
            }

            var str_first='',str_prv='',str_next='',str_last='';
            if(this.isShowFirstPageBtn){
                if(this.hasPrv){
                    str_first = '<a '+this._getHandlerStr(1)+' title="'
                        +(this.lang.firstPageTipText || this.lang.firstPageText)+'">'+this.lang.firstPageText+'</a>';
                }else{
                    str_first = '<span class="disabled">'+this.lang.firstPageText+'</span>';
                }
            }
            if(this.isShowPrePageBtn){
                if(this.hasPrv){
                    str_prv = '<a '+this._getHandlerStr(this.prv)+' title="'
                        +(this.lang.prePageTipText || this.lang.prePageText)+'">'+this.lang.prePageText+'</a>';
                }else{
                    str_prv = '<span class="disabled">'+this.lang.prePageText+'</span>';
                }
            }
            if(this.isShowNextPageBtn){
                if(this.hasNext){
                    str_next = '<a '+this._getHandlerStr(this.next)+' title="'
                        +(this.lang.nextPageTipText || this.lang.nextPageText)+'">'+this.lang.nextPageText+'</a>';
                }else{
                    str_next = '<span class="disabled">'+this.lang.nextPageText+'</span>';
                }
            }
            if(this.isShowLastPageBtn){
                if(this.hasNext){
                    str_last = '<a '+this._getHandlerStr(this.total)+' title="'
                        +(this.lang.lastPageTipText || this.lang.lastPageText)+'">'+this.lang.lastPageText+'</a>';
                }else{
                    str_last = '<span class="disabled">'+this.lang.lastPageText+'</span>';
                }
            }
            var str = '';
            var dot = '<span class="spanDot">...</span>';
            var total_info='<span class="totalText">';
            var total_info_splitstr = '<span class="totalInfoSplitStr">'+this.lang.totalInfoSplitStr+'</span>';
            if(this.isShowCurrPage){
                total_info += this.lang.currPageBeforeText + '<span class="currPageNum">' + this.pno + '</span>' + this.lang.currPageAfterText;
                if(this.isShowTotalPage){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;
                }else if(this.isShowTotalRecords){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
                }
            }else if(this.isShowTotalPage){
                total_info += this.lang.totalPageBeforeText + '<span class="totalPageNum">'+this.total + '</span>' + this.lang.totalPageAfterText;;
                if(this.isShowTotalRecords){
                    total_info += total_info_splitstr;
                    total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
                }
            }else if(this.isShowTotalRecords){
                total_info += this.lang.totalRecordsBeforeText + '<span class="totalRecordNum">'+this.totalRecords + '</span>' + this.lang.totalRecordsAfterText;
            }
            total_info += '</span>';

            var gopage_info = '';
            if(this.isGoPage){
                gopage_info = '<span class="goPageBox">'+this.lang.gopageBeforeText+'<span id="'+this.gopageWrapId+'">'+
                    '<input type="button" id="'+this.gopageButtonId+'" onclick="kkpager.gopage()" value="'
                        +this.lang.gopageButtonOkText+'" />'+
                    '<input type="text" id="'+this.gopageTextboxId+'" onfocus="kkpager.focus_gopage()"  onkeypress="return kkpager.keypress_gopage(event);"   onblur="kkpager.blur_gopage()" value="'+this.next+'" /></span>'+this.lang.gopageAfterText+'</span>';
            }

            //分页处理
            if(this.total <= 8){
                for(var i=1;i<=this.total;i++){
                    if(this.pno == i){
                        str += '<span class="curr">'+i+'</span>';
                    }else{
                        str += '<a '+this._getHandlerStr(i)+' title="'
                            +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                    }
                }
            }else{
                if(this.pno <= 5){
                    for(var i=1;i<=7;i++){
                        if(this.pno == i){
                            str += '<span class="curr">'+i+'</span>';
                        }else{
                            str += '<a '+this._getHandlerStr(i)+' title="'+
                                this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                        }
                    }
                    str += dot;
                }else{
                    str += '<a '+this._getHandlerStr(1)+' title="'
                        +this.lang.buttonTipBeforeText + '1' + this.lang.buttonTipAfterText+'">1</a>';
                    str += '<a '+this._getHandlerStr(2)+' title="'
                        +this.lang.buttonTipBeforeText + '2' + this.lang.buttonTipAfterText +'">2</a>';
                    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 += '<span class="curr">'+i+'</span>';
                        }else{
                            str += '<a '+this._getHandlerStr(i)+' title="'
                                +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+'</a>';
                        }
                    }
                    if(end != this.total){
                        str += dot;
                    }
                }
            }
            var pagerHtml = '<div>';
            if(this.isWrapedPageBtns){
                pagerHtml += '<span class="pageBtnWrap">' + str_first + str_prv + str + str_next + str_last + '</span>'
            }else{
                pagerHtml += str_first + str_prv + str + str_next + str_last;
            }
            if(this.isWrapedInfoTextAndGoPageBtn){
                pagerHtml += '<span class="infoTextAndGoPageBtnWrap">' + total_info + gopage_info + '</span>';
            }else{
                pagerHtml += total_info + gopage_info;
            }
            pagerHtml += '</div><div style="clear:both;"></div>';
            $("#"+this.pagerid).html(pagerHtml);
        },
        //分页按钮控件初始化
        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.mode){this.mode = config.mode;}
            if(config.gopageWrapId){this.gopageWrapId = config.gopageWrapId;}
            if(config.gopageButtonId){this.gopageButtonId = config.gopageButtonId;}
            if(config.gopageTextboxId){this.gopageTextboxId = config.gopageTextboxId;}
            if(config.isShowFirstPageBtn != undefined){this.isShowFirstPageBtn=config.isShowFirstPageBtn;}
            if(config.isShowLastPageBtn != undefined){this.isShowLastPageBtn=config.isShowLastPageBtn;}
            if(config.isShowPrePageBtn != undefined){this.isShowPrePageBtn=config.isShowPrePageBtn;}
            if(config.isShowNextPageBtn != undefined){this.isShowNextPageBtn=config.isShowNextPageBtn;}
            if(config.isShowTotalPage != undefined){this.isShowTotalPage=config.isShowTotalPage;}
            if(config.isShowCurrPage != undefined){this.isShowCurrPage=config.isShowCurrPage;}
            if(config.isShowTotalRecords != undefined){this.isShowTotalRecords=config.isShowTotalRecords;}
            if(config.isWrapedPageBtns){this.isWrapedPageBtns=config.isWrapedPageBtns;}
            if(config.isWrapedInfoTextAndGoPageBtn){this.isWrapedInfoTextAndGoPageBtn=config.isWrapedInfoTextAndGoPageBtn;}
            if(config.isGoPage != undefined){this.isGoPage=config.isGoPage;}
            if(config.lang){
                for(var key in config.lang){
                    this.lang[key] = config.lang[key];
                }
            }
            this.hrefFormer = config.hrefFormer || '';
            this.hrefLatter = config.hrefLatter || '';
            if(config.getLink && typeof(config.getLink) == 'function'){this.getLink = config.getLink;}
            if(config.click && typeof(config.click) == 'function'){this.click = config.click;}
            if(config.getHref && typeof(config.getHref) == 'function'){this.getHref = config.getHref;}
            if(!this._config){
                this._config = config;
            }
            //validate
            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;
        },
        _getHandlerStr : function(n){
            if(this.mode == 'click'){
                return 'href="'+this.getHref(n)+'" onclick="return kkpager._clickHandler('+n+')"';
            }
            //link模式，也是默认的
            return 'href="'+this.getLink(n)+'"';
        },
        _clickHandler   : function(n){
            var res = false;
            if(this.click && typeof this.click == 'function'){
                res = this.click.call(this,n) || false;
            }
            return res;
        }
};

kkpager.mon.js

/*
  kkpager V1.3
  https://github.com/pgkk/kkpager

  Copyright (c) 2013 cqzhangkang@163.com
  Licensed under the GNU GENERAL PUBLIC LICENSE
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('f u={R:\'u\',G:\'2r\',e:1,d:1,y:0,L:k,M:k,P:k,U:k,D:k,Y:k,A:E,X:k,10:k,Z:k,V:\'\',W:\'\',N:\'2s\',C:\'2t\',p:\'2p\',b:{12:\'\u9996\u9875\',1M:\'\u9996\u9875\',16:\'\u5c3e\u9875\',1I:\'\u5c3e\u9875\',14:\'\u4e0a\u4e00\u9875\',1J:\'\u4e0a\u4e00\u9875\',19:\'\u4e0b\u4e00\u9875\',1K:\'\u4e0b\u4e00\u9875\',1r:\'\u5171\',1u:\'\u9875\',1z:\'\u5f53\u524d\u7b2c\',1F:\'\u9875\',1n:\'/\',1g:\'\u5171\',11:\'\u6761\u6570\u636e\',1E:\'&2v;\u8f6c\u5230\',1C:\'\u786e\u5b9a\',1V:\'\u9875\',J:\'\u7b2c\',F:\'\u9875\'},z:h(n){6(n==1){l 3.V+3.W}l 3.V+\'2i\'+n+3.W},r:h(n){l E},I:h(n){l\'#\'},1A:h(){f w=$(\'#\'+3.C);$(\'#\'+3.p).2F(\'2E\',k);w.2G();w.1Z(\'1q\',\'26\');$(\'#\'+3.p).2w(\'1R\');w.1W({1q:\'+=22\'},20)},1S:h(){f 1w=3;2f(h(){f w=$(\'#\'+1w.C);w.1W({1q:\'-=25\'},27,h(){w.24();$(\'#\'+1w.p).21(\'1R\')})},28)},1Y:h(){f K=29[0]||1X.K;f B=K.2g||K.2e;6(B==8)l k;6(B==13){u.1x();l E}6(K.2d&&(B==2a||B==2b))l k;6(B<2c||B>2h)l E;l k},1x:h(){f 1m=$(\'#\'+3.p).1y();6(1h(1m)){$(\'#\'+3.p).1y(3.18);l}f n=1i(1m);6(n<1)n=1;6(n>3.d)n=3.d;6(3.G==\'r\'){3.1t(n)}j{1X.23=3.z(n)}},2J:h(n){3.1b[\'e\']=n;3.1O(3.1b,k)},1O:h(9,1N){6(1N||!3.1D){3.1P(9)}f Q=\'\',T=\'\',O=\'\',S=\'\';6(3.L){6(3.1p){Q=\'<a \'+3.q(1)+\' s="\'+(3.b.1M||3.b.12)+\'">\'+3.b.12+\'</a>\'}j{Q=\'<c g="15">\'+3.b.12+\'</c>\'}}6(3.P){6(3.1p){T=\'<a \'+3.q(3.1Q)+\' s="\'+(3.b.1J||3.b.14)+\'">\'+3.b.14+\'</a>\'}j{T=\'<c g="15">\'+3.b.14+\'</c>\'}}6(3.U){6(3.1j){O=\'<a \'+3.q(3.18)+\' s="\'+(3.b.1K||3.b.19)+\'">\'+3.b.19+\'</a>\'}j{O=\'<c g="15">\'+3.b.19+\'</c>\'}}6(3.M){6(3.1j){S=\'<a \'+3.q(3.d)+\' s="\'+(3.b.1I||3.b.16)+\'">\'+3.b.16+\'</a>\'}j{S=\'<c g="15">\'+3.b.16+\'</c>\'}}f m=\'\';f 1a=\'<c g="2B">...</c>\';f o=\'<c g="2A">\';f 1e=\'<c g="1n">\'+3.b.1n+\'</c>\';6(3.Y){o+=3.b.1z+\'<c g="2z">\'+3.e+\'</c>\'+3.b.1F;6(3.D){o+=1e;o+=3.b.1r+\'<c g="1G">\'+3.d+\'</c>\'+3.b.1u}j 6(3.A){o+=1e;o+=3.b.1g+\'<c g="1s">\'+3.y+\'</c>\'+3.b.11}}j 6(3.D){o+=3.b.1r+\'<c g="1G">\'+3.d+\'</c>\'+3.b.1u;6(3.A){o+=1e;o+=3.b.1g+\'<c g="1s">\'+3.y+\'</c>\'+3.b.11}}j 6(3.A){o+=3.b.1g+\'<c g="1s">\'+3.y+\'</c>\'+3.b.11}o+=\'</c>\';f 17=\'\';6(3.X){17=\'<c g="2x">\'+3.b.1E+\'<c 1o="\'+3.N+\'">\'+\'<1H 1B="2y" 1o="\'+3.C+\'" 1L="u.1x()" 1U="\'+3.b.1C+\'" />\'+\'<1H 1B="2C" 1o="\'+3.p+\'" 2D="u.1A()"  2I="l u.1Y(K);"   2H="u.1S()" 1U="\'+3.18+\'" /></c>\'+3.b.1V+\'</c>\'}6(3.d<=8){1d(f i=1;i<=3.d;i++){6(3.e==i){m+=\'<c g="1k">\'+i+\'</c>\'}j{m+=\'<a \'+3.q(i)+\' s="\'+3.b.J+i+3.b.F+\'">\'+i+\'</a>\'}}}j{6(3.e<=5){1d(f i=1;i<=7;i++){6(3.e==i){m+=\'<c g="1k">\'+i+\'</c>\'}j{m+=\'<a \'+3.q(i)+\' s="\'+3.b.J+i+3.b.F+\'">\'+i+\'</a>\'}}m+=1a}j{m+=\'<a \'+3.q(1)+\' s="\'+3.b.J+\'1\'+3.b.F+\'">1</a>\';m+=\'<a \'+3.q(2)+\' s="\'+3.b.J+\'2\'+3.b.F+\'">2</a>\';m+=1a;f H=3.e-2;f t=3.e+2;6(t>3.d){t=3.d;H=t-4;6(3.e-H<2){H=H-1}}j 6(t+1==3.d){t=3.d}1d(f i=H;i<=t;i++){6(3.e==i){m+=\'<c g="1k">\'+i+\'</c>\'}j{m+=\'<a \'+3.q(i)+\' s="\'+3.b.J+i+3.b.F+\'">\'+i+\'</a>\'}}6(t!=3.d){m+=1a}}}f x=\'<1f>\';6(3.10){x+=\'<c g="2n">\'+Q+T+m+O+S+\'</c>\'}j{x+=Q+T+m+O+S}6(3.Z){x+=\'<c g="2m">\'+o+17+\'</c>\'}j{x+=o+17}x+=\'</1f><1f 2l="2j:2k;"></1f>\';$("#"+3.R).2o(x)},1P:h(9){3.e=1h(9.e)?1:1i(9.e);3.d=1h(9.d)?1:1i(9.d);3.y=1h(9.y)?0:1i(9.y);6(9.R){3.R=9.R}6(9.G){3.G=9.G}6(9.N){3.N=9.N}6(9.C){3.C=9.C}6(9.p){3.p=9.p}6(9.L!=v){3.L=9.L}6(9.M!=v){3.M=9.M}6(9.P!=v){3.P=9.P}6(9.U!=v){3.U=9.U}6(9.D!=v){3.D=9.D}6(9.Y!=v){3.Y=9.Y}6(9.A!=v){3.A=9.A}6(9.10){3.10=9.10}6(9.Z){3.Z=9.Z}6(9.X!=v){3.X=9.X}6(9.b){1d(f 1v 2u 9.b){3.b[1v]=9.b[1v]}}3.V=9.V||\'\';3.W=9.W||\'\';6(9.z&&1c(9.z)==\'h\'){3.z=9.z}6(9.r&&1c(9.r)==\'h\'){3.r=9.r}6(9.I&&1c(9.I)==\'h\'){3.I=9.I}6(!3.1b){3.1b=9}6(3.e<1)3.e=1;3.d=(3.d<=1)?1:3.d;6(3.e>3.d)3.e=3.d;3.1Q=(3.e<=2)?1:(3.e-1);3.18=(3.e>=3.d-1)?3.d:(3.e+1);3.1p=(3.e>1);3.1j=(3.e<3.d);3.1D=k},q:h(n){6(3.G==\'r\'){l\'1T="\'+3.I(n)+\'" 1L="l u.1t(\'+n+\')"\'}l\'1T="\'+3.z(n)+\'"\'},1t:h(n){f 1l=E;6(3.r&&1c 3.r==\'h\'){1l=3.r.2q(3,n)||E}l 1l}};',62,170,'|||this|||if|||config||lang|span|total|pno|var|class|function||else|true|return|str||total_info|gopageTextboxId|_getHandlerStr|click|title|end|kkpager|undefined|btnGo|pagerHtml|totalRecords|getLink|isShowTotalRecords|code|gopageButtonId|isShowTotalPage|false|buttonTipAfterText|mode|begin|getHref|buttonTipBeforeText|event|isShowFirstPageBtn|isShowLastPageBtn|gopageWrapId|str_next|isShowPrePageBtn|str_first|pagerid|str_last|str_prv|isShowNextPageBtn|hrefFormer|hrefLatter|isGoPage|isShowCurrPage|isWrapedInfoTextAndGoPageBtn|isWrapedPageBtns|totalRecordsAfterText|firstPageText||prePageText|disabled|lastPageText|gopage_info|next|nextPageText|dot|_config|typeof|for|total_info_splitstr|div|totalRecordsBeforeText|isNaN|parseInt|hasNext|curr|res|str_page|totalInfoSplitStr|id|hasPrv|left|totalPageBeforeText|totalRecordNum|_clickHandler|totalPageAfterText|key|_this|gopage|val|currPageBeforeText|focus_gopage|type|gopageButtonOkText|inited|gopageBeforeText|currPageAfterText|totalPageNum|input|lastPageTipText|prePageTipText|nextPageTipText|onclick|firstPageTipText|enforceInit|generPageHtml|init|prv|focus|blur_gopage|href|value|gopageAfterText|animate|window|keypress_gopage|css|50|removeClass|30|location|hide||10px|100|400|arguments|99|118|48|ctrlKey|charCode|setTimeout|keyCode|57|_|clear|both|style|infoTextAndGoPageBtnWrap|pageBtnWrap|html|kkpager_btn_go_input|call|link|kkpager_gopage_wrap|kkpager_btn_go|in|nbsp|addClass|goPageBox|button|currPageNum|totalText|spanDot|text|onfocus|hideFocus|attr|show|onblur|onkeypress|selectPage'.split('|'),0,{}))

kkpager_blue.css

#kkpager{
    clear:both;
    color:#999;
    padding:5px 0px 5px 0px;
    font-size:13px;
}
#kkpager a{
    float: left;
    border: 1px solid #ccc;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor: pointer;
    background: #fff;
    text-decoration:none;
    color:#999;
}

#kkpager span.disabled{
    float: left;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border:1px solid #DFDFDF;
    background-color:#FFF;
    color:#DFDFDF;
}
#kkpager span.curr{
    float: left;
    border: 1px solid #31ACE2;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #F0FDFF;
    color: #31ACE2;
}
#kkpager a:hover{
    border:1px solid #31ACE2; 
    background-color:#31ACE2; 
    color:#fff;
}
#kkpager span.normalsize{
}
#kkpager_gopage_wrap{
    position:relative;
    left:0px;
    top:0px;
}
#kkpager_btn_go {
    width:44px;
    height:18px;
    border:0px;
    overflow:hidden;
    line-height:140%;
    padding:0px;
    margin:0px;
    text-align:center;
    cursor:pointer;
    background-color:#31ACE2;
    color:#FFF;
    position:absolute;
    left:0px;
    top:-2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display:none;
}
#kkpager_btn_go_input{
    width:36px;
    height:14px;
    color:#999;
    text-align:center;
    margin-left:1px;
    margin-right:1px;
    border:1px solid #DFDFDF;
    position:relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    left:0px;
    top:0px;
    outline:none;
}

#kkpager_btn_go_input.focus{
    border-color:#31ACE2;
}

#kkpager .pageBtnWrap{
    float:left;
}
#kkpager .infoTextAndGoPageBtnWrap{
    float:right;
}
#kkpager .spanDot{
    float:left;
    margin-right:5px;
}

#kkpager .currPageNum{
    color:#FD7F4D;
}

#kkpager .infoTextAndGoPageBtnWrap{
    padding-top:5px;
}

kkpager.orange.css

#kkpager{
    clear:both;
    color:#999;
    padding:5px 0px 5px 0px;
    font-size:13px;
}
#kkpager a{
    float: left;
    border: 1px solid #ccc;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor: pointer;
    background: #fff;
    text-decoration:none;
    color:#999;
}

#kkpager span.disabled{
    float: left;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border:1px solid #DFDFDF;
    background-color:#FFF;
    color:#DFDFDF;
}
#kkpager span.curr{
    float: left;
    border: 1px solid #FF6600;
    display: inline;
    padding: 3px 10px 3px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #FFEEE5;
    color: #FF6600;
}
#kkpager a:hover{
    border:1px solid #FF6600; 
    background-color:#FF6600; 
    color:#fff;
}
#kkpager span.normalsize{
}
#kkpager_gopage_wrap{
    position:relative;
    left:0px;
    top:0px;
}
#kkpager_btn_go {
    width:44px;
    height:18px;
    border:0px;
    overflow:hidden;
    line-height:140%;
    padding:0px;
    margin:0px;
    text-align:center;
    cursor:pointer;
    background-color:#FF6600;
    color:#FFF;
    position:absolute;
    left:0px;
    top:-2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    display:none;
}
#kkpager_btn_go_input{
    width:36px;
    height:14px;
    color:#999;
    text-align:center;
    margin-left:1px;
    margin-right:1px;
    border:1px solid #DFDFDF;
    position:relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    left:0px;
    top:0px;
    outline:none;
}

#kkpager_btn_go_input.focus{
    border-color:#FF6600;
}

#kkpager .pageBtnWrap{
    float:left;
}
#kkpager .infoTextAndGoPageBtnWrap{
    float:right;
}
#kkpager .spanDot{
    float:left;
    margin-right:5px;
}

#kkpager .currPageNum{
    color:#FD7F4D;
}

#kkpager .infoTextAndGoPageBtnWrap{
    padding-top:5px;
}

test.html

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_blue.css" />
</head>
<body>
<div style="width:800px;margin:0 auto;">
<div id="kkpager"></div>
</div>
<script type="text/javascript">
function getParameter(name) { 
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r!=null) return unescape(r[2]); return null;
}

//init
$(function(){
    var totalPage = 20;
    var totalRecords = 390;
    var pageNo = getParameter('pno');
    if(!pageNo){
        pageNo = 1;
    }
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        //链接前部
        hrefFormer : 'pager_test',
        //链接尾部
        hrefLatter : '.html',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter + "?pno="+n;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/

        //,
        //mode : 'click',//默认值是link，可选link或者click
        //click : function(n){
        //  this.selectPage(n);
        //  return false;
        //}
    });
});
</script>
<div style="width:800px;margin:0 auto;">
<h3>引入代码：</h3>
<textarea style="width:800px;height:60px;">
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_blue.css" />
</textarea>
<h3>调用代码：</h3>
<textarea style="width:800px;height:300px;">
<script type="text/javascript">
//init
$(function(){
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        //链接前部
        hrefFormer : 'pager_test',
        //链接尾部
        hrefLatter : '.html',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter + "?pno="+n;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/

        //,
        //mode : 'click',//默认值是link，可选link或者click
        //click : function(n){
        //  this.selectPage(n);
        //  return false;
        //}
    });
});
</script>
</textarea>
<h3>其他示例：</h3>
<a href="pager_test_orange_color.html?pno=17">kkpager示例：橘色皮肤</a><br/>
<a href="pager_test_clickmode.html?pno=17">kkpager示例：click模式</a><br/>
<div>
</body>
</html>

pager_test.html

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_orange.css" />
</head>
<body>
<div style="width:800px;margin:0 auto;">
<div id="kkpager"></div>
</div>
<script type="text/javascript">
function getParameter(name) { 
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r!=null) return unescape(r[2]); return null;
}

//init
$(function(){
    var totalPage = 20;
    var totalRecords = 390;
    var pageNo = getParameter('pno');
    if(!pageNo){
        pageNo = 1;
    }
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        mode : 'click',//默认值是link，可选link或者click
        click : function(n){
            // do something
            //手动选中按钮
            this.selectPage(n);
            return false;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/
    });
});
</script>
<div style="width:800px;margin:0 auto;">
<h3>引入代码：</h3>
<textarea style="width:800px;height:60px;">
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_orange.css" />
</textarea>
<h3>调用代码：</h3>
<textarea style="width:800px;height:300px;">
<script type="text/javascript">
//init
$(function(){
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        mode : 'click',//默认值是link，可选link或者click
        click : function(n){
            // do something
            //手动选中按钮
            this.selectPage(n);
            return false;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/
    });
});
</script>
</textarea>
<h3>其他示例：</h3>
<a href="pager_test.html?pno=17">kkpager示例：蓝色皮肤(link模式)</a><br/>
<a href="pager_test_orange_color.html?pno=17">kkpager示例：橘色皮肤(link模式)</a><br/>
<div>
</body>
</html>

test3.html

<!DOCTYPE html>
<html>
<head>
<title>test page</title>
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_orange.css" />
</head>
<body>
<div style="width:800px;margin:0 auto;">
<div id="kkpager"></div>
</div>
<script type="text/javascript">
function getParameter(name) { 
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
    var r = window.location.search.substr(1).match(reg); 
    if (r!=null) return unescape(r[2]); return null;
}

//init
$(function(){
    var totalPage = 20;
    var totalRecords = 390;
    var pageNo = getParameter('pno');
    if(!pageNo){
        pageNo = 1;
    }
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        //链接前部
        hrefFormer : 'pager_test_orange_color',
        //链接尾部
        hrefLatter : '.html',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter + "?pno="+n;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/

        //,
        //mode : 'click',//默认值是link，可选link或者click
        //click : function(n){
        //  this.selectPage(n);
        //  return false;
        //}
    });
});
</script>
<div style="width:800px;margin:0 auto;">
<h3>引入代码：</h3>
<textarea style="width:800px;height:60px;">
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager_orange.css" />
</textarea>
<h3>调用代码：</h3>
<textarea style="width:800px;height:300px;">
<script type="text/javascript">
//init
$(function(){
    //生成分页
    //有些参数是可选的，比如lang，若不传有默认值
    kkpager.generPageHtml({
        pno : pageNo,
        //总页码
        total : totalPage,
        //总数据条数
        totalRecords : totalRecords,
        //链接前部
        hrefFormer : 'pager_test_orange_color',
        //链接尾部
        hrefLatter : '.html',
        getLink : function(n){
            return this.hrefFormer + this.hrefLatter + "?pno="+n;
        }
        /*
        ,lang               : {
            firstPageText           : '首页',
            firstPageTipText        : '首页',
            lastPageText            : '尾页',
            lastPageTipText         : '尾页',
            prePageText             : '上一页',
            prePageTipText          : '上一页',
            nextPageText            : '下一页',
            nextPageTipText         : '下一页',
            totalPageBeforeText     : '共',
            totalPageAfterText      : '页',
            currPageBeforeText      : '当前第',
            currPageAfterText       : '页',
            totalInfoSplitStr       : '/',
            totalRecordsBeforeText  : '共',
            totalRecordsAfterText   : '条数据',
            gopageBeforeText        : '&nbsp;转到',
            gopageButtonOkText      : '确定',
            gopageAfterText         : '页',
            buttonTipBeforeText     : '第',
            buttonTipAfterText      : '页'
        }*/

        //,
        //mode : 'click',//默认值是link，可选link或者click
        //click : function(n){
        //  this.selectPage(n);
        //  return false;
        //}
    });
});
</script>
</textarea>
<h3>其他示例：</h3>
<a href="pager_test.html?pno=17">kkpager示例：蓝色皮肤</a><br/>
<a href="pager_test_clickmode.html?pno=17">kkpager示例：click模式</a><br/>
<div>
</body>
</html>