[DOM] faire des jauges

Version imprimable

29/01/2008, 16h40
Emcy

[DOM] faire des jauges

Bonjour,

Je recupère via ajax des valeurs dynamique régulièrement : j'aimerais faire des jauge pour que ça fasse plus jolie. Le problème est que je n'ai aucune idée précise sur l'apparence que doivent avoir les jauges (je suis en manque d'insparation...). Avez vous des exemples de ce genre de chose ?

J'aimerais que lorsqu'on s'éloigne de la valeur "parfaite", la couleur de la jauge change et que si ça atteint un niveau critique, on voit un message d'erreur...
29/01/2008, 17h07
Gnidhal

Avec une css :
ta valeur incrémente la hauteur un bloc du genre <div id="jauge1" style="width:10px;"></div>
avec un petit bout de javascript du genre
var jauge = "";
document.getElementById('jauge1').style.height= jauge+'px';

la variable "jauge" étant bien sûr ta valeur numérique récupéré par ton script
Dans la CSS tu peux définir une couleur de fond pour ta jauge ou mieux une image de la bonne largeur et dès qu'on atteint la valeur seuil tu changes la couleur par le même principe :
if (jauge > 100) document.getElementById('jauge1').style.background-color= 'red';
ou si tu as placé une image de fond qui change de couleur à 80px de hauteur, tu peux la faire glisser avec un background-position et ne laisser voir que la partie haute de ton image...

Inspire toi de ce code là : http://www.dynamicdrive.com/dynamici...imitinput2.htm d'où j'ai tiré l'essentiel de ces infos. ;)
29/01/2008, 17h16
SpaceFrog

mouaips...
il serait plus pratique d'accumulées de div crées au moyen du dom de sorte à pouvoir leur changer la couleur de background sur des tranches de valeurs ...
29/01/2008, 17h22
Emcy

c'est quoi des "dom" ?

exemple retrouvé dans mes archives :D

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
<html>
<head>
<title></title>
 
<style type="text/css">
<!--
 
#divMoins{
background-color: #00AA00;
width: 0px;
display: none;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
#divPlus{
background-color: #FF0000;
width: 120px;
height: 50px;
border: none;
margin: 0px;
padding: 0px;
float: left;
}
 
.CRLF{
clear: both; 
visibility: hidden;
}
//-->
</style>
 
<script type="text/javascript">
<!--
 
function plus(n)
{
 var elM = document.getElementById("divMoins");
 var elP = document.getElementById("divPlus");
 
 if (elM.style.display!="block")
  elM.style.display="block";
 
 if (elP.style.display!="block")
  elP.style.display="block"
 
 elM.style.width = Math.round(120-n*120/100);   //120 : largeur du div
 elP.style.width = Math.round(n*120/100);
 
 if (n==100)
    elM.style.display="none";
 
 if (n==0)
    elP.style.display="none";
}
 
//-->
</script>
 
</head>
 
<body>
 
<table border="1" width="140px">
  <tr>
    <td>
 
    <div id="divPlus">&nbsp;
    </div>
    <div id="divMoins">&nbsp;
    </div>
 
    </td>
  </tr>
</table>
 
 
 
 
<hr class="CRLF">
 
 
Entrez une valeur :
<input type="text" id="idN" name="" maxlength="10">%<br>
<input type="button" style="width: 50px" value="test" onclick="plus(document.getElementById('idN').value)"><br><br>
 
 
 
</body>
 
</html>

30/01/2008, 16h50
Emcy

merci pour l'exemple ;)