What does it do?
jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.
Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them.
The plugin is very unobtrusive and it won't apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).
Compatible with All Browsers and IE7+
How to
Add the following code to the <head> section of your page (correct file locations first):
<link rel="stylesheet" href="css/jPages.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>
In case you want to use Animate.css animations you will also need to add the file:
<link rel="stylesheet" href="css/animate.css">
Example source code:
<!-- Future navigation panel -->
<div class="holder"></div>
<!-- Item container (doesn't need to be an UL) -->
<ul id="itemContainer">
<!-- Items -->
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
...
</ul>Initiate the plugin:
$(function(){
$("div.holder").jPages({
containerID : "itemContainer"
});
});This is how the 'div.holder' source code will look like (imagining that 10 pages were created):
<!-- navigation panel -->
<div class="holder">
<a class="jp-previous jp-disabled">← previous</a>
<a class="jp-current">1</a>
<span class="jp-hidden">...</span>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a class="jp-hidden">6</a>
<a class="jp-hidden">7</a>
<a class="jp-hidden">8</a>
<a class="jp-hidden">9</a>
<span>...</span>
<a>10</a>
<a class="jp-next">next →</a>
</div>See how it looks like with the default options.
Styling
jPages comes with a style sheet so it can work right out of the box. The default style is very simple. This is what you need to know to style it in your own way.
Below there's a list of classes used in the navigation links. They all have the "jp-" suffix to prevent conflicts with classes you might have created before:
- jp-first
- Added to the button 'first' (not created by default)
- jp-previous
- Added to the button 'previous'
- jp-next
- Added to the button 'next'
- jp-last
- Added to the button 'last' (not created by default)
- jp-current
- Added to link correspondent to the current page
- jp-disabled
- If the current page is the first, buttons 'first' and 'previous' will have this class. The same happens to the buttons 'next' and 'last' if the current page is the last one.
- jp-hidden
- Used to hide elements (automatically added to the page so you won't find it in the stylesheet)
