Prvek meter

Prvek meter se používá k zobrazení nějaké hodnoty ve stylizované podobě.

Vzhled prvku představuje částečně nebo úplně vyplněný pruh. Pruh může být zelený, žlutý nebo červený (barva pruhu závisí na hodnotách atributů, více o tom bude dále):

Prvek meter byste měli použít například v následující situaci: chcete zobrazit na obrazovce aktuální hodnotu teploty, přičemž teplota se může měnit od 0 do 100. Měli byste uvést následující atributy: atribut value musí udávat aktuální hodnotu teploty, atribut min - minimální možnou hodnotu (v našem případě 0), atribut max - maximální možnou (v našem případě 100).

V závislosti na hodnotě atributu value bude pruh malý nebo velký. Pokud zadáte value s hodnotou 10, tak pruh bude malý (protože 10 je velmi blízko minima - k nule), pokud však zadáte hodnotu 90, tak pruh bude velký (protože 90 je blízko maxima - ke 100). Pokud zadáte hodnotu 100 - tak pruh zaplní celý prvek (protože hodnota dosáhla maxima).

Pokud zadáte hodnotu větší než 100, tak pruh přesto zaplní celý prvek. Pokud však zadáte 0 a méně - tak pruh nebude vůbec.

Příklad

Hodnota atributu value je malá:

:

Příklad

Hodnota atributu value je velká:

:

Příklad

Hodnota atributu value je střední:

:

Příklad

Hodnota atributu value je rovna maximální:

:

Příklad

Hodnota atributu value je rovna minimální:

:

Příklad

Hodnota atributu value je větší než maximální:

:

Příklad

Hodnota atributu value je menší než minimální:

:

Přidáváme atributy low a high

V prvku meter jsou ještě 2 atributy: low a high.

Podívejme se na jejich funkci na příkladu teploty. Připomínám, že naše minimální teplota je 0, a maximální - 100. Předpokládejme nyní, že chceme vytvořit následující rozsahy - "studená teplota" od 0 do 20, "normální" od 20 do 80 a "horká" od 80 do 100.

Chceme-li nastavit studenou teplotu, uvedeme jako hodnotu atributu low číslo 20. Vyjde nám, že od nuly (to je hodnota atributu min) do 20 (hodnota atributu low) máme oblast nízkých hodnot.

Chceme-li nastavit horkou teplotu, uvedeme jako hodnotu atributu high číslo 80. Vyjde nám, že od 80 (to je hodnota atributu high) do 100 (hodnota atributu max) máme oblast vysokých hodnot.

Normální teplota bude od 20 (to je hodnota atributu low) do 80 (hodnota atributu high). Tuto oblast nazveme oblastí normálních hodnot.

Nyní, v závislosti na tom, do které oblasti spadá hodnota atributu value, bude pruh zbarven zeleně nebo žlutě. Zelená bude, pokud jsme spadli do oblasti normálních hodnot, a žlutá - pokud do oblasti vysokých nebo nízkých hodnot.

Příklad

Hodnota atributu value spadá do oblasti nízkých hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti normálních hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti vysokých hodnot:

:

Přidáváme atribut optimum

Atribut optimum určuje optimální hodnotu. Pro náš příklad může být optimální studená teplota, normální nebo horká - dle vašeho výběru. Předpokládejme, že uvedete, že optimální teplota je studená. Nyní, v závislosti na hodnotě atributu value (tedy na aktuální teplotě) bude barva pruhu zelená, žlutá nebo červená.

Pokud aktuální teplota spadá do oblasti optimálních teplot (a my jsme uvedli, že optimální je studená), tak barva pruhu bude zelená. Pokud aktuální teplota spadá do sousedního s optimálním rozsahem (v našem případě je to normální teplota), tak pruh zežloutne. Pokud však aktuální teplota nespadá do sousedního s optimálním rozsahem (v našem případě je to horká teplota), tak pruh zčervená.

Podobným způsobem se vše bude dít, pokud optimální teplotou určíme horkou. V tomto případě, pokud aktuální teplota spadla do oblasti horkých teplot - pruh bude zelený, pokud spadla do oblasti normálních - žlutý, pokud do oblasti studených - červený.

Pokud optimální určíme normální teplotu, tak pruh může být pouze zelený (pokud aktuální teplota spadla do normální) nebo žlutý (pokud aktuální teplota spadla do souseda normální teploty, a to horké nebo studené).

Chceme-li určit, který rozsah je optimální, je třeba uvést jako hodnotu atributu optimum libovolné číslo z tohoto rozsahu.

V příkladech níže hodnota atributu optimum spadá do oblasti nízkých hodnot (tedy studených teplot).

Příklad

Hodnota atributu value spadá do oblasti nízkých hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti normálních hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti vysokých hodnot:

:

V příkladech níže hodnota atributu optimum spadá do oblasti vysokých hodnot (tedy horkých teplot).

Příklad

Hodnota atributu value spadá do oblasti nízkých hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti normálních hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti vysokých hodnot:

:

---

V příkladech níže hodnota atributu optimum spadá do oblasti normálních hodnot (tedy normálních teplot).

Příklad

Hodnota atributu value spadá do oblasti nízkých hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti normálních hodnot:

:

Příklad

Hodnota atributu value spadá do oblasti vysokých hodnot:

:

Staré prohlížeče

Staré prohlížeče nebudou schopny zobrazit prvek meter ve stylizované podobě a budou místo toho vypisovat obsah samotného prvku:

:

Atributy

Hodnota atributů může být desetinné a záporné číslo.

Atribut	Popis
value	Nastavuje aktuální hodnotu. Povinný atribut.
min	Nastavuje minimální možnou hodnotu. Výchozí hodnota: 0.
max	Nastavuje maximální možnou hodnotu. Výchozí hodnota: 1.
low	Nastavuje hranici oblasti nízkých hodnot. Nízké hodnoty budou od čísla v atributu min do čísla v atributu low.
high	Nastavuje hranici oblasti vysokých hodnot. Vysoké hodnoty budou od čísla v atributu high do čísla v atributu max.
optimum	Určuje oblast optimálních hodnot.

Viz také