jPages – Plugin jQuery – Pagination à effet pour vos sites web

Posted By Franck Pertegas on 25 Avr 2012 in Articles, CSS, Framework, Javascript, Programmation | 0 comments

Me revoici avec un autre plugin jQuery qui vous permet une fois de plus d’agrémenter vos sites web d’effets. Aujourd’hui je vous présente jPages qui permet de créer automatiquement une pagination sur votre site web.

jPages est un plugin jQuery qui permet une pagination avec entre autre, la possibilité de tourner les pages automatiquement, via le scroll de la souris ou même avec le clavier. Il permet aussi de gérer la vitesse, les effets, de customiser la barre de menu de navigation etc…

Vous l’aurez compris, ce plugin de pagination jQuery est complet.

Comment l’utilise-t-on ?

Appel du css et des librairies javascript :

<script src="vers-mon-jquery/1.7.1/jquery.min.js"></script>
<script src="js/jPages.js"></script>

Si on souhaite utiliser animate.css afin d’agrémenter notre pagination d’effets issus de ce fichier :

<link rel="stylesheet" href="css/animate.css" />

Création de la structure html qui accueillera notre pagination :

<!-- Future navigation panel -->
<div class="holder"></div>
<!-- Item container (Pas obligatoirement une balise UL) -->
<ul>
<ul><!-- Items -->
 	<li>...</li>
 	<li>...</li>
 	<li>...</li>
 	<li>...</li>
 	<li>...</li>
</ul>
</ul>
...

Puis appel du script javascript qui permettra la création de la pagination :

$(function(){

$("div.holder").jPages({
containerID : "itemContainer"
});

});

Et là, vous avez votre pagination en jQuery de base proposée via ce plugin.
Bien entendu il existe une multitude d’options et le css est entièrement modifiable.

La page officiel de ce plugin jPages avec toutes les démos qui vont avec et les explications.
Puis la page de téléchargement

Encore un bon plugin jQuery 😉

Articles qui peuvent vous intéresser :

• DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
• Glisse – Plugin jQuery – Faites défiler vos images
• Retour progressif des articles sur LudiBlog
• Chocolat – plugin jQuery – La visionneuse d’image pratique
• Chocolat – plugin jQuery – La visionneuse d’image pratique