Exemple de jauge en JQuery UI
Cet exemple montre comment utiliser les jauges avec JQuery UI et comment récupérer leur valeur.
Une jauge simple (de 0 à 100) :
Une jauge double (de 0 à 600 par pas de 50) :
Une jauge verticale (de 0 à 100) :
Détail des codes source :
Dans le code HTML les jauges sont à la base de simples balises DIV vides :
<p align="justify">Une jauge simple (de 0 à 100) : <span id="affichage1"></span></p>
<div id="jauge1"></div>
<p align="justify">Une jauge double (de 0 à 600 par pas de 50) : <span id="affichage2"></span></p>
<div id="jauge2"></div>
<p align="justify">Une jauge verticale (de 0 à 100) : <span id="affichage3"></span></p>
<div id="jauge3"></div>
Et voici le code JQuery UI gérant les 3 jauges ci-dessus :
<script type="text/javascript" language="javascript">
///////////////////////////////////////////////////////////////
// Script gérant les 3 jauges en utilisant JQuery UI 1.11.4
// Réalisé le 19 juillet 2015 par Jean-Christophe MICHEL
// www.gecif.net
$(document).ready(function(){
$("#jauge1").slider({
// value indique la valeur par défaut :
value:40,
min:0,
max:100,
// si la jauge est modifiée on affiche sa valeur dans la balise d'id "affichage1" :
slide: function(event,ui) {
$("#affichage1").html("n = "+ui.value)}
});
$("#jauge2").slider({
min:0,
max:600,
// step définit le pas de progression :
step:50,
// range:true configure un intervale soit une jauge double
range:true,
// dans le cas d'une jauge double values est un tableau :
values:[300,500],
// dans le cas d'une jauge double les 2 valeurs se retrouvent dans le tableau values :
slide: function(event,ui) {
$("#affichage2").html("n1 = "+ui.values[0]+" et n2 = "+ui.values[1])}
});
$("#jauge3").slider({
// le paramètre orientation permet de configurer une jauge verticale :
orientation:"vertical",
value:40,
min:0,
max:100,
slide: function(event,ui) {
$("#affichage3").html("n = "+ui.value)}
});
});
</script>
Réalisé par Jean-Christophe MICHEL
Juillet 2015