Correctif « meter » (compteur)

Questions ou commentaires?

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.

Needs translation

Use when

  • Displaying a scalar measurement within a known range

Do not use when

  • Displaying the progress of a task

Working example

Normal

<meter min="20" value="65" max="80">75% (normal)</meter>

Too high

<meter min="0" value="90" max="100" high="80">90% (too high)</meter>

Too low

<meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter>

How to implement

To use the polyfill, a standard progress element must be used. In cases where a browser doesn't support the progress element, the polyfill is automatically loaded.

Configuration options

Configuration options available for the meter element (HTML5 specification)

Events

Event Trigger What it does
wb-init.wb-meter Triggered manually (e.g., $( "meter" ).trigger( "wb-init.wb-meter" );). Used to manually initialize the meter polyfill. Note: The meter polyfill will be initialized automatically unless the meter element is added after the page has already loaded.
wb-update.wb-meter Triggered manually (e.g., $( "meter" ).trigger( "wb-update.wb-meter" );). Used to manually update the meter polyfill.
wb-ready.wb-meter (v4.0.5+) Triggered automatically after the meter polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native meter support. Used to identify where the meter polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-meter", "meter", function( event ) {
});
$( "meter" ).on( "wb-ready.wb-meter", function( event ) {
});
wb-updated.wb-meter (v4.0.5+) Triggered automatically after the meter polyfill is updated. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native meter support. Used to identify where the meter polyfill initialized (target of the event) 
$( document ).on( "wb-updated.wb-meter", "meter", function( event ) {
});
$( "meter" ).on( "wb-updated.wb-meter", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Meter polyfill source code on GitHub

Ù
Date de modification :