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
NEW subtlePager
Thu Jul 03 01:42:54 -0700 2008
commit  9bba881a70a5d58a9d10b4355feb3ed1edd6c2ec
tree    ddcdfa4e6d800789f2bd573be097fd6ca5236007
parent  bba39a592f1e5f5ca2c8c2f8d11c8bcc7c1c4809
...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
...
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
0
@@ -0,0 +1,78 @@
0
+subtlePager
0
+===========
0
+Super Simple Javascript Paging System
0
+-------------------------------------
0
+
0
+#### by **Thomas Aylott** aka *oblivious at subtleGradient.com*
0
+
0
+----
0
+
0
+## How does it work?
0
+
0
+First, include all your html on the page. Give each paged element a classname of `page1`, `page2`, etc... as many as there are. Then add the classnames `subtlePager` `page1` and `pages10` to the parent element. You can have unlimited pagers per page. See the `subtlePager.demo.html` file for a working demo.
0
+
0
+### Setup
0
+
0
+* HTML
0
+ * **[required]** Parent element
0
+ * `id` attribute
0
+ * `class` attribute
0
+ EG: `subtlePager pages5 page1`
0
+ * `subtlePager`
0
+ This classname is required by the default CSS
0
+ * `pages#`
0
+ `#` is the maximum number of pages, EG: `pages5` for a total of 5 pages
0
+ * `page#`
0
+ `#` is the default page to display. I recommend just using `page1` here
0
+ * **[required]** Child elements
0
+ * `class` attribute
0
+ * `page#`
0
+ `#` is the page number that you want this element to be visible on.
0
+ * **[required]** Trigger element(s)
0
+ * **[optional]** `onclick`
0
+ * `subtlePager.page(elementId)`
0
+ * `subtlePager.page(elementId, true)`
0
+ * `subtlePager.page(elementId, 5)`
0
+
0
+* CSS
0
+ * **[optional]** Define your custom *"CSS Static Logic"*
0
+* JS
0
+ * **[optional]** Redefine defaults
0
+
0
+You'll need to attach the functions to your trigger elements somehow, the simplest method is to just use an `onclick` attribute. But I highly recommend you use an eventListener somehow. I leave that as an exercise for the reader.
0
+
0
+
0
+### Triggering Functions
0
+
0
+`subtlePager.page(elementId)`
0
+Goes to the previous page
0
+
0
+`subtlePager.page(elementId, true)`
0
+Goes to the next page
0
+
0
+`subtlePager.page(elementId, 5)`
0
+Goes to page 5
0
+
0
+----
0
+
0
+### The MIT License
0
+
0
+Copyright (c) 2008 Thomas Aylott
0
+
0
+Permission is hereby granted, free of charge, to any person obtaining a copy
0
+of this software and associated documentation files (the "Software"), to deal
0
+in the Software without restriction, including without limitation the rights
0
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
0
+copies of the Software, and to permit persons to whom the Software is
0
+furnished to do so, subject to the following conditions:
0
+
0
+The above copyright notice and this permission notice shall be included in
0
+all copies or substantial portions of the Software.
0
+
0
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
0
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
0
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
0
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
0
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
0
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
0
+THE SOFTWARE.

Comments

    No one has commented yet.