forked from luis-almeida/jPages
-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
231 lines (174 loc) · 12 KB
/
documentation.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>documentation</title>
<meta name="description" content="documentation">
<meta name="keywords" content="jquery, pagination, javascript, plugin" />
<meta name="author" content="Luís Almeida">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/github.css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/highlight.pack.js"></script>
<script src="js/js.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28718218-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
$(function(){
$('pre code').each( function(i, e) {
hljs.highlightBlock(e, ' ');
});
});
</script>
</head>
<body>
<div id="author">You can follow me on <a href="https://twitter.com/lmgalmeida">@twitter</a> or <a href="https://github.com/luis-almeida">@github</a> and you may also like <a href="http://luis-almeida.github.com/filtrify/">filtrify</a></div>
<div id="container" class="clearfix">
<div id="sidebar">
<h1 id="header">jPages</h1>
<ul id="menu">
<li><a href="http://luis-almeida.github.com/jPages/">Info</a></li>
<li class="selected"><a href="documentation.html">documentation</a></li>
<li><a href="download.html">download</a></li>
</ul>
<h2>Examples</h2>
<ul>
<li><a href="defaults.html">defaults</a></li>
<li><a href="pagination.html">pagination</a></li>
<li><a href="itemsperpage.html">items per page</a></li>
<li><a href="customizebuttons.html">customize buttons</a></li>
<li><a href="custombuttons.html">custom buttons</a></li>
<li><a href="blanklinks.html">blank links</a></li>
<li><a href="titlelinks.html">title links</a></li>
<li><a href="keybrowse.html">key browse</a></li>
<li><a href="scrollbrowse.html">scroll browse</a></li>
<li><a href="auto.html">auto</a></li>
<li><a href="direction.html">direction</a></li>
<li><a href="cssanimation.html">css animation</a></li>
<li><a href="jqueryanimation.html">jQuery animation</a></li>
<li><a href="callback.html">callback</a></li>
<li><a href="jumptopage.html">jump to page</a></li>
<li><a href="destroy.html">destroy</a></li>
<li><a href="lazyload.html">lazy load</a></li>
</ul>
<h2>Demos</h2>
<ul>
<li><a href="mosaic.html">mosaic</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="table.html">table</a></li>
</ul>
<div class="share">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://luis-almeida.github.com/jPages/" data-text="jPages" data-via="lmgalmeida" data-hashtags="jQuery">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div> <!--! end of #sidebar -->
<div id="content" class="documentation">
<h2 style="margin-top: 0;">Options</h2>
<h3>containerID <span>String</span></h3>
<strong>Default value:</strong> <i>Required! (No default)</i>
<p>The ID of the container of the items you want to paginate. It can be an UL, OL, DIV etc.</p>
<h3>first <span>String || false</span></h3>
<strong>Default value:</strong> <i>false</i>
<p>In this parameter you can customize the button for the first page in the navigation. By default this parameter is set to false so the 'first' button won't be created.</p>
<p>To set the name for this button you just have to pass it as a string. <a href="customizebuttons.html">View example</a>.</p>
<p>In case you want to use a custom element instead of the auto generated one, you can pass the selector for that element. <a href="custombuttons.html">View example</a>.</p>
<h3>previous <span>String || false</span></h3>
<strong>Default value:</strong> <i>"← previous"</i>
<p>Same as the parameter 'first' but for the button 'previous'.</p>
<h3>next <span>String || false</span></h3>
<strong>Default value:</strong> <i>"next →"</i>
<p>Same as the parameter 'first' but for the button 'next'.</p>
<h3>last <span>String || false</span></h3>
<strong>Default value:</strong> <i>false</i>
<p>Same as the parameter 'first' but for the button 'last'.</p>
<h3 id="startPage">startPage <span>Integer</span></h3>
<strong>Default value:</strong> <i>1</i>
<p>The page you want to be displayed first when the plugin is applied.</p>
<h3>perPage <span>Integer</span></h3>
<strong>Default value:</strong> <i>10</i>
<p>Number of items to be displayed per page. <a href="itemsperpage.html">View example</a>.</p>
<h3>midRange <span>Integer</span></h3>
<strong>Default value:</strong> <i>5</i>
<p>Number of page links to display at one time i.e. let's say you have a total of 50 pages, instead of displaying links to each and every page, we display a range of pages around the current page that we're on.</p>
<p>Just a note, the mid range value should be an odd number so the display is symmetrical, but it can also be even if you like.</p>
<h3>startRange <span>Integer</span></h3>
<strong>Default value:</strong> <i>1</i>
<p>Number of page links always visible at the beggining of the nav. For instance, if you set startRange to 3, page links 1, 2 and 3 will allways be visible no matter which is the current page.</p>
<h3>endRange <span>Integer</span></h3>
<strong>Default value:</strong> <i>1</i>
<p>Number of page links always visible at the end of the nav.</p>
<h3>keyBrowse <span>Boolean</span></h3>
<strong>Default value:</strong> <i>false</i>
<p>If you set keyBrowse to true you can browse the pages using your keyboard left and right keys. <a href="keybrowse.html">View example</a>.</p>
<h3>scrollBrowse <span>Boolean</span></h3>
<strong>Default value:</strong> <i>false</i>
<p>If you set scrollBrowse to true when you hover the cursor over the items you can use the scroll wheel to browse between pages. <a href="scrollbrowse.html">View example</a>.</p>
<h3>pause <span>Integer</span></h3>
<strong>Default value:</strong> <i>0</i>
<p>If you want the plugin to automatically rotate the "pages", with this parameter you can control the length of the pause between each "page turn" in milliseconds.</p>
<p>When pause is set to false or 0 (default), pages won't automatically rotate. View an example of the auto rotation <a href="auto.html">here</a>.</p>
<h3>clickStop <span>Boolean</span></h3>
<strong>Default value:</strong> <i>true</i>
<p>If you activated page rotation by setting a pause value, you can stop auto page turn when user clicks on a navigation link for the first time by setting clickStop to true.</p>
<p>Set it to false if you want pages to keep turning. <a href="auto.html">View example</a>.</p>
<h3>delay <span>Integer</span></h3>
<strong>Default value:</strong> <i>50</i>
<p>If you want page items to be displayed one by one, you can control the delay between item display with this parameter (in milliseconds). If you don't set any value or set it to 0, items will be displayed all at the same time.</p>
<h3>direction <span>String</span></h3>
<strong>Default value:</strong> <i>"forward"</i>
<p>If you set a delay time between each item display you can also choose in what direction will they appear.</p>
<p>The options are: "forward", "backwards", "auto" or "random". <a href="direction.html">View example</a>.</p>
<h3>animation <span>String</span></h3>
<strong>Default value:</strong> <i>empty string (No CSS3 animation)</i>
<p>jPages works perfectly with <a href="http://daneden.me/animate/">Animate.css</a> but you must of course add the link to this CSS3 library in the head of your page first. Once you've done that, you can choose any of the entrance animations - jPages only supports entrance animations. <a href="cssanimation.html">View example</a>.</p>
<p>If you don't set any animation or if the browser doesn't support CSS3 Animations, jPages will fallback to the jQuery fadeIn effect. You can customize the speed of this effect in the parameter "fallback".</p>
<h3>fallback <span>Integer</span></h3>
<strong>Default value:</strong> <i>400</i>
<p>If you don't set a CSS3 animation in the parameter "animation" jPages will fallback to the jQuery fadeIn effect. You can costumize the fadeIn speed in this parameter. You can use milliseconds or the strings 'fast', 'slow' and 'normal'. <a href="jqueryanimation.html">View example</a>.</p>
<h3>minHeight <span>Boolean</span></h3>
<strong>Default value:</strong> <i>true</i>
<p>When a page turn occurs, some items will be hidden and some others will be shown. If you don't set a minimum height for the container you might perceive some height collapsing every time you turn pages. If you set minHeight to true, it will automatically set a minimum height for the item container to fix this issue. Set minHeight to false if you want to style this property yourself.</p>
<h3 id="callback">callback <span>function</span></h3>
<strong>Default value:</strong> <i>function( pages, items ) {}</i>
<p>In this parameter you can pass a function that will run after every page turn. This function receives two arguments (objects) that contain all the information available about the pages and the items:</p>
<p style="margin-top: 20px;"><b>Pages object properties:</b></p>
<dl class="clearfix">
<dt>pages.current</dt>
<dd>current page number</dd>
<dt>pages.interval</dt>
<dd>an object that contains two properties - interval.start and interval.end - corresponding to the midRange edges of pages in the navigation.</dd>
<dt>pages.count</dt>
<dd>total number of pages</dd>
</dl>
<p style="margin-top: 20px;"><b>Items object properties:</b></p>
<dl class="clearfix">
<dt>items.showing</dt>
<dd>jQuery collection of the items currentely being displayed</dd>
<dt>items.oncomming</dt>
<dd>jQuery collection of the items in the next page</dd>
<dt>items.range</dt>
<dd>an object that contains two properties - range.start and range.end - corresponding to the range of items currentely being displayed.</dd>
<dt>items.count</dt>
<dd>total number of items</dd>
</dl>
<p style="margin-top:10px">See how to create a legend for your pagination <a href="callback.html">here</a>.</p>
<h2>API</h2>
<h3>Jump to page</h3>
<p>After initiating the plugin you can at any time show a specific page to your users. <a href="jumptopage.html">View example</a>.</p>
<h3>Destroy</h3>
<p>After initiating the plugin you can destroy it. <a href="destroy.html">View example</a>.</p>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
<a href="http://github.com/luis-almeida"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
</body>
</html>