001 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
002 |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
003 |
<head> |
004 |
<title>jQuery分页</title> |
005 |
<style type="text/css" rel="stylesheet"> |
006 |
.page{ |
007 |
display:none; |
008 |
} |
009 |
#pagnation a{ |
010 |
padding-right:5px; |
011 |
} |
012 |
.current { |
013 |
color:blue; |
014 |
} |
015 |
#pagnation{ |
016 |
margin-top:20px; |
017 |
} |
018 |
.numlink,#prev,#next |
019 |
{ |
020 |
background-color: #F5F5F5; |
021 |
border: 1px solid #EBEBEB; |
022 |
color: #0072BC; |
023 |
font-weight: normal; |
024 |
margin-left: 10px; |
025 |
padding: 2px 7px; |
026 |
text-decoration: none; |
027 |
width: 22px;; |
028 |
} |
029 |
.current |
030 |
{ |
031 |
background-color: #DDEEFF; |
032 |
border: 1px solid #BBDDFF; |
033 |
color: #0072BC; |
034 |
cursor: default; |
035 |
margin-left: 10px; |
036 |
padding: 2px 7px; |
037 |
text-decoration: none; |
038 |
} |
039 |
</style> |
040 |
</head> |
041 |
|
042 |
<body> |
043 |
<div id="content"> |
044 |
<div class="page"> |
045 |
这里是第一段内容 |
046 |
</div> |
047 |
<div class="page"> |
048 |
这里是第二段内容 |
049 |
</div> |
050 |
<div class="page"> |
051 |
第三段内容</div> |
052 |
<div class="page"> |
053 |
第四段内容 |
054 |
</div> |
055 |
<div id="pagnation"> |
056 |
</div> |
057 |
</div> |
058 |
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script> |
059 |
<script type="text/javascript"> |
060 |
var _Pages = $('.page'); |
061 |
var _Nav = $('#pagnation'); |
062 |
function createLinks(){ |
063 |
_Nav.append('<a href="#" id="prev">Prev</a>'); |
064 |
for(var i=0;i<$('.page').length;i++){ |
065 |
_Nav.append('<a href="#" class="numlink">'+(i+1)+'</a>'); |
066 |
} |
067 |
_Nav.append('<a href="#" id="next">Next</a>'); |
068 |
} |
069 |
function process(now,_Prev,_Next){ |
070 |
$('.page:eq('+now+')').css('display','block'); |
071 |
$('.numlink:eq('+now+')').addClass('current'); |
072 |
var total = parseInt($('.page').length - 1); |
073 |
if(now == 0){ |
074 |
_Prev.hide(); |
075 |
_Next.show(); |
076 |
} |
077 |
else if(now == total){ |
078 |
_Prev.show(); |
079 |
_Next.hide(); |
080 |
} |
081 |
else { |
082 |
_Prev.show(); |
083 |
_Next.show(); |
084 |
} |
085 |
} |
086 |
function hideAll(){ |
087 |
_Pages.css('display','none'); |
088 |
$('.numlink').removeClass('current'); |
089 |
} |
090 |
$(document).ready(function(){ |
091 |
//set the first one display none |
092 |
$('.page:eq(0)').css('display','block'); |
093 |
createLinks(); |
094 |
$('.numlink:eq(0)').addClass('current'); |
095 |
var _Next = $('#next'); |
096 |
var _Prev = $('#prev'); |
097 |
var _Link = $('.numlink'); |
098 |
_Prev.hide(); |
099 |
var now = parseInt($('.numlink').index($('.current'))); |
100 |
_Next.click(function(){ |
101 |
hideAll(); |
102 |
process(now+1,_Prev,_Next); |
103 |
now = parseInt($('.numlink').index($('.current'))); |
104 |
}); |
105 |
_Prev.click(function(){ |
106 |
hideAll(); |
107 |
process(now-1,_Prev,_Next); |
108 |
now = parseInt($('.numlink').index($('.current'))); |
109 |
}) |
110 |
_Link.click(function(){ |
111 |
var that = $(this); |
112 |
hideAll(); |
113 |
var which = that.index() - 1; |
114 |
process(which,_Prev,_Next); |
115 |
now = parseInt($('.numlink').index($('.current'))); |
116 |
}) |
117 |
}) |
118 |
</script> |
119 |
</body> |
120 |
</html> |
121 |
</iframe></noscript></object></layer></span></div></table> |
122 |
</body> |
123 |
</html> |