也写一下页码生成器。在使用的时候需要使用事件代理的方式去注册事件。基本思路就是判断e.target||e.srcElement的nodeName为A,先去data-val存在则计算,不存在则取元素对应的firstChild.nodeValue即可得到页码。大致如下:
function delegate(o){ o.addEvent('click', function(e){ var target = e.target, t, page; if(target.nodeName == 'A'){ t = target.getAttribute('data-val'); if(t){ // -1 or 1 page = parseInt(t) + currPage; }else{ page = parseInt(target.firstChild.nodeValue); } } }); }
对应的CSS如下:
.page-num{text-align:center;padding:20px 0;} .page-num a, .page-num span{display:inline-block;*display:inline;*zoom:1;margin:0 2px;padding:0 5px;height:20px;border:1px solid #ccc;color:#7f7f7f;font:12px/20px arial;vertical-align:middle;} .page-num .current{background-color:#e3e3e3;border-color:#b4b4b4;font-weight:bold;color:#7f7f7f;} .page-num .tri{display:inline-block;*zoom:1;font-size:0;line-height:0;width:0;height:0;border:4px dashed transparent;} .page-num .up .tri{margin:7px 5px 0 -4px;border-right:4px solid #7f7f7f;} .page-num .down .tri{margin: 7px -4px 0 5px;border-left:4px solid #7f7f7f;} .page-num span{color:#ccc;} .page-num span.up .tri{border-right-color:#ccc;} .page-num span.down .tri{border-left-color:#ccc;}
对应的JS如下:
/* <div id="page-num" class="page-num"> <a href="#" hidefocus="true" class="up"><i class="tri"></i>上一页</a> <a href="#" hidefocus="true">1</a> <span>...</span> <a href="#" hidefocus="true">6</a> <a href="#" hidefocus="true">7</a> <span class="current">8</span> <a href="#" hidefocus="true">9</a> <a href="#" hidefocus="true">10</a> <span>...</span> <a href="#" hidefocus="true">99</a> <a href="#" hidefocus="true" class="down">下一页<i class="tri"></i></a> </div> OR <div id="page-num" class="page-num"> <span class="up"><i class="tri"></i>上一页</span> <a href="#" hidefocus="true">1</a> <span>...</span> <a href="#" hidefocus="true">6</a> <a href="#" hidefocus="true">7</a> <span class="current">8</span> <a href="#" hidefocus="true">9</a> <a href="#" hidefocus="true">10</a> <span>...</span> <a href="#" hidefocus="true">99</a> <span class="down">下一页<i class="tri"></i></span> </div> */ /** *@param: <number> currPage 当前页码,default: 1; *@param: <number> minPage 最小页码,default: 1; *@param: <number> maxPage 最大页码,default: 99; *@param: <number> list 当前页面旁边显示的数目,default: 2; 比如:显示页面数目为2,当前页码为5,则为: 1 ... 3 4 5 6 7 ... 10 *@param: <string> str 填充字符,default: ''; */ function outputPage(o){ var html = [], currPage = o.currPage||1, minPage = o.minPage||1, maxPage = o.maxPage||99, //list = o.list||2; str = o.str||''; // 字符范围为minPage - maxPage if(currPage<minPage||currPage>maxPage)return ''; html.push(currPage==minPage?'<span class="up"><i class="tri"></i>上一页</span>':'<a href="#" hidefocus="true" class="up" data-val="-1"><i class="tri"></i>上一页</a>'); // 判断是否需要加第一页和... if(currPage>minPage+2){ html.push('<a href="#" hidefocus="true">1</a>'); if(currPage>4)html.push('<span>...</span>'); } // 当前页及旁边内容 html.push(output(currPage, o.list||2)); // 判断是否需要输出最后一页 if(maxPage>currPage+2){ html.push('<span>...</span>'); } if(maxPage>currPage+1){ html.push('<a href="#" hidefocus="true">'+maxPage+'</a>'); } html.push(currPage==maxPage?'<span hidefocus="true" class="down">下一页<i class="tri"></i></span>':'<a href="#" hidefocus="true" class="down" data-val="1">下一页<i class="tri"></i></a>'); function output(t, list){ var html = [], tmp = t-3, l = list*2+1; while(l--){ if(!(minPage>++tmp||maxPage<tmp)){ html.push(l==list?'<span class="current">'+t+'</span>':'<a href="#" hidefocus="true">'+tmp+'</a>'); } } return html.join(str); } return html.join(str); } //document.write('<div class="page-num">'+outputPage({currPage:2, maxPage:30})+'</div>');
只是一个简易版,需要自己配置和修改。仅供自己记录下来。