也写一下页码生成器。在使用的时候需要使用事件代理的方式去注册事件。基本思路就是判断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>');
只是一个简易版,需要自己配置和修改。仅供自己记录下来。