Correctif « meter » (compteur)

But

L'élément « meter » de HTML5 affiche une mesure scalaire dans une gamme connue. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité en utilisant HTML générique et WAI-ARIA.

Description qui est inclus dans HTML5

The meter element represents a scalar measurement within a known range, or a fractional value; for example disk usage, the relevance of a query result, or the fraction of a voting population to have selected a particular candidate.

This is also known as a gauge.

The meter element should not be used to indicate progress (as in a progress bar). For that role, HTML provides a separate progress element.

The meter element also does not represent a scalar value of arbitrary range — for example, it would be wrong to use this to report a weight, or height, unless there is a known maximum value.

Exemples

Description Min Low Value Max High Résultat
Normal (75%) 20 n/a 65 80 n/a 75 % (normal)
Trop haut (90%) 0 n/a 90 100 80 90 % (trop haut)
Trop bas (15 %) 100 120 115 200 180 15 % (trop bas)
150
View code

HTML

<table class="table table-striped">
	<thead>
		<tr>
			<th scope="col">Description</th>
			<th scope="col" lang="en">Min</th>
			<th scope="col" lang="en">Low</th>
			<th scope="col" lang="en">Value</th>
			<th scope="col" lang="en">Max</th>
			<th scope="col" lang="en">High</th>
			<th scope="col">Résultat</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Normal (75%)</td>
			<td>20</td>
			<td>n/a</td>
			<td>65</td>
			<td>80</td>
			<td>n/a</td>
			<td><meter min="20" value="65" max="80">75 % (normal)</meter></td>
		</tr>
		<tr>
			<td>Trop haut (90%)</td>
			<td>0</td>
			<td>n/a</td>
			<td>90</td>
			<td>100</td>
			<td>80</td>
			<td><meter min="0" value="90" max="100" high="80">90 % (trop haut)</meter></td>
		</tr>
		<tr>
			<td>Trop bas (15 %)</td>
			<td>100</td>
			<td>120</td>
			<td>115</td>
			<td>200</td>
			<td>180</td>
			<td><meter min="100" low="120" value="115" max="200" high="180">15 % (trop bas)</meter></td>
		</tr>
		<tr>
			<td colspan="3"><button class="btn btn-default" id="decreaseMeter" type="button">Diminuer</button></td>
			<td colspan="3"><button class="btn btn-default" id="increaseMeter" type="button">Augmenter</button></td>
			<td><meter id="updateTest" min="100" low="120" value="150" max="200" high="180"><span class="wb-inv">150</span></meter>
		</tr>
	</tbody>
</table>

JavaScript (démo seulement)

(function( $, wb ) {
"use strict";

$( document ).on( "click", "#increaseMeter, #decreaseMeter", function( event ) {
	var $elm = $( "#updateTest" ),
		increase = event.currentTarget.id === "increaseMeter",
		valuenow = parseInt( $elm.attr( "value" ), 10 ),
		limit = parseInt( $elm.attr( increase ? "max" : "min" ), 10 ),
		change = increase ? 1 : -1,
		newValue = valuenow === limit ? 0 : valuenow + change;

	$elm
		.attr( "value", newValue )
		.find( "span" )
			.text( newValue );

	// Update the visuals
	$elm.trigger( "wb-update.wb-meter" );
});

})( jQuery, wb );
Date de modification :