Widget má za úkol visualizovat procentuální stav (podílovou hodnotu) mezi aktuálním a maximální hodnotou. Využití najdeme u visualizací stavů, jako jsou např. zaplnění disku, aktuální počet zpráv/maximální počet zpráv, dosažený počet bodů/maximální počet bodů, atd... Vychází ze specifikace W3C. Pokud není HTML5 meter dostupný, vytvoří vlastní za pomocí HTML elementů span a em.
var meter = new JAK.Meter({max:50, value:10}); // vytvoříme měřič s max. hodnotou 50 a aktuálně nastavenou na 10
var container = meter.getContainer(); // získáme vytvořený HTML element
JAK.gel("target1").appendChild(container); // připneme ho do DOMu
10/50
Nyní provedeme změnu aktuální hodnoty
meter.setValue(30);
30/50
Měřič lze nakonfigurovat tak, aby nám barevně odlišil kritické hodnoty (příliš nízké a příliš vysoké).
Jednotlivé hodnoty jsou na sobě nezávislé, čili pokud uvedeme hodnotu low (příliš nízká), nemusíme uvádět high.
var options = {max:100, value:95, low:20, optimum:50, high:80};
var meter = new JAK.Meter(options); // vytvoříme měřič s max. hodnotou 100 a aktuálně nastavenou na 95 spolu s dalšími nastavenými hodnotami
var container = meter.getContainer(); // získáme vytvořený HTML element
JAK.gel("target1").appendChild(container); // připneme ho do DOMu
Na měřiči lze vidět, že jsme přesáhli kritickou hodnotu.
95/100
Nyní provedeme úpravu aktuální hodnoty tak, aby spadala do příliš malých hodnot a podívejme se, jak se měřič změní.
meter.setValue(10);
10/100
Jelikož jsme opět v kritické hodnotě, tentokrát příliš nízké, barva měřiče se nezměnila.
Zkusme snížit low value na 5 a barva se změní:
meter.setLow(5);
10/100