仿豆瓣分页原型(Javascript版)
作者：tyhouse 来源：twocity.cn 发布时间：2007-11-05 14:04:00
标签：分页,javascript
仿豆瓣分页原型(Javascript版)写了个分页的样式。
自我感觉，这样的分页前后兼顾，对于用户的体验是蛮好使的
Javascript分页代码如下：
<script language="javascript" type="text/javascript">
function QueryString(item){
var sValue=location.search.match(new RegExp("[\?\&]"+item+"=([^\&]*)(\&?)","i"))
return sValue?sValue[1]:sValue
}
var count = 560;
var perpage = 20;
var currentpage = QueryString("page");
if (currentpage==null){
currentpage = 1;
}else{
currentpage = parseInt(currentpage);
}
var pagecount = Math.floor(count/perpage);
var pagestr = "";
var breakpage = 9;
var currentposition = 4;
var breakspace = 2;
var maxspace = 4;
var prevnum = currentpage-currentposition;
var nextnum = currentpage+currentposition;
if(prevnum<1) prevnum = 1;
if(nextnum>pagecount) nextnum = pagecount;
pagestr += (currentpage==1)?'<span class="prev">< 前页</span>':'<span class="prev">< <a href="?page='+(currentpage-1)+'">前页</a></span>';
if(prevnum-breakspace>maxspace){
for(i=1;i<=breakspace;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakpage+1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=1;i<prevnum;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}
for(i=prevnum;i<=nextnum;i++){
pagestr += (currentpage==i)?'<span class="thispage">'+i+'</span>':'<a href="?page='+i+'">'+i+'</a>';
}
if(pagecount-breakspace-nextnum+1>maxspace){
for(i=nextnum+1;i<=breakpage;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
pagestr += '<span class="break">...</span>';
for(i=pagecount-breakspace+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}else{
for(i=nextnum+1;i<=pagecount;i++)
pagestr += '<a href="?page='+i+'">'+i+'</a>';
}
pagestr += (currentpage==pagecount)?'<span class="next">后页 ></span>':'<span class="next"><a href="?page='+(currentpage+1)+'">后页</a> ></span>';
document.getElementById("pagebar").innerHTML = pagestr;
</script>
0
投稿猜你喜欢
- 继续Mootools的扩展，适用于Mootools 1.1及1.2，这次在Element扩展了两个非常简单的方法，一个用来获取
- J2ME是利用HttpConnection建立HTTP连接，然后获取数据，ASP也是利用HTTP协议，因而可以利用J2ME与ASP建立连接，
- 好了，看看我们的代码吧：upload.htm' 上传页面<html> <body>&nb
之前写过一篇文章《EmEditor代码片段插件介绍》，现在项目越来越多，越来越大，不再用EmEditor，而用IntelliJ IDEA。这- 更换域名，估计是很多站长都很头疼的事情。通常大家的做法就是把老的域名通过IIS设置做301跳转到新的域名。对于只有一个虚拟空间的站长来说，换
- 在学校修管理学的时候，有讲过一个管理激励的理论。管理激励是基于行为和认知科学的研究，来发现人们的需要、动机、目标和行为四者之间关系的核心理论
- 新上的一台服务器出现了一个现象：ASP程序中，调用函数Now()，显示的时间总是形如“2009-07-12 上午 08:12:56”这样的，
- 摘要：本篇文章介绍了ORACLE数据库的新特性—分区管理，并用例子说明使用方法。 关键词：ORACLE，分区 一、 分区概述： 为了简化数据
- MySQL支持的两种主要表存储格式MyISAM，InnoDB，上个月做个项目时，先使用了InnoDB，结果速度特别慢，1秒钟只能插入10几条
- 区别IE6与FF：background:orange;*background:blue;区别IE6与IE7：background:green
- 本文将介绍使用Dreamweaver来制作滑动菜单的方法，言归正传，废话少说。准备工作如下： 1． 在dw中新建一个空白文档（或者打开你要添
- QZONE平台的相册功能为保证加载速度一直以来以简洁的图片排列查看模式呈现相片，随着市场上各类相册产品推陈出新，用户越来越强烈的要求个人相册
- 让长字符自动换行 (比如 URL 和 Email地址) 目的：让很长的字符串，能自动换行，但是不要把短的单词从中间断开。方法如下：<s
- 什么是事件代理（Event Delegation）？如果不太了解的朋友，可详细阅读：《Event delegation in JavaScr
- 内连接（inner join）。 外连接： 全连接（full join）、左连接（left join）、右连接（right join）。 交
- 简介 函数式编程语言在学术领域已经存在相当长一段时间了，但是从历史上看，它们没有丰富的工具和库可供使用。随着 .NET 平台上的
- 代码如下:create table T_NEWS ( ID NUMBER, N_TYPE VARCHAR2(20), N_TIT
- Entity Framework 4.0 也可以支持大名鼎鼎的MySql,这篇POST将向展示如何实现EF+MyS
- 企业管理器中没有改数据库名的功能，如果一定要用企业管理器来实现，你可以备份数据库，然后还原，在还原时候可以指定另一个库名，然后再删除旧库就行
- 如何制作一个搜索引擎链接程序？多收集几个网站的，然后我们引用它到自己的页面中。接下来，我们要创建页面用于搜索：<center>&
