記錄一下簡易版的頁碼產生器

也寫一下頁碼產生器。在使用的時候需要使用事件代理的方式去註冊事件。基本思路就是判斷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 1page = 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 - maxPageif(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>');

只是一個簡易版，需要自己配置和修改。僅供自己記錄下來。