记录一下简易版的页码生成器

最新推荐文章于 2025-05-21 14:38:25 发布

原创最新推荐文章于 2025-05-21 14:38:25 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #function #output #list #html #border

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

CSS

35 篇文章

订阅专栏

本文详细介绍了页码生成器的实现原理，包括使用事件代理方式注册事件，通过判断元素的nodeName来获取页码，并提供了相应的CSS样式和JavaScript代码实现。文章还展示了如何使用提供的代码片段来生成不同布局的页码组件。

也写一下页码生成器。在使用的时候需要使用事件代理的方式去注册事件。基本思路就是判断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>');

只是一个简易版，需要自己配置和修改。仅供自己记录下来。