17/04/12

jPages — Pagination avec jQuery

jPages permet de créer un système de pagination à partir d’une liste ou de n’importe quel container. Ce plugin jQuery propose de nombreuses fonctionnalités : déplacement automatique, au clavier ou encore sur l’évènement scroll. La navigation est entièrement personnalisable. Plugin compatible avec tous les navigateurs modernes et avec Internet Explorer à partir de IE7.

Implémentation

<!-- 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>
</ul>
$(function(){
    $("div.holder").jPages({
        containerID : "itemContainer"
    });
});

Code généré

Voici le code ajouté par le plugin dans div.holder :

<!-- 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>


Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »