Oznaka meter
Oznaka meter se uporablja za prikaz
določene vrednosti v lepo oblikovani obliki.
Zunanji vidik oznake predstavlja delno ali popolnoma zapolnjen trak. Trak je lahko zelen, rumen ali rdeč (barva traka je odvisna od vrednosti atributov, o tem bo več naprej):
Oznako meter je priporočljivo uporabiti, na
primer, v naslednji situaciji: želite
prikazati na zaslon trenutno vrednost temperature,
pri čemer se temperatura lahko spreminja od 0
do 100. Določiti morate naslednje
atribute: atribut value naj določa
trenutno vrednost temperature, atribut min
- najmanjšo možno vrednost (v našem
primeru 0), atribut max - največjo možno (v našem primeru 100).
Glede na vrednost atributa value
bo trak majhen ali velik. Če
nastavite value na vrednost 10,
bo trak majhen (ker je 10
zelo blizu minimumu - ničli), če pa
nastavite vrednost 90, bo trak
velik (ker je 90 blizu maksimumu
- 100). Če nastavite vrednost 100 - bo
trak zapolnil celoten element (ker je vrednost
dosegla maksimum).
Če nastavite vrednost, večjo od 100,
bo trak vseeno zapolnil celoten element.
Če pa nastavite 0 ali manj - trak
sploh ne bo prikazan.
Primer
Vrednost atributa value je majhna:
<meter value="10" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je velika:
<meter value="90" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je povprečna:
<meter value="50" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je enaka maksimalni:
<meter value="100" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je enaka minimalni:
<meter value="0" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je večja od maksimalne:
<meter value="110" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je manjša od minimalne:
<meter value="-10" min="0" max="100"></meter>
:
Dodajanje atributov low in high
Oznaka meter ima še 2 atributa:
low in high.
Oglejmo si njihovo delovanje na primeru temperature.
Spomnimo se, da je naša minimalna temperatura
enaaka 0, maksimalna pa 100.
Naj bodo zdaj naslednja območja
- "hladna temperatura" od 0 do 20,
"normalna" od 20 do 80 in
"vroča" od 80 do 100.
Za določitev hladne temperature nastavimo
vrednost atributa low na število 20.
Tako bo od nič (to je vrednost atributa
min) do 20 (vrednost atributa
low) območje nizkih vrednosti.
Za določitev vroče temperature nastavimo
vrednost atributa high na število 80.
Tako bo od 80 (to je vrednost
atributa high) do 100 (vrednost
atributa max) območje visokih
vrednosti.
Normalna temperatura bo od 20
(to je vrednost atributa low) do 80
(vrednost atributa high). To območje
imenujemo območje normalnih vrednosti.
Zdaj, glede na to, v katero območje
pade vrednost atributa value,
bo trak obarvan zeleno ali
rumeno. Zelen bo, če pademo
v območje normalnih vrednosti, rumen
pa - če v območje visokih ali nizkih vrednosti.
Primer
Vrednost atributa value pade v
območje nizkih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Primer
Vrednost atributa value pade v
območje normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Primer
Vrednost atributa value pade v
območje visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Dodajanje atributa optimum
Atribut optimum določa optimalno
vrednost. Za naš primer je lahko optimalna
hladna temperatura, normalna
ali vroča - po vaši izbiri. Predpostavimo,
da določite, da je optimalna temperatura
hladna. Zdaj, glede na vrednost
atributa value (torej trenutne
temperature) bo barva traku zelena,
rumena ali rdeča.
Če trenutna temperatura pade v območje optimalnih temperatur (mi smo določili, da je optimalna - hladna), bo barva traku zelena. Če trenutna temperatura pade v sosednji optimalnemu območju (v našem primeru je to normalna temperatura), bo trak rumen. Če pa trenutna temperatura pade ne v sosednji optimalnemu območju (v našem primeru je to vroča temperatura), bo trak rdeč.
Podobno se bo vse odvijalo, če optimalno temperaturo določimo za vročo. V tem primeru, če trenutna temperatura pade v območje vročih temperatur - bo trak zelen, če pade v območje normalnih - rumen, če v območje hladnih - rdeč.
Če optimalno določimo normalno temperaturo, je lahko trak le zelen (če trenutna temperatura pade v normalno) ali rumen (če trenutna temperatura pade v soseda normalne temperature, to sta vroča ali hladna).
Za določitev, katero območje je optimalno,
je potrebno nastaviti kot vrednost atributa
optimum poljubno število iz tega območja.
V spodnjih primerih vrednost atributa optimum
pade v območje nizkih vrednosti
(torej hladnih temperatur).
Primer
Vrednost atributa value pade v
območje nizkih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Primer
Vrednost atributa value pade v
območje normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Primer
Vrednost atributa value pade v
območje visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
V spodnjih primerih vrednost atributa optimum
pade v območje visokih vrednosti
(torej vročih temperatur).
Primer
Vrednost atributa value pade v
območje nizkih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Primer
Vrednost atributa value pade v
območje normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Primer
Vrednost atributa value pade v
območje visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
V spodnjih primerih vrednost atributa optimum
pade v območje normalnih vrednosti
(torej normalnih temperatur).
Primer
Vrednost atributa value pade v
območje nizkih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Primer
Vrednost atributa value pade v
območje normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Primer
Vrednost atributa value pade v
območje visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Stari brskalniki
Stari brskalniki ne morejo prikazati oznake meter
v lepi obliki in bodo namesto tega prikazali
vsebino oznake:
<meter value="10" min="0" max="100">To besedilo bo prikazano v starih brskalnikih.</meter>
:
Atributi
Vrednost atributov je lahko decimalno in negativno število.
| Atribut | Opis |
|---|---|
value |
Nastavi trenutno vrednost. Obvezen atribut. |
min |
Določi najmanjšo možno vrednost. Privzeta vrednost: 0. |
max |
Določi največjo možno vrednost. Privzeta vrednost: 1. |
low |
Določi mejo območja nizkih vrednosti. Nizke vrednosti bodo od števila v atributu
min do števila v atributu low.
|
high |
Določi mejo območja nizkih vrednosti. Nizke vrednosti bodo od števila v atributu
high do števila v atributu max.
|
optimum |
Določa območje optimalnih vrednosti. |
Glej tudi
-
oznako
progress,
ki ustvari vrstico napredka.