From 48cb4953f05470bcc7ecd4d676d18a0a0ec863f3 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 8 Sep 2016 16:03:24 +0800 Subject: [PATCH 1/4] turn to a function to apply different DIV id in one page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 把定义对象改成以函数方式获得,并在JS最开头定义一个kkpager对象,以使点击事件有效.同时需要把放置翻页控件的div定义为指定id. --- src/kkpager.js | 601 +++++++++++++++++++++++++------------------------ 1 file changed, 303 insertions(+), 298 deletions(-) diff --git a/src/kkpager.js b/src/kkpager.js index 5354916..0618355 100644 --- a/src/kkpager.js +++ b/src/kkpager.js @@ -5,244 +5,209 @@ 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 : ' 转到', - 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(); +var kkpager; +function getKKPagerObject(pagerId){ + var kkpager = { + pagerid : pagerId, //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 : ' 转到', + 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; - } - //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 = ''+this.lang.firstPageText+''; - }else{ - str_first = ''+this.lang.firstPageText+''; + }, + //获取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; } - } - if(this.isShowPrePageBtn){ - if(this.hasPrv){ - str_prv = ''+this.lang.prePageText+''; - }else{ - str_prv = ''+this.lang.prePageText+''; + //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; } - } - if(this.isShowNextPageBtn){ - if(this.hasNext){ - str_next = ''+this.lang.nextPageText+''; + 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{ - str_next = ''+this.lang.nextPageText+''; + window.location = this.getLink(n); } - } - if(this.isShowLastPageBtn){ - if(this.hasNext){ - str_last = ''+this.lang.lastPageText+''; - }else{ - str_last = ''+this.lang.lastPageText+''; + }, + //不刷新页面直接手动调用选中某一页码 + 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 = ''; - var dot = '...'; - var total_info=''; - var total_info_splitstr = ''+this.lang.totalInfoSplitStr+''; - if(this.isShowCurrPage){ - total_info += this.lang.currPageBeforeText + '' + this.pno + '' + this.lang.currPageAfterText; - if(this.isShowTotalPage){ - total_info += total_info_splitstr; - total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText; - }else if(this.isShowTotalRecords){ - total_info += total_info_splitstr; - total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; + + var str_first='',str_prv='',str_next='',str_last=''; + if(this.isShowFirstPageBtn){ + if(this.hasPrv){ + str_first = ''+this.lang.firstPageText+''; + }else{ + str_first = ''+this.lang.firstPageText+''; + } } - }else if(this.isShowTotalPage){ - total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText;; - if(this.isShowTotalRecords){ - total_info += total_info_splitstr; - total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; + if(this.isShowPrePageBtn){ + if(this.hasPrv){ + str_prv = ''+this.lang.prePageText+''; + }else{ + str_prv = ''+this.lang.prePageText+''; + } } - }else if(this.isShowTotalRecords){ - total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; - } - total_info += ''; - - var gopage_info = ''; - if(this.isGoPage){ - gopage_info = ''+this.lang.gopageBeforeText+''+ - ''+ - ''+this.lang.gopageAfterText+''; - } - - //分页处理 - if(this.total <= 8){ - for(var i=1;i<=this.total;i++){ - if(this.pno == i){ - str += ''+i+''; + if(this.isShowNextPageBtn){ + if(this.hasNext){ + str_next = ''+this.lang.nextPageText+''; }else{ - str += ''+i+''; + str_next = ''+this.lang.nextPageText+''; } } - }else{ - if(this.pno <= 5){ - for(var i=1;i<=7;i++){ - if(this.pno == i){ - str += ''+i+''; - }else{ - str += ''+i+''; - } + if(this.isShowLastPageBtn){ + if(this.hasNext){ + str_last = ''+this.lang.lastPageText+''; + }else{ + str_last = ''+this.lang.lastPageText+''; } - str += dot; - }else{ - str += '1'; - str += '2'; - 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; + } + var str = ''; + var dot = '...'; + var total_info=''; + var total_info_splitstr = ''+this.lang.totalInfoSplitStr+''; + if(this.isShowCurrPage){ + total_info += this.lang.currPageBeforeText + '' + this.pno + '' + this.lang.currPageAfterText; + if(this.isShowTotalPage){ + total_info += total_info_splitstr; + total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText; + }else if(this.isShowTotalRecords){ + total_info += total_info_splitstr; + total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; } - for(var i=begin;i<=end;i++){ + }else if(this.isShowTotalPage){ + total_info += this.lang.totalPageBeforeText + ''+this.total + '' + this.lang.totalPageAfterText;; + if(this.isShowTotalRecords){ + total_info += total_info_splitstr; + total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; + } + }else if(this.isShowTotalRecords){ + total_info += this.lang.totalRecordsBeforeText + ''+this.totalRecords + '' + this.lang.totalRecordsAfterText; + } + total_info += ''; + + var gopage_info = ''; + if(this.isGoPage){ + gopage_info = ''+this.lang.gopageBeforeText+''+ + ''+ + ''+this.lang.gopageAfterText+''; + } + + //分页处理 + if(this.total <= 8){ + for(var i=1;i<=this.total;i++){ if(this.pno == i){ str += ''+i+''; }else{ @@ -250,81 +215,121 @@ var kkpager = { +this.lang.buttonTipBeforeText + i + this.lang.buttonTipAfterText+'">'+i+''; } } - if(end != this.total){ + }else{ + if(this.pno <= 5){ + for(var i=1;i<=7;i++){ + if(this.pno == i){ + str += ''+i+''; + }else{ + str += ''+i+''; + } + } + str += dot; + }else{ + str += '1'; + str += '2'; 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 += ''+i+''; + }else{ + str += ''+i+''; + } + } + if(end != this.total){ + str += dot; + } } } - } - var pagerHtml = '
'; - if(this.isWrapedPageBtns){ - pagerHtml += '' + str_first + str_prv + str + str_next + str_last + '' - }else{ - pagerHtml += str_first + str_prv + str + str_next + str_last; - } - if(this.isWrapedInfoTextAndGoPageBtn){ - pagerHtml += '' + total_info + gopage_info + ''; - }else{ - pagerHtml += total_info + gopage_info; - } - pagerHtml += '
'; - $("#"+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]; + var pagerHtml = '
'; + if(this.isWrapedPageBtns){ + pagerHtml += '' + str_first + str_prv + str + str_next + str_last + '' + }else{ + pagerHtml += str_first + str_prv + str + str_next + str_last; } + if(this.isWrapedInfoTextAndGoPageBtn){ + pagerHtml += '' + total_info + gopage_info + ''; + }else{ + pagerHtml += total_info + gopage_info; + } + pagerHtml += '
'; + $("#"+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; } - 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; - } -}; \ No newline at end of file + }; + + return kkpager; +} From de4638ff0f1667cca0f9d59034abb9be3892bbed Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 8 Sep 2016 16:11:25 +0800 Subject: [PATCH 2/4] Change kkpager to class MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 把kkpager由id改成class,然后重新定义其他的id作为传入参数.
使用方法调整一下: //生成分页控件 kkpager = getKKPagerObject('kkpager_XXXXXXX'); kkpager.generPageHtml({ pagerid : 'kkpager_XXXXXXX', pno : 1, mode : 'click', //设置为click模式 //总页码 total : totalPage, //总数据条数 totalRecords : grantMenuListJson.length, //点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click //适用于不刷新页面，比如ajax click : function(index){ //这里可以做自已的处理 //处理完后可以手动调用selectPage进行页码选中切换 this.selectPage(index); }, //getHref是在click模式下链接算法，一般不需要配置，默认代码如下 getHref : function(n){ return '#'; } }); --- src/kkpager_blue.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/kkpager_blue.css b/src/kkpager_blue.css index a1dace0..373d432 100644 --- a/src/kkpager_blue.css +++ b/src/kkpager_blue.css @@ -1,10 +1,10 @@ -#kkpager{ +.kkpager{ clear:both; color:#999; padding:5px 0px 5px 0px; font-size:13px; } -#kkpager a{ +.kkpager a{ float: left; border: 1px solid #ccc; display: inline; @@ -19,7 +19,7 @@ color:#999; } -#kkpager span.disabled{ +.kkpager span.disabled{ float: left; display: inline; padding: 3px 10px 3px 10px; @@ -31,7 +31,7 @@ background-color:#FFF; color:#DFDFDF; } -#kkpager span.curr{ +.kkpager span.curr{ float: left; border: 1px solid #31ACE2; display: inline; @@ -43,12 +43,12 @@ background: #F0FDFF; color: #31ACE2; } -#kkpager a:hover{ +.kkpager a:hover{ border:1px solid #31ACE2; background-color:#31ACE2; color:#fff; } -#kkpager span.normalsize{ +.kkpager span.normalsize{ } #kkpager_gopage_wrap{ position:relative; @@ -94,21 +94,21 @@ border-color:#31ACE2; } -#kkpager .pageBtnWrap{ +.kkpager .pageBtnWrap{ float:left; } -#kkpager .infoTextAndGoPageBtnWrap{ +.kkpager .infoTextAndGoPageBtnWrap{ float:right; } -#kkpager .spanDot{ +.kkpager .spanDot{ float:left; margin-right:5px; } -#kkpager .currPageNum{ +.kkpager .currPageNum{ color:#FD7F4D; } -#kkpager .infoTextAndGoPageBtnWrap{ +.kkpager .infoTextAndGoPageBtnWrap{ padding-top:5px; -} \ No newline at end of file +} From 3b75fb302bbe04b7876bfbc634ea8fb4a96dcdb3 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 8 Sep 2016 16:20:23 +0800 Subject: [PATCH 3/4] Change kkpager to class --- src/kkpager_orange.css | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/kkpager_orange.css b/src/kkpager_orange.css index 43c5bfa..d8587c6 100644 --- a/src/kkpager_orange.css +++ b/src/kkpager_orange.css @@ -1,10 +1,10 @@ -#kkpager{ +.kkpager{ clear:both; color:#999; padding:5px 0px 5px 0px; font-size:13px; } -#kkpager a{ +.kkpager a{ float: left; border: 1px solid #ccc; display: inline; @@ -19,7 +19,7 @@ color:#999; } -#kkpager span.disabled{ +.kkpager span.disabled{ float: left; display: inline; padding: 3px 10px 3px 10px; @@ -31,7 +31,7 @@ background-color:#FFF; color:#DFDFDF; } -#kkpager span.curr{ +.kkpager span.curr{ float: left; border: 1px solid #FF6600; display: inline; @@ -43,12 +43,12 @@ background: #FFEEE5; color: #FF6600; } -#kkpager a:hover{ +.kkpager a:hover{ border:1px solid #FF6600; background-color:#FF6600; color:#fff; } -#kkpager span.normalsize{ +.kkpager span.normalsize{ } #kkpager_gopage_wrap{ position:relative; @@ -94,21 +94,21 @@ border-color:#FF6600; } -#kkpager .pageBtnWrap{ +.kkpager .pageBtnWrap{ float:left; } -#kkpager .infoTextAndGoPageBtnWrap{ +.kkpager .infoTextAndGoPageBtnWrap{ float:right; } -#kkpager .spanDot{ +.kkpager .spanDot{ float:left; margin-right:5px; } -#kkpager .currPageNum{ +.kkpager .currPageNum{ color:#FD7F4D; } -#kkpager .infoTextAndGoPageBtnWrap{ +.kkpager .infoTextAndGoPageBtnWrap{ padding-top:5px; -} \ No newline at end of file +} From 79a8f3352fdd1f72ea5ee4b52464ee7714f78926 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 8 Sep 2016 16:28:23 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=9C=A8=E4=B8=80?= =?UTF-8?q?=E4=B8=AA=E9=A1=B5=E9=9D=A2=E4=B8=AD=E6=9C=89=E5=A4=9A=E4=B8=AA?= =?UTF-8?q?=E5=88=86=E9=A1=B5=E6=8E=A7=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 把定义对象,改为获取对象.实现在一个页面定义多个分页控件. --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e618e74..aab56a2 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ http://pgkk.github.io/kkpager/example/pager_test_clickmode.html ``` ### HTML DOM容器 ```html -
+
``` ### 调用方法 @@ -23,7 +23,9 @@ http://pgkk.github.io/kkpager/example/pager_test_clickmode.html ```html