Elementul meter
Elementul meter este utilizat pentru afișarea
unei valori într-o formă atractivă.
Aspectul elementului este reprezentat de o bară parțial sau complet colorată. Bara poate fi verde, galbenă sau roșie (culoarea depinde de valorile atributelor, despre aceasta vom discuta mai jos):
Elementul meter ar trebui utilizat, de
exemplu, în următoarea situație: doriți să
afișați pe ecran valoarea curentă a temperaturii,
în timp ce temperatura poate varia de la 0
la 100. Ar trebui să specificați următoarele
atribute: atributul value ar trebui să indice
valoarea curentă a temperaturii, atributul min
- valoarea minimă posibilă (în cazul nostru 0), atributul max - valoarea maximă
posibilă (în cazul nostru 100).
În funcție de valoarea atributului value
bara va fi mică sau mare. Dacă
specificați value cu valoarea 10,
atunci bara va fi mică (deoarece 10
este foarte aproape de minim - de zero), dacă însă
specificați valoarea 90, atunci bara va fi
mare (deoarece 90 este aproape de maxim
- de 100). Dacă specificați valoarea 100 - atunci
bara va ocupa întregul element (deoarece valoarea
a atins maximul).
Dacă specificați o valoare mai mare decât 100,
atunci bara va ocupa totuși întregul element.
Dacă însă specificați 0 sau mai puțin - atunci bara
va dispărea complet.
Exemplu
Valoarea atributului value este mică:
<meter value="10" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este mare:
<meter value="90" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este medie:
<meter value="50" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este egală cu maximul:
<meter value="100" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este egală cu minimul:
<meter value="0" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este mai mare decât maximul:
<meter value="110" min="0" max="100"></meter>
:
Exemplu
Valoarea atributului value este mai mică decât minimul:
<meter value="-10" min="0" max="100"></meter>
:
Adăugarea atributelor low și high
În elementul meter mai există 2 atribute:
low și high.
Să analizăm funcționarea lor folosind exemplul temperaturii.
Reamintim că temperatura noastră minimă
este 0, iar maximă - 100.
Să presupunem acum că dorim să definim următoarele intervale
- "temperatură rece" de la 0 la 20,
"normală" de la 20 la 80 și
"fierbinte" de la 80 la 100.
Pentru a seta temperatura rece, vom specifica
valoarea atributului low ca fiind numărul 20.
Se va obține că de la zero (aceasta este valoarea atributului
min) până la 20 (valoarea atributului
low) avem zona valorilor scăzute.
Pentru a seta temperatura fierbinte, vom specifica
valoarea atributului high ca fiind numărul 80.
Se va obține că de la 80 (aceasta este valoarea
atributului high) până la 100 (valoarea
atributului max) avem zona valorilor
ridicate.
Temperatura normală va fi de la 20
(aceasta este valoarea atributului low) până la 80
(valoarea atributului high). Această zonă
o vom numi zona valorilor normale.
Acum, în funcție de zona în care
se încadrează valoarea atributului value,
bara va fi colorată în verde sau
galben. Verde va fi, dacă ne aflăm
în zona valorilor normale, iar galben
- dacă în zona valorilor ridicate sau scăzute.
Exemplu
Valoarea atributului value se încadrează în
zona valorilor scăzute:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor normale:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor ridicate:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Adăugarea atributului optimum
Atributul optimum definește valoarea
optimă. Pentru exemplul nostru, temperatura optimă
poate fi rece, normală
sau fierbinte - la alegerea dumneavoastră. Să presupunem
că specificați că temperatura optimă
este rece. Acum, în funcție de valoarea
atributului value (adică de temperatura curentă)
culoarea barei va fi verde,
galbenă sau roșie.
Dacă temperatura curentă se încadrează în zona temperaturilor optime (și am specificat că optimă este cea rece), atunci culoarea barei va fi verde. Dacă temperatura curentă se încadrează în intervalul adiacent cu cel optim (în cazul nostru aceasta este temperatura normală), atunci bara va deveni galbenă. Dacă însă temperatura curentă se încadrează într-un interval neadiacent cu cel optim (în cazul nostru aceasta este temperatura fierbinte), atunci bara va deveni roșie.
În mod similar se va întâmpla dacă temperatura optimă este specificată ca fiind fierbinte. În acest caz, dacă temperatura curentă se încadrează în zona temperaturilor fierbinți - bara va fi verde, dacă se încadrează în zona temperaturilor normale - galbenă, dacă în zona temperaturilor reci - roșie.
Dacă temperatura optimă este specificată ca fiind normală, atunci bara poate fi doar verde (dacă temperatura curentă se încadrează în cea normală) sau galbenă (dacă temperatura curentă se încadrează într-un interval adiacent cu cel normal, adică fierbinte sau rece).
Pentru a specifica care interval este optim,
trebuie să indicați ca valoare a atributului
optimum orice număr din acel interval.
În exemplele de mai jos valoarea atributului optimum
se încadrează în zona valorilor scăzute
(adică a temperaturilor reci).
Exemplu
Valoarea atributului value se încadrează în
zona valorilor scăzute:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor normale:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor ridicate:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
În exemplele de mai jos valoarea atributului optimum
se încadrează în zona valorilor ridicate
(adică a temperaturilor fierbinți).
Exemplu
Valoarea atributului value se încadrează în
zona valorilor scăzute:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor normale:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor ridicate:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
În exemplele de mai jos valoarea atributului optimum
se încadrează în zona valorilor normale
(adică a temperaturilor normale).
Exemplu
Valoarea atributului value se încadrează în
zona valorilor scăzute:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor normale:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exemplu
Valoarea atributului value se încadrează în
zona valorilor ridicate:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Browsere vechi
Browserele vechi nu vor putea afișa elementul meter
într-o formă atractivă și vor afișa în schimb
conținutul elementului în sine:
<meter value="10" min="0" max="100">Acest text va apărea în browserele vechi.</meter>
:
Atribute
Valoarea atributelor poate fi un număr fracționar sau negativ.
| Atribut | Descriere |
|---|---|
value |
Stabilește valoarea curentă. Atribut obligatoriu. |
min |
Specifică valoarea minimă posibilă. Valoare implicită: 0. |
max |
Specifică valoarea maximă posibilă. Valoare implicită: 1. |
low |
Specifică limita zonei valorilor scăzute. Valorile scăzute vor fi de la numărul din atributul
min până la numărul din atributul low.
|
high |
Specifică limita zonei valorilor ridicate. Valorile ridicate vor fi de la numărul din atributul
high până la numărul din atributul max.
|
optimum |
Definește zona valorilor optime. |
Vezi și
-
elementul
progress,
care creează o bară de progres.
