revolunet, conseil NTIC intranet internet  

SimpleSlider, slider simpliste en Javascript

Introduction

SimpleSlider est une petite librairie qui vous permet d'ajouter simplement un slider horizontal et facilement configurable a vos pages web.

Cette librairie est distribuée sous licence BSD.

Toutes questions ou suggestions sont les bienvenues contact@revolunet.com

Enjoy ;)

Features list

  • Facile à utiliser
  • Plusieurs sliders par pages
  • Testé sous IE et Firefox

    • Usage

    Copiez SimpleSlider.js dans le repertoire de votre site, liez la librairie dans votre page et déclarez vos sliders dans le onload.

    SimpleSlider(divID, width, height, bgcolor="silver", fgcolor="#666666") // declaration d'un slider, qui sera positionné dans divID, aura width de longueur et height de hauteur. les couleurs sont optionelles
    SimpleSlider.position // récupère la position du curseur, la valeur est comprise entre 0 et 1
    SimpleSlider.onNewPosition // référence a votre propre fonction quand le curseur change de place
    SimpleSlider.setPosition(float) // Replace le curseur a l'endroit voulu.
    SimpleSlider.thumb.dragging // Pour savoir si le curseur est actuelement en train d'être déplacé, ou pas.

    Examples :

    un Slider basic
    Position : 0
    <div id="slider1" ></div> Position : <span id="slider1_label">0</span> <script language="javascript"> var myslider = new Slider("slider1", 500, 10); myslider.onNewPosition = function() { document.getElementById("slider1_label").innerHTML = parseInt(myslider.position * 100 * 100) / 100; } </script>

    Avec des couleurs personnalisées
    Position : 0
    <div id="slider2" ></div> Position : <span id="slider2_label">0</span> <br> <img id="revolunet_button" src="revolunet.png"/> <script language="javascript"> var myslider2 = new Slider("slider2", 300, 20, "green", "yellow"); myslider2.onNewPosition = function() { document.getElementById("slider2_label").innerHTML = parseInt(myslider2.position * 100 * 100) / 100; document.getElementById("revolunet_button").style.width = 80 + (myslider2.position * 80); } </script>

    Licence :

    Cette librairie est distribuée sous licence BSD.

    Download

  • fichier source (clic droit + enregistrer)

    • Commentaires