仅1K大小的javascript/jquery页码显示,完美实现腾迅微博分页效果

最新推荐文章于 2023-02-22 09:53:09 发布

{丸の子}

最新推荐文章于 2023-02-22 09:53:09 发布

阅读量149

点赞数

分类专栏： javascript 文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/waterseason/article/details/83972854

版权

javascript 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

仅1K大小的javascript/jquery页码显示,完美实现腾迅微博分页效果。
主要是因为项目需要，然后在网上找了一下，短时间内没找到现成的，就自己写了一个。
效果如下：
[img]http://dl.iteye.com/upload/attachment/519865/6a3cd6da-9a88-39dd-8f13-797c230dfe70.png[/img]


<!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>pagenav test</title>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://page-nav-js-jquery.googlecode.com/files/pagenav.min.js"></script>
<style type="text/css" media="screen">
a { color:#2B4A78; text-decoration:none; }
a:hover { color:#2B4A78;text-decoration:underline; }
a:focus, input:focus {outline-style:none; outline-width:medium; }

/* custom css style: pageNum,cPageNum */
.pageNum{border: 1px solid #999;padding:2px 8px;display: inline-block;}
.cPageNum{font-weight: bold;padding:2px 5px;}
#pageNav a:hover{text-decoration:none;background: #fff4d8; }
</style>
<script>
$(function(){
	//optional set
	pageNav.pre="PRE";
	pageNav.next="NEXT";
	 //  p:current page number.  
	 //  pn: page sum.
	pageNav.fn = function(p,pn){
		$("#test").text("Page:"+p+" of "+pn + " pages.");
	};

	//goto the page 3 of 33.
	pageNav.go(3,33);
});
</script>
</head>
<body>
<div id="test" style="height:70px;padding:30px 10px;font-size: 300%;"></div>
<div id="pageNav"></div>
</body>
<html>