PageNavigater 2.0
Sinoprise Technology Studio
Copyright (c) 2008 Kevin Yin
http://www.sinoprise.cn
http://www.sinoprise.com
This script can be used freely as long as all copyright messages are intact.
//======================================================
Updated: 2008/01/28
PageNavigater 2.0
JavaScript分页控件2.0
以前写的分页控件都是和相关技术有关的，这是一个JavaScript写的分页控件，与服务器端的技术，如ASP,ASP.NET，PHP，JSP等无关，只需要在相应的地方输出信息即可;
调用方式：
用动态Web语言在HTML界面上输出如下代码：
<script language="javascript">
pager = new PageNavigater(20, 255, 1, "http://www.sinoprise.cn/default.aspx","?","pageindex") ;
document.write(pager);
</script>
即可
关于PageNavigater的参数信息：
第一个参数，如上例中的20， 表示一页有多少条数据
第二个参数，如上例中的255，表示总共有多少条数据
第三个参数，如上例中的1，表示当前页为第1页
第四个参数，如上例中的“http://www.sinoprise.cn/default.aspx”, 表示分页控件导航的目的地址
第五个参数，如上例中的“?”，表示分页的变量与其他变量的分隔符，如果是第一个参数，这个分隔符应该是“？”，
如果是他的分隔符，即此变量前还有其他的变量，分隔符应该是“&”
第六个参数，如上例中的“pageindex”，表示分页时的变量，来指定分页的号码，在服务器端的动态
网页中取此参数即可得到用户的导航页码。
分页控件将组成形如：http://www.sinoprise.cn/default.aspx？pageindex=...的链接地址
ASP.NET示例：
编码：
...................
protected int _recordCount = 531;
protected int _currentPage = 0;
protected int _pageSize = 25;
protected string _pageUrl = "http://localhost:33167/Default.aspx";
protected string _splitString = "?";
protected string _pageVariable = "pageindex";
protected void Page_Load(object sender, EventArgs e)
{
string cp = Request.QueryString[_pageVariable];
if (null != cp)
_currentPage = Convert.ToInt32(cp);
else
_currentPage = 1;
}
....................
HTML代码：
script language="javascript">
pager = new PageNavigater(<%=_pageSize%>, <%=_recordCount%>, <%=_currentPage%>, "<%=_pageUrl%>","<%=_splitString%>","<%=_pageVariable%>") ;
document.write(pager);
</script>
比第一版的更改有：
1.将样式表从代码中提出，便于修改
2.将分页控件的风格改为现代风格
3.增加分页跳转
4.修正了分页列表显示不正确的BUG
注，此分页控件依赖于样式表定义，一下是一个样式表定义的DEMO:
.PageNavigater {
FONT-SIZE: 12px;
FONT-STYLE: normal;
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-ALIGN: right;
LIST-STYLE-TYPE: none;
MARGIN-BOTTOM: 5px;
PADDING-RIGHT: 5px;
PADDING-LEFT: 5px;
PADDING-BOTTOM: 5px;
PADDING-TOP: 5px;
LINE-HEIGHT: 20px;
TEXT-ALIGN: right;
FLOAT: right;
COLOR: #006aa7;
}
.PageNavigater A {
COLOR: #006aa7;
TEXT-DECORATION: none;
}
.PageNavigater A:hover {
COLOR: #f60;
TEXT-DECORATION: underline;
}
.PageNavigater IMG {
BORDER-TOP-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-BOTTOM-WIDTH: 0px;
VERTICAL-ALIGN: middle;
BORDER-RIGHT-WIDTH: 0px;
}
.PageNavigaterItem {
BORDER-RIGHT: #b2bfcf 1px solid;
BORDER-LEFT: #b2bfcf 1px solid;
BORDER-BOTTOM: #b2bfcf 1px solid;
BORDER-TOP: #b2bfcf 1px solid;
PADDING-RIGHT: 6px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 6px;
PADDING-TOP: 0px;
DISPLAY: block;
BACKGROUND: #fff; FLOAT: left;
LINE-HEIGHT: 22px;
MARGIN-RIGHT: 4px;
HEIGHT: 22px;
VERTICAL-ALIGN: middle;
}
.PageNavigaterItem INPUT {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, sans-serif;
LIST-STYLE-TYPE: none;
BORDER-RIGHT: #bdc5ca 0px solid;
BORDER-TOP: #6f787e 0px solid;
BORDER-LEFT: #6f787e 0px solid;
BORDER-BOTTOM: #bdc5ca 0px solid;
PADDING-BOTTOM: 3px;
PADDING-LEFT: 2px;
PADDING-RIGHT: 2px;
PADDING-TOP: 3px;
BACKGROUND: none transparent scroll repeat 0% 0%;
WIDTH: 20px;
LINE-HEIGHT: 16px;
HEIGHT: 14px;
VERTICAL-ALIGN: middle;
}
.PageNavigater #Focus {
BORDER-RIGHT: #1d619c 1px solid;
BORDER-TOP: #1d619c 1px solid;
BACKGROUND: #1972bd;
BORDER-LEFT: #1d619c 1px solid;
COLOR: #fff;
BORDER-BOTTOM: #1d619c 1px solid;
}
可以按照自己的需要修改样式表，但不能改变样式表的名称（除非一起改动代码）
下载地址： http://www.sinoprise.cn/showtopic-26.aspx
//======================================================
Updated: 2008/01/24
PageNavigater 1.0
JavaScript分页控件1.0（page-navigater_V_1.0.0.zip）
以前写的分页控件都是和相关技术有关的，这是一个JavaScript写的分页控件，与服务器端的技术，如ASP,ASP.NET，PHP，JSP等无关，只需要在相应的地方输出信息即可;
调用方式：
用动态Web语言在HTML界面上输出如下代码：
<script language="javascript">
pager = new PageNavigater(20, 1000000, 243, "right", http://www.sinoprise.cn/) ;
document.write(pager);
</script>
即可
关于PageNavigater的参数信息：
第一个参数，如上例中的20， 表示一页有多少条数据
第二个参数，如上例中的1000000，表示总共有多少条数据
第三个参数，如上例中的243，表示当前页为第243页
第四个参数，如上例中的right,表示分页控件的表格右对齐（即显示在页面的右边）
第五个参数，如上例中的http://www.sinoprise.cn/，表示导航的网页地址，PageNavigater将生成形如
http://www.sinoprise.cn/?pageindex=....的链接地址，在服务器端的动态
网页中取参数pageindex即可得到用户的导航页
下载地址：http://www.sinoprise.cn/showtopic-22.aspx
page-navigater_V_2.0.zip （11个子文件） 
page-navigater 
page-navigater.html 4KB
Web.config 1KB page-navigater.csproj 3KB Properties AssemblyInfo.cs 1KB page-navigater.css 2KB Default.aspx 850B
changelog.txt 5KB Default.aspx.cs 1KB Default.aspx.designer.cs 982B page-navigater.sln 1KB page-navigater.js 6KB
评论0