[DOM] faire des jauges

**Emcy** · 29/01/2008, 17h40

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...

**Gnidhal** · 29/01/2008, 18h07

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.

**SpaceFrog** · 29/01/2008, 18h16

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 ...

**Emcy** · 29/01/2008, 18h22

c'est quoi des "dom" ?

**Auteur** · 29/01/2008, 18h27

exemple retrouvé dans mes archives

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**Emcy** · 30/01/2008, 17h50

merci pour l'exemple

[DOM] faire des jauges

JavaScript

Vue hybride

Discussions similaires

Partager

Partager