Control.Slider ()

Vous devez avoir pris connaissance ou être au déjà au fait des informations exprimées au sein des pages Control.Slider(class) et Control.Slider.options (argument) afin de pouvoir comprendre, utiliser et adapter au mieux les exemples de Control.Slider présentés dans cette page.

Cette page présente plusieurs exemples d'utilisations d'un Control.Slider .
Les premiers exemples sont repris du wiki officiel et selon l'évolution de Scriptaculous et/ou des besoins utilisateurs au sein des interfaces, d'autres exemples suivront.

Un menu d'accès rapide aux exemples de cette page est proposé ci après à l'aide d'une extension proposée par Prototype , Element.scrollTo(element) .
Slider horizontal simple Slider vertical simple Slider vertical simple inversé Slider avec valeurs prédéfinies Slider avec valeurs prédéfinies et interractions

Slider horizontal simple

Ce premier exemple présente un Control.Slider disposé de façon horizontale.
L'exemple permet d'afficher en dessous du Control.Slider la valeur du 'sliderValue' à la fin du déplacement du curseur sur la barre de défilement.
L'exemple est testable ci après :

Aucun déplacement ou changement de valeur effectué.

Le code nécessaire à la mise en place de cet exemple est présenté ci après avec dans l'ordre, le code HTML utilisé pour construire les zones 'div' représentant le Slider, puis le code Javacsript inséré localement dans la page permettant définir un Control.Slider sur le curseur 'handle1' et la barre de défilement 'track1'.
<div id="track1" style="width: 200px; background-color: #454545; height: 5px;"> <div class="selected" id="handle1" style="width: 5px; height: 10px; background-color: #BABABA; cursor: move; left: 0px; position: relative;"> </div> </div> <div id="debug1" style="padding-top: 5px;"> Aucun déplacement ou changement de valeur effectué. </div>

Le code Javascript permettant de définir le Control.Slider :
<script type="text/javascript" language="javascript"> // <![CDATA[ new Control.Slider('handle1','track1',{ onSlide:function(v){$('debug1').innerHTML='mouvement (slide) : '+v}, onChange:function(v){$('debug1').innerHTML='valeur mis à jour : '+v}} ); </script>

Slider vertical simple

Ce second exemple vous montre comment mettre en place un Control.Slider vertical.
Un exemple d'utilisation pourrait être par exemple au sein d'un logiciel de son pour représenter un volume en cours ou plutôt des variations de volume.
Un autre exemple pourrait être une barre de zoom sur une carte ou sur un élémént graphique.
L'exemple est testable ci après :

Le code nécessaire à la mise en place de l'exemple est présenté ci après :
<div id="track2" style="height: 100px; background-color: #545454; width: 5px;"> <div class="selected" id="handle2" style="width: 10px; height: 5px; background-color: #989898; border : yellow 1px solid; cursor: move; top: 0px; position: relative;"> </div> </div> <div id="debug2"Aucun mouvement ou changement de valeur détecté.</div>

Le code Javascript définissant le Control.Slider :
<script type="text/javascript" language="javascript"> // <![CDATA[ new Control.Slider('handle2','track2',{axis:'vertical', onSlide:function(v){$('debug2').innerHTML='mouvement (slide) : '+v}, onChange:function(v){$('debug2').innerHTML='valeur mis à jour : '+v}} ); </script>

Slider vertical simple inversé

Ce second exemple (bis) vous montre comment mettre en place un Control.Slider vertical inversé c'est à dire ou le curseur est de base positionné en bas.
L'exemple est testable ci après :

Aucun mouvement encore détecté.

Le script précise un 'sliderValue' à 1 lors de l'appel, valeur 1 qui est décompté après pour l'affichage de la valeur courante du Slider.
Le code nécessaire à la mise en place de cet exemple est présenté ci après (ndr : code HTML des zones 'div', puis code Javascript définissant le Control.Slider) :
<div id="track5" style="height: 100px; background-color: #878787; width: 5px;"> <div class="selected" id="handle5" style="width: 10px; height: 5px; background-color: #DADADA; cursor: move; top: 95px; position: relative;"> </div> </div> <div id="debug5">Aucun mouvement encore détecté.</div>
Ci après le code Javascript définissant le Control.Slider .
<script type="text/javascript" language="javascript"> // <![CDATA[ new Control.Slider('handle5','track5',{axis:'vertical', onSlide:function(v){$('debug5').innerHTML='mouvement (slide) : ' + (1-v)}, onChange:function(v){$('debug5').innerHTML='valeur mise à jour : '+ (1-v)}, sliderValue:1} ); </script>

Slider avec valeurs prédéfinies

Ce troisième exemple présente un type de Control.Slider qui devrait pas mal utilisé notamment pour des applications scientifiques se basant sur des échelles de représentations spécifiques.
Ce troisième exemple se base donc sur un Control.Slider.options.range défini de 0 à 200.
Attention ce 'range' cadre les limites en valeurs du Control.Slider mais ne définit les valeurs prédéfinies à proprement dit.
Ces valeurs sont définies au sein de Control.Slider.options.values qui précise un Array ou tableau contenant les valeurs suivantes '0,50,100,150,200' soit des valeurs par tranche de 50 unités dans l'intervalle 'range' précisé.

L'exemple est testable ci après :

Aucun mouvement encore détecté.

Le code nécessaire à la mise en place de cet exemple est présenté ci après avec dans l'ordre, le code HTML pour les zones 'div' puis le code Javascript pour la définition du Control.Slider.
<div id="track3" style="width: 200px; background-color: #212121; height: 5px;"> <div class="selected" id="handle3" style="width: 5px; height: 10px; background-color: #FAFAFA; border : #232323 1px solid; cursor: move; left: 0px; position: relative;"> </div> </div> <div id="debug3" style="padding-top: 5px;">Aucun mouvement encore détecté.</div>

<script type="text/javascript" language="javascript"> // <![CDATA[ new Control.Slider('handle3','track3',{range:$R(0,200), values:[0,50,100,150,200], onSlide:function(v){$('debug3').innerHTML='mouvement (slide) : '+v}, onChange:function(v){$('debug3').innerHTML='valeur mise à jour : '+v}} ); </script>

Slider horizontal avec valeurs prédéfinies et interractions 'div'

Un autre exemple de Control.Slider cette fois ci avec une interraction sur un élément externe au slider en lui même.
Cette interaction est prévue dans la définition de la classe et est vouée à être sans doute pas mal utilisée (ndr : un slider seul présente en effet peu d'intérêt).
L'exemple est testable ci après :

Aucun changement encore effectué.

L'exemple travaille avec une nouvelle zone 'div' nommée 'barreSortie4' dont la propriété CSS 'width' est mise à jour en relation avec la 'sliderValue' suite à un déplacement.
La sortie habituelle de la valeur du 'sliderValue' est tout de même conservée.
Le code nécesaire à la mise en place de cet exemple est présenté ci après :
<div id="track4" style="background-color: rgb(204, 204, 204); width: 200px; height: 5px;"> <div class="selected" id="handle4" style="width: 10px; height: 5px; background-color: rgb(255, 0, 0); cursor: move; left: 0px; position: relative;"> </div> </div> <div id="barreSortie4" style="border: 1px dashed rgb(35, 35, 35); background-color: rgb(220, 220, 220); width: 0px; height: 7px; margin-top: 10px;"></div>

Le code Javascript définissant le Control.Slider :
<script type="text/javascript" language="javascript"> // <![CDATA[ new Control.Slider('handle4','track4',{range:$R(0,20), values:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], onSlide:function(v){$('debug4').innerHTML='mouvement (slide) : '+v; $('barreSortie4').style.width=(v*3)+'px';}, onChange:function(v){$('debug4').innerHTML='valeur mise à jour : '+v}}); </script>

: 05/01/2007 21:57:09 | : Scriptaculous.js, Scriptaculous, Control.Slider, exemple, utilisation, Slider, rootClass, XHTML, XML, DOM, Slider, Graphique, curseur, barreDefilement, intervalle, v,

Aucun commentaire enregistré