本文共 5597 字，大约阅读时间需要 18 分钟。

分页控件中经常见到的是和服务器端结合的技术实现，但是适用性不全面，如下是我编写的一个客户端技术控件，有兴趣的可以一起研究一下。

page.js

// JavaScript Document// UTF-8//author: steven yang//email: yifi@tom.com//功能: 分页导航栏生成//生成导航参数://nav所在div id:navDivId//当前页: nowPageNo//最大页: maxPageNo//每页行数: lineNum//需要提交的form id or name: formIdOrName//需要提交的变量，导航div必需在form中!//每页行数:navLineNum//页号:navPageNoStevenPageNav = function(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName){ this.navDivId = navDivId; this.nowPageNo = nowPageNo; this.maxPageNo = maxPageNo; this.minPageNo = 1; this.lineNum = lineNum; this.formIdOrName = formIdOrName; this.divHTML = "";};//兼容性修改注册事件 MSDN提供if (!window.addEventListener) { window.addEventListener = function (type, listener, useCapture) { attachEvent('on' + type, function() { listener(event) }); }}StevenPageNav.setup = function(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName){ window.addEventListener( "load", function(){ (new StevenPageNav(navDivId, nowPageNo, maxPageNo, lineNum, formIdOrName)).makeNavDiv(); } ,false);};//注意在构建html时在合适的时候用单引号StevenPageNav.prototype.makeNavDiv = function(){ this.divHTML = "<div class=/"navmain/">" //生成页号列表 var mpnl = makePageNoList(this.minPageNo, this.maxPageNo, this.lineNum, this.nowPageNo); /* for(var i in mpnl){ alert(i+"/n"+mpnl[i]); } */ if(mpnl.viewFirstPage){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"first page/" οnclick=/"return StevenPageNav.clickNum(1, '"+this.formIdOrName+"')/"><<</a></div>" this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"previous page/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo-this.lineNum)+", '"+this.formIdOrName+"')/">...</a></div>" } if(this.nowPageNo > this.minPageNo){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"previous/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo-1)+", '"+this.formIdOrName+"')/"> < </a></div>" } for(var no = mpnl.startIndex; no <= mpnl.endIndex; no++){ this.divHTML += "<a href="/" mce_href="/""#/" "; if(no == this.nowPageNo){ this.divHTML += "class=/"active/""; } this.divHTML += " οnclick=/"return StevenPageNav.clickNum("+no+",'"+this.formIdOrName+"')/">"+no+"</a>"; } if(this.nowPageNo < this.maxPageNo){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+1)+", '"+this.formIdOrName+"')/"> > </a></div>" } if(mpnl.viewLastPage){ this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"next page/" οnclick=/"return StevenPageNav.clickNum("+(this.nowPageNo+this.lineNum)+", '"+this.formIdOrName+"')/">...</a></div>" this.divHTML += "<div><a href="/" mce_href="/""#/" title=/"last page/" οnclick=/"return StevenPageNav.clickNum("+(this.maxPageNo)+", '"+this.formIdOrName+"')/">>></a></div>" } this.divHTML += "<div><input name=/"navLineCount/" value=/""+this.lineNum+"/"/>/"; this.divHTML += "<input name=/"navPageNo/" value=/""+this.nowPageNo+"/"/>/"+this.maxPageNo; this.divHTML += "<input type=/"submit/" value=/"Go/"/></div>" this.divHTML += "</div>"; document.getElementById(this.navDivId).innerHTML = this.divHTML;};StevenPageNav.clickNum = function(pageNo, formIdOrName){ var f = (document.getElementById("formIdOrName") || document.forms[formIdOrName]); f.elements["navPageNo"].value = pageNo; //alert(f.elements["navPageNo"].value); f.submit(); return false;};//生成页号列表信息function makePageNoList(minPageNo, maxPageNo, listPageCount, currPageNo){ var ret = {}; var startIndex = currPageNo - window.parseInt(listPageCount / 2); var endIndex = currPageNo + window.parseInt(listPageCount / 2); if(startIndex < minPageNo){ endIndex += minPageNo - startIndex; startIndex = minPageNo; if(endIndex > maxPageNo){ endIndex = maxPageNo; } } if(endIndex > maxPageNo){ startIndex -= endIndex - maxPageNo; endIndex = maxPageNo; if(startIndex < minPageNo){ startIndex = minPageNo; } } ret.startIndex = startIndex; ret.endIndex = endIndex; if(startIndex > minPageNo){ ret.viewFirstPage = true; }else{ ret.viewFirstPage = false; } if(endIndex < maxPageNo){ ret.viewLastPage = true; }else{ ret.viewLastPage = false; } return ret;}

对于代码中自动注册onload事件的代码原理，见另一篇

page.css

@charset "utf-8";/* CSS Document */.navmain { font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:center; margin:0px auto; /*for before IE 6*/ padding:5px;}.navmain *{ margin:0px; padding:0px; border:none; -moz-border-radius: 10px;}.navmain div{ display:inline;}.navmain a{ border:solid 1px #0000FF; padding:3px 5px; margin:0px 1px; background-color:#00FF00;}.navmain a:link, .navmain a:visited{ color:#0000FF; text-decoration:none;}.navmain a:hover, .navmain a:active{ background-color:#FF0;}.navmain .active{ background-color:#FF0;}.navmain input{ width:20px; font-size:12px; border:solid 1px green;}

其中用到了moz专用的圆角效果

代码示例

page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>分布控件</title><link href="page.css" mce_href="page.css" rel="stylesheet" type="text/css" /><mce:script language="javascript" type="text/javascript" src="page.js" mce_src="page.js"></mce:script><mce:script language="javascript" type="text/javascript"><!-- StevenPageNav.setup("pageformnav", 11, 50, 7, "pageform");// --></mce:script></head><body><form id="pageform" method="post" action="http://g.cn"> <input name="a"/> <input name="b"/> <button type="submit">提交</button> <div id="pageformnav"></div></form></body></html>

效果展示

FF3.0+

IE6.0+

have fun!