门户网页分页（pagination Style）
项目需要，写了个网页分页。贴出来show下。
一、css样式
Code/* ------------------------------------------------ */
/* ------------- Pagination: vnet1 Style----------- */
/* ------------------------------------------------ */
#pagination-vnet1 { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet1 .point { padding:3px; vertical-align:baseline}
#pagination-vnet1 .goto { margin-left:3px;font-size:13px;}
#pagination-vnet1 .goto input { border:solid 1px #DDDDDD; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet1 li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet1 a { border:solid 1px #DDDDDD; margin-right:2px; }
#pagination-vnet1 .point { padding:5px;vertical-align:baseline}
#pagination-vnet1 .previous-off,
#pagination-vnet1 .next-off { color:#666666; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-vnet1 .next a,
#pagination-vnet1 .previous a { font-weight:bold; border:solid 1px #FFFFFF; }
#pagination-vnet1 .active { color:#ff0084; font-weight:bold; display:block; float:left; padding:4px 6px; }
#pagination-vnet1 a:link,
#pagination-vnet1 a:visited { color:#0063e3; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-vnet1 a:hover { border:solid 1px #666666; }
/* -------------------------------------------- */
/* ------------- Pagination: vnet2 Style ----------- */
/* -------------------------------------------- */
#pagination-vnet2 { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet2 .point { padding:3px; vertical-align:baseline}
#pagination-vnet2 .goto { margin-left:3px;font-size:13px;}
#pagination-vnet2 .goto input { border:solid 1px #DEDEDE; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet2 li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet2 a { border-right:solid 1px #DEDEDE; margin-right:2px; }
#pagination-vnet2 .previous-off,
#pagination-vnet2 .next-off { color:#888888; display:block; float:left; font-weight:bold; padding:3px 4px; }
#pagination-vnet2 .next a,
#pagination-vnet2 previous a { border:none; font-weight:bold; }
#pagination-vnet2 .active { color:#000000; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ border-right:solid 1px #DEDEDE; }
#pagination-vnet2 a:link,
#pagination-vnet2 a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:underline; }
#pagination-vnet2 a:hover { text-decoration:none; }
/* -------------------------------------------- */
/* ----------- Pagination: vnet3 Style --------- */
/* -------------------------------------------- */
#pagination-vnet3 { font-family:Arial, Helvetica, sans-serif; font-size:12px; border:0; margin:0; padding:0; }
#pagination-vnet3 .point { padding:3px; vertical-align:baseline}
#pagination-vnet3 .goto { margin-left:3px;font-size:13px;}
#pagination-vnet3 .goto input { border:solid 1px #9aafe5; font-family:Arial, Helvetica, sans-serif; width:30px;}
#pagination-vnet3 li { border:0; margin:0; padding:0; font-size:11px; list-style:none; /* savers */ float:left; }
#pagination-vnet3 a { border:solid 1px #9aafe5; margin-right:2px; }
#pagination-vnet3 .previous-off,
#pagination-vnet3 .next-off { border:solid 1px #DEDEDE; color:#888888; display:block; float:left; font-weight:bold; margin-right:2px; padding:3px 4px; }
#pagination-vnet3 .next a,
#pagination-vnet3 .previous a { font-weight:bold; }
#pagination-vnet3 .active { background:#2e6ab1; color:#FFFFFF; font-weight:bold; display:block; float:left; padding:4px 6px; /* savers */ margin-right:2px; }
#pagination-vnet3 a:link,
#pagination-vnet3 a:visited { color:#0e509e; display:block; float:left; padding:3px 6px; text-decoration:none; }
#pagination-vnet3 a:hover { border:solid 1px #0e509e; }
二、html
Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="stefanie" />
<meta name="description" content="http://www.mindpoint.cn/stefanie" />
<title>vnet paginazione style by stefanie</title>
</head>
<body>
<h2>Pagination Style</h2>
<div>
<ul id="pagination-vnet1">
<li class="previous-off">« Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=8">Next »</a></li>
</ul>
</div>
<br><br><br><br>
<div>
<ul id="pagination-vnet2">
<li class="previous-off">« Previous</li>
<li class="active">1</li>
<li><a href="?page=2">2</a></li>
<li><a href="?page=3">3</a></li>
<li><a href="?page=4">4</a></li>
<li><a href="?page=5">5</a></li>
<li><a href="?page=6">6</a></li>
<li><a href="?page=7">7</a></li>
<li class="next"><a href="?page=8">Next »</a></li>
</ul>
</div>
<br><br><br><br>
<div>
<script type="text/javascript" >
//
var _vnetPagination_TotalPageCount = 10; //
var _vnetPageination_CurrentPageIndex = 2; //
var _vnetPageination_Url = "http://www.vnet.cn"; //
// http://news.vnet.cn/news/ent/huandengpian/youye/200905/0513_2317_205821.htm
var _vnetPageination_IsShowNextSection = true;
var _vnetPageination_NextSectionUrl = "http://www.vnet.cn";
var _vnetPageination_ShowCount = 5;
var _vnetPageination_IsNeedGoto = true;
var _vnetPageination_Style = "pagination-vnet3";
window.onload = function(){
var styleLink = document.createElement("link");
styleLink.setAttribute("rel","stylesheet");
styleLink.setAttribute("href","style.css");
styleLink.setAttribute("type","text/css");
document.body.appendChild(styleLink);
var PageCount = _vnetPagination_TotalPageCount;
var CurrentIndex = _vnetPageination_CurrentPageIndex;
var Url = _vnetPageination_Url;
var NextSectionUrl = _vnetPageination_NextSectionUrl;
var showCount = _vnetPageination_ShowCount;
var isNeedGoto = _vnetPageination_IsNeedGoto;
var styleName = _vnetPageination_Style;
//var previousText = "« Previous";
//var nextText = "Next »";
var previousText = "«上一页";
var nextText = "下一页»";
// create DIV
var uDiv = document.createElement("div");
var uul = document.createElement("ul");
uul.id= styleName;
// previsus Style
var uli = document.createElement("li");
uli.className = "previous-off";
uli.innerHTML = previousText;
uul.appendChild(uli);
// 1.2.3.4.5
for(var i = 1; i <= showCount; i++)
{
var uli_num = document.createElement("li");
if(i == _vnetPageination_CurrentPageIndex)
{
uli_num.className = "active";
uli_num.innerHTML = i;
}
else
{
var _ua = document.createElement("a");
_ua.href = "?page="+i;
_ua.innerHTML = i;
uli_num.appendChild(_ua);
}
uul.appendChild(uli_num);
}
if( PageCount > showCount )
{
var uli_spoint = document.createElement("li");
uli_spoint.innerHTML = "
";uli_spoint.className = "point";
uul.appendChild(uli_spoint);
var uli_Max = document.createElement("li");
var _uaMax = document.createElement("a");
_uaMax.href = "?page="+ PageCount;
_uaMax.innerHTML = PageCount;
uul.appendChild(_uaMax);
}
var uli_next = document.createElement("li");
uli_next.className = "next";
var ua_next = document.createElement("a");
ua_next.href = "?page="+i+1;
ua_next.innerHTML = nextText;
uli_next.appendChild(ua_next);
uul.appendChild(uli_next);
// go to
if(isNeedGoto)
{
var uli_goto = document.createElement("li");
uli_goto.className = "goto";
var text1 = document.createTextNode("到第");
uli_goto.appendChild(text1);
//uli_goto.innerHTML = "到第";
var uli_goto_input = document.createElement("input");
uli_goto_input.setAttribute("type","text");
uli_goto_input.id="vnetPageination_toPageIndex";
uli_goto_input.setAttribute("width","30");
uli_goto.appendChild(uli_goto_input);
var text2 = document.createTextNode("页");
uli_goto.appendChild(text2);
var uli_goto_button = document.createElement("button");
uli_goto_button.setAttribute("onclick","new function(){var pageIndex = document.getElementById(\"vnetPageination_toPageIndex\").value; if(isNaN(pageIndex)){alert('不是数字!');return;} if(pageIndex <= _vnetPagination_TotalPageCount){alert(pageIndex);};}");
//uli_goto_button.setAttribute("onclick","new function(){alert(document.getElementById('vnetPageination_toPageIndex').value);}");
var text3 = document.createTextNode("确定");
uli_goto_button.appendChild(text3);
uli_goto.appendChild(uli_goto_button);
uul.appendChild(uli_goto);
}
uDiv.appendChild(uul);
document.body.appendChild(uDiv);
}
</script>
</div>
</body>
</html>
