A meter tag

A meter tagot arra használjuk, hogy valamilyen értéket szépen formázott módon jelenítsünk meg.

A tag megjelenése részben vagy teljesen kitöltött sáv. A sáv zöld, sárga vagy piros színű lehet (a sáv színe az attribútumok értékétől függ, erről lesz szó később):

A meter tagot például a következő helyzetekben érdemes használni: meg szeretnénk jeleníteni a képernyőn az aktuális hőmérsékletet, miközben a hőmérséklet 0 és 100 között változhat. A következő attribútumokat kell megadnunk: a value attribútum az aktuális hőmérsékletet adja meg, a min attribútum a minimális lehetséges értéket (esetünkben 0), a max attribútum pedig a maximális lehetséges értéket (esetünkben 100).

A value attribútum értékétől függően a sáv kicsi vagy nagy lesz. Ha a value értékét 10-re állítjuk, akkor a sáv kicsi lesz (mivel a 10 nagyon közel van a minimumhoz - a nullához), ha viszont a 90 értéket adjuk meg, akkor a sáv nagy lesz (mivel a 90 közel van a maximumhoz - a 100-hoz). Ha 100 értéket adunk meg - akkor a sáv kitölti a teljes elemet (mivel az érték elérte a maximumot).

Ha a 100-nál nagyobb értéket adunk meg, akkor a sáv így is kitölti a teljes elemet. Ha viszont 0 vagy annál kisebb értéket adunk meg - akkor egyáltalán nem lesz sáv.

Példa

A value attribútum értéke kicsi:

<meter value="10" min="0" max="100"></meter>

Példa

A value attribútum értéke nagy:

<meter value="90" min="0" max="100"></meter>

Példa

A value attribútum értéke közepes:

<meter value="50" min="0" max="100"></meter>

Példa

A value attribútum értéke egyenlő a maximálissal:

<meter value="100" min="0" max="100"></meter>

Példa

A value attribútum értéke egyenlő a minimálissal:

<meter value="0" min="0" max="100"></meter>

Példa

A value attribútum értéke nagyobb a maximálisnál:

<meter value="110" min="0" max="100"></meter>

Példa

A value attribútum értéke kisebb a minimálisnál:

<meter value="-10" min="0" max="100"></meter>

Low és high attribútumok hozzáadása

A meter tagban van még 2 attribútum: a low és a high.

Vizsgáljuk meg működésüket a hőmérséklet példáján. Emlékezzünk, hogy a minimális hőmérséklet 0, a maximális pedig 100. Tegyük fel, hogy a következő tartományokat szeretnénk megadni - "hideg hőmérséklet" 0-tól 20-ig, "normális" 20-tól 80-ig, és "forró" 80-tól 100-ig.

A hideg hőmérséklet megadásához a low attribútum értékét állítsuk 20-ra. Így a nullától (ez a min attribútum értéke) 20-ig (a low attribútum értéke) alacsony értékek tartománya lesz.

A forró hőmérséklet megadásához a high attribútum értékét állítsuk 80-ra. Így 80-tól (ez a high attribútum értéke) 100-ig (a max attribútum értéke) magas értékek tartománya lesz.

A normális hőmérséklet 20-tól (a low attribútum értéke) 80-ig (a high attribútum értéke) tart. Ezt a tartományt nevezzük normál értékek tartományának.

Most attól függően, hogy a value attribútum értéke melyik tartományba esik, a sáv zöldre vagy sárgára színeződik. Zöld lesz, ha a normál értékek tartományába esünk, sárga pedig - ha a magas vagy alacsony értékek tartományába.

Példa

A value attribútum értéke az alacsony értékek tartományába esik:

<meter value="10" min="0" low="20" high="80" max="100"></meter>

Példa

A value attribútum értéke a normál értékek tartományába esik:

<meter value="50" min="0" low="20" high="80" max="100"></meter>

Példa

A value attribútum értéke a magas értékek tartományába esik:

<meter value="90" min="0" low="20" high="80" max="100"></meter>

Optimum attribútum hozzáadása

A optimum attribútum határozza meg az optimális értéket. Példánkban az optimális lehet a hideg hőmérséklet, a normális vagy a forró - a választás a tiéd. Tegyük fel, hogy azt adod meg, hogy az optimális hőmérséklet hideg. Most a value attribútum értékétől (azaz az aktuális hőmérséklettől) függően a sáv színe zöld, sárga vagy piros lesz.

Ha az aktuális hőmérséklet az optimális hőmérséklet tartományába esik (és mi azt adtuk meg, hogy az optimális a hideg), akkor a sáv színe zöld lesz. Ha az aktuális hőmérséklet az optimális melletti tartományba esik (esetünkben ez a normális hőmérséklet), akkor a sáv sárgává válik. Ha pedig az aktuális hőmérséklet nem az optimális melletti tartományba esik (esetünkben ez a forró hőmérséklet), akkor a sáv pirossá válik.

Hasonló módon fog minden lezajlani, ha az optimális hőmérsékletnek a forrót adjuk meg. Ebben az esetben, ha az aktuális hőmérséklet a forró hőmérséklet tartományába esik - a sáv zöld lesz, ha a normális tartományba esik - sárga, ha a hideg tartományba - piros.

Ha az optimálisnak a normális hőmérsékletet adjuk meg, akkor a sáv csak zöld (ha az aktuális hőmérséklet a normális tartományba esik) vagy sárga (ha az aktuális hőmérséklet a normális melletti tartományba esik, ami a forró vagy a hideg) lehet.

Annak megadásához, hogy melyik tartomány az optimális, a optimum attribútum értékeként bármely számot meg kell adni ebből a tartományból.

Az alábbi példákban a optimum attribútum értéke az alacsony értékek tartományába esik (azaz hideg hőmérsékletek).

Példa

A value attribútum értéke az alacsony értékek tartományába esik:

<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

Példa

A value attribútum értéke a normál értékek tartományába esik:

<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

Példa

A value attribútum értéke a magas értékek tartományába esik:

<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

Az alábbi példákban a optimum attribútum értéke a magas értékek tartományába esik (azaz forró hőmérsékletek).

Példa

A value attribútum értéke az alacsony értékek tartományába esik:

<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

Példa

A value attribútum értéke a normál értékek tartományába esik:

<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

Példa

A value attribútum értéke a magas értékek tartományába esik:

<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

Az alábbi példákban a optimum attribútum értéke a normál értékek tartományába esik (azaz normális hőmérsékletek).

Példa

A value attribútum értéke az alacsony értékek tartományába esik:

<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

Példa

A value attribútum értéke a normál értékek tartományába esik:

<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

Példa

A value attribútum értéke a magas értékek tartományába esik:

<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

Régi böngészők

A régi böngészők nem tudják szépen megjeleníteni a meter taget, és ehelyett a tag tartalmát jelenítik meg:

<meter value="10" min="0" max="100">Ezt a szöveget jeleníti meg a régi böngészők.</meter>

Attribútumok

Az attribútumok értéke lehet tört és negatív szám.

Attribútum	Leírás
`value`	Beállítja az aktuális értéket. Kötelező attribútum.
`min`	Beállítja a minimális lehetséges értéket. Alapértelmezett érték: `0`.
`max`	Beállítja a maximális lehetséges értéket. Alapértelmezett érték: `1`.
`low`	Beállítja az alacsony értékek tartományának határát. Az alacsony értékek a `min` attribútumban megadott számtól a `low` attribútumban megadott számig tartanak.
`high`	Beállítja a magas értékek tartományának határát. A magas értékek a `high` attribútumban megadott számtól a `max` attribútumban megadott számig tartanak.
`optimum`	Meghatározza az optimális értékek tartományát.

Lásd még

a progress tag,
ami egy betöltősávot hoz létre.