Horizontal Scrolling : hSlider Scrollbar

jQuery Plugin

hSlider est un plugin jQuery qui permet la customisation (design CSS) de scrollbars horizontales.
Il comprend une pagination interne en Ajax, qui maintient ses performances d'affichage et de calcul d'effets, et le rend utilisable comme navigation efficace même sur un grand nombre d'éléments.

09/05/2011 : mise à jour des librairies jquery et jquery.ui, corrigeant le bug du drag&drop "cassé" sous IE9.

Fonctionnalités

dimensions ajustables (largeur et hauteur d'élément, largeur et hauteur de la barre de contrôle...).
entièrement designable en CSS.
scrollbar (barre de défilement) draggable, zone de contrôle (scrolling) cliquable, boutons gauche et droite de déplacement pas-à-pas.
pagination interne en Ajax.
possibilité de définir une fonction exécutée à la fin du chargement interne en Ajax.
possibilité de définir des groupes (ex : catégories, rubriques de produits, etc.) afin de garder mémoire de la navigation à l'aide de cookies (la pagination ainsi que la position de la scrollbar sont conservées au changement de page : pour effectuer un test, recharger cette page après un déplacement de la scrollbar ou un changement de pagination).

HTML

<div id="hslider-container">
    <div id="hslider">
        <div id="hslider-pageprevious"></div>				
        <div id="hslider-pagenext"></div>				
        <div class="clear"></div>
    </div>
</div>
<div id="hslider-controls">
    <div id="hslider-moveleft"></div>    
    <div id="hslider-dragcontainer">
        <div id="hslider-drag"></div>
    </div>	
    <div id="hslider-moveright"></div>    	
</div>

Javascript

$('#hslider').darmahSlider({

slider: '#hslider',
numelem: 30, //nombre d'éléments par page interne (Ajax)
totalnumelem : 90, //nombre d'éléments au total
elemwidth: 106, //largeur d'un élément (marges comprises) en px
width: 630, //largeur conteneur visible
controlwidth: 560, //largeur totale des contrôles
numelemperstep: 5, //nombre d'éléments a slider au clic gauche-droite
cookiename: 'cat-6', //identifiant du cookie pour la navigation (ex : rubrique de produit, catégorie, etc.)
ajaxurl : 'hslider.get.page.php', //URL du script pour génération de page interne en Ajax
ajaxparam : 6, //paramètre passé en Ajax (ex : rubrique de produit, catégorie, etc.) pour génération de page interne
readyfunc : null //fonction exécutée après chaque chargement de page interne Ajax

});

Dépendances et sources

jquery.js (librairie jQuery).
jquery.cookie.js (plugin de gestion de cookies).
jquery.ui.js (jQuery's user interface library, pour le drag&drop).
hslider.js (plugin hSlider).
hslider.get.page.php (génération page à page en Ajax).
hslider.style.css (feuille de styles CSS hSlider).

» télécharger l'exemple (sources et dépendances)