public
Description: Super simple DHTML paging system. For paging through sets of data in-page. Versions of this are in use at Java.com, CrazyEgg.com and a few other sites.
Homepage: http://projects.subtlegradient.com/Javascript/subtlePager/
Clone URL: git://github.com/subtleGradient/subtlepager.git
subtlepager / subtlePager.demo.html
100644 40 lines (33 sloc) 1.714 kb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<title>subtlePager DEMO</title>
<link rel="stylesheet" href="subtlePager.css" type="text/css">
</head>
<body>
 
<div class="subtlePager pages10 page1" id="myPagerID">
 
<p class="page1">Page 1</p>
<p class="page2">Page 2</p>
<p class="page3">Page 3</p>
<p class="page4">Page 4</p>
<p class="page5">Page 5</p>
<p class="page6">Page 6</p>
<p class="page7">Page 7</p>
<p class="page8">Page 8</p>
<p class="page9">Page 9</p>
<p class="page10">Page 10</p>
 
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID')">Previous </a>
 
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',1);">1 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',2);">2 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',3);">3 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',4);">4 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',5);">5 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',6);">6 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',7);">7 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',8);">8 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',9);">9 </a>
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',10);">10 </a>
 
<a href="#" onclick="return window.subtlePager && subtlePager.page('myPagerID',true);">Next </a>
</div>
 
<script src="subtlePager.js" type="text/javascript"></script>
</body>
</html>