HTML and CSS Reference
In-Depth Information
Using the Meter Control
For the last example, you'll add a meter control, which is very similar to the progress bar. A meter allows you to
define intervals within the range that will enable the color-coding of the status indicator. For example, consider an
oil-pressure gauge on a car. A “normal” range is indicated on the gauge and low or high values are highlighted. I
don't need to know what the oil-pressure is or even what it should be; I just want to know if it's in the normal range.
Like the range control, the meter control supports the min and max attributes as well as the current value . It
also provides low , high , and optimum attributes that define the normal range. Enter the following code in bold:
<div>
<progress id=”FormProgress” value=”0” max=”100”>
<strong>Progress: 60%</strong>
</progress>
</div>
<div>
<meter id=”Meter” value=”50” min=”20” max=”120”
low=”50” high=”100” optimum=”75”>
<strong>Meter:</strong>
</meter>
</div>
</fieldset>
To demonstrate how different values are displayed, you'll add some JavaScript code to update the control
with a random value every second. To do that, add the following code in bold to the bindEvents() function:
function bindEvents() {
var fieldList = document.getElementsByClassName(“text-box single-line”);
for (var i = 0; i < fieldList.length; i++) {
fieldList[i].addEventListener(“change”, calculateProgress, false);
}
setInterval(function () {
var meter = document.getElementById(“Meter”);
meter.value = meter.min + Math.random() * (meter.max - meter.min);
}, 1000);
}
This code uses the setInterval() function so the anonymous function is called every 1000 milliseconds.
Press F5 to start the application. Depending on the value the color will change from green to yellow as shown in
Figure 3-22 .
Figure 3-22. The meter control
 
Search WWH ::




Custom Search