La balise html5 meter
Je continue ma série sur le code html5 avec la balise meter. Je vous montre comment l’utiliser avec du code html5 et du code Javascript.
Prérequis
– Disposer d’un navigateur compatible html5, Chrome de préférence;
– connaitre le code html sans nécessairement en maîtriser tous les rouages;
– connaitre le code javascript sans nécessairement en maîtriser tous les rouages.
A quoi sert la balise html5 meter ?
La balise meter est une balise pour indiquer une mesure à un instant t. Par exemple, vous pourriez l’utiliser pour :
– indiquer le taux d’occupation d’un disque dur;
– ou encore la mesure de la mémoire utilisée par votre système.
html5 meter ou html5 progress ?
La balise progress rend compte de la progression d’une tâche, elle devrait est toujours être croissante. La balise meter rend compte d’un état à un instant t d’une ressource, elle peut varier à la hausse comme à la baisse.
Pour ceux qui souhaitent en savoir plus sur la balise progressbar, 2 articles sont parus sur le sujet :
– Afficher une barre de progression en html5;
– Une barre de progression pour le chargement de vos images.
La balise html5 meter en détail
Cette balise comporte 6 attributs :
– value : la valeur courante de la jauge;
– min : la valeur la plus basse possible, par défaut à 0;
– max : la valeur la plus haute possible, par défaut à 1;
– low Specifies the range that is considered to be a « low » value.
– high Specifies the range that is considered to be a « high » value.
– optimum : la valeur dites optimale.
La jauge comporte aussi trois couleurs indicatrices de bonne, mauvais ou moyenne valeur.
Par défaut (le choix des couleurs est ajustable via les CSS) :
– rouge pour une mauvaise valeur;
– vert pour une bonne valeur;
– jaune pour une valeur moyenne.
C’est à l’utilisateur de spécifier ce qu’il considère comme une bonne valeur (vert), une mauvaise valeur (rouge) et une valeur moyenne (jaune).
Spécificités des valeurs low, high et optimum
1er exemple
Prenons l’exemple d’une jauge mesurant l’utilisation de la mémoire : moins il y a de mémoire utilisée mieux c’est, donc un faible taux d’occupation sera au vert, alors qu’un taux élevé sera au rouge.
La valeur de optimum doit être, dans ce cas, inférieure à la valeur de low (optimum < low). De cette manière, on indique qu’en dessous de la valeur low, la valeur (value) fait partie des meilleures valeurs (jauge en vert). Au dessus de la valeur de high, la valeur (value) fait partie des plus mauvaises valeurs (jauge en rouge).
2ème exemple
Un autre exemple avec le taux d’occupation d’une salle de cinéma : plus la salle est occupée mieux c’est, un taux d’occupation élevé sera au vert, alors qu’un taux faible sera au rouge.
La valeur de optimum doit être, dans ce cas, supérieure à la valeur de high (optimum < low). De cette manière, on indique qu’au dessus de la valeur high, la valeur (value) fait partie des meilleures valeurs (jauge en vert). En dessous de la valeur de low, la valeur (value) fait partie des plus mauvaises valeurs (jauge en rouge).
Syntaxe de la balise html5 meter
<meter value="10" min="0" max="100" low="25" high="75" optimum="80">
Chaîne affichée si la balise n'est pas supportée par le navigateur
</meter>Quelques exemples
Avec comme attributs : min=0, max=100, low=25, high=75 et optimum=80
<meter value="10" min="0" max="100" low="25" high="75" optimum="80">10%</meter> <strong>value=10 < low</strong><br />
<meter value="20" min="0" max="100" low="25" high="75" optimum="80">20%</meter> <strong>value=20 < low</strong><br />
<meter value="30" min="0" max="100" low="25" high="75" optimum="80">30%</meter> <strong>value=30 > low et < high</strong><br />
<meter value="40" min="0" max="100" low="25" high="75" optimum="80">40%</meter> <strong>value=40 > low et < high</strong><br />
<meter value="50" min="0" max="100" low="25" high="75" optimum="80">50%</meter> <strong>value=50 > low et < high</strong><br />
<meter value="60" min="0" max="100" low="25" high="75" optimum="80">60%</meter> <strong>value=60 > low et < high</strong><br />
<meter value="70" min="0" max="100" low="25" high="75" optimum="80">70%</meter> <strong>value=70 > low et < high</strong><br />
<meter value="80" min="0" max="100" low="25" high="75" optimum="80">80%</meter> <strong>value=80 > high</strong>qui devrait donner à l’affichage.
Avec comme attributs : min=0, max=100, low=25, high=75 et optimum=20
<meter value="10" min="0" max="100" low="25" high="75" optimum="20">10%</meter> <strong>value=10 < low</strong><br />
<meter value="20" min="0" max="100" low="25" high="75" optimum="20">20%</meter> <strong>value=20 < low</strong><br />
<meter value="30" min="0" max="100" low="25" high="75" optimum="20">30%</meter> <strong>value=30 > low et < high</strong><br />
<meter value="40" min="0" max="100" low="25" high="75" optimum="20">40%</meter> <strong>value=40 > low et < high</strong><br />
<meter value="50" min="0" max="100" low="25" high="75" optimum="20">50%</meter> <strong>value=50 > low et < high</strong><br />
<meter value="60" min="0" max="100" low="25" high="75" optimum="20">60%</meter> <strong>value=60 > low et < high</strong><br />
<meter value="70" min="0" max="100" low="25" high="75" optimum="20">70%</meter> <strong>value=70 > low et < high</strong><br />
<meter value="80" min="0" max="100" low="25" high="75" optimum="20">80%</meter> <strong>value=80 > high</strong><br />
<meter value="90" min="0" max="100" low="25" high="75" optimum="20">90%</meter> <strong>value=90 > high</strong>qui devrait donner à l’affichage.
J’espère que cet article vous a éclairés sur la balise html5 meter. Y a plus qu’à utiliser.
