<!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>
<style type="text/css">
.firs{ color:#f00; margin-left:5px; cursor:pointer}
.last{ color:green; margin-left:5px; cursor:pointer}
.prev{ color:#fc0; margin-left:5px;cursor:pointer }
.next{ color:#fcc; margin-left:5px; cursor:pointer}
.norm{ margin-left:5px; cursor:pointer}
.sele{ margin-left:5px;font-weight:bold;cursor:pointer}
</style>
</head>
<body>
<div id="panel"></div>
<script>
function Pager() {
var o =this;
o.setting = {
p: 1, //目前鎖定頁
pc: 0, //總頁數
size: 5, //每頁的頁碼數量
fun: function (p) { } //外部調用的function
}
o.css = {
firs: 'firs',//首頁 className
last: 'last',//末頁 className
prev: 'prev',//上一頁 className
next: 'next',//下一頁 className
norm: 'norm',//未選中頁 className
sele: 'sele' //選中頁 className
}
var getSpan = function () {
return document.createElement("span");
}
var getP = function (p, txt) {
txt = txt || p;
var _span = getSpan();
_span.innerHTML = txt;
_span.setAttribute("p", p);
_span.onclick = function () {
o.setting.p = p;
o.setting.fun(this.getAttribute("p"));
}
return _span;
}
var getCSSP = function (p) {
var CSSP = getP(p);
if (p == o.setting.p) {
CSSP.className = o.css.sele;
} else {
CSSP.className = o.css.norm;
}
return CSSP;
}
//獲得目前設定下的頁碼 html 元素
o.get = function () {
var _docFrag = document.createDocumentFragment();
//上一頁
if (o.setting.p > 1) {
var _firstP = getP(1, '首頁');
_firstP.className = o.css.firs;
_docFrag.appendChild(_firstP);
var _prevP = getP(o.setting.p - 1, '上一頁');
_prevP.className = o.css.prev;
_docFrag.appendChild(_prevP);
}
if (o.setting.pc < o.setting.size) {
for (var p = 1; p <= o.setting.pc; p++) {
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
} else {
var star_p = o.setting.p - (o.setting.size - 1) / 2;
if(star_p>0){
for (var i = 0; i < o.setting.size; i++) {
var p = star_p + i;
if (p <= o.setting.pc) {
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
}
}else{
for(var p = 1; p<= o.setting.size;p++){
var _span = getCSSP(p);
_docFrag.appendChild(_span);
}
}
}
//下一頁
if (o.setting.p < o.setting.pc) {
var _nextP = getP(o.setting.p + 1, '下一頁');
_nextP.className = o.css.next;
_docFrag.appendChild(_nextP);
var _lastP = getP(o.setting.pc, '末頁');
_lastP.className = o.css.last;
_docFrag.appendChild(_lastP);
}
return _docFrag;
}
}
//demo
var panel = document.getElementById('panel');
var p = new Pager();
p.setting.p = 20; //設定目前鎖定頁 為 20
p.setting.pc = 30; //設定 總頁數 為 30
p.setting.fun = function(p_num){ //當點選 某頁的時候 觸發的函數
//ajax.ashx?action=getmsg&p=p_num
panel.innerHTML = '';
panel.appendChild(p.get());
}
panel.appendChild(p.get()); //把頁碼append 到 容器中
</script>
</body>
</html>
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)