Tag meter
Tag meter se koristi za prikaz
određene vrednosti u lepo formatiranom obliku.
Izgled taga predstavlja delimično ili potpuno popunjenu traku. Traka može biti zelena, žuta ili crvena (boja trake zavisi od vrednosti atributa, o tome će biti reči dalje):
Tag meter treba koristiti, na
primer, u sledećoj situaciji: želite da
prikažete na ekranu trenutnu vrednost temperature,
pri čemu se temperatura može menjati od 0
do 100. Treba da navedete sledeće
atribute: atribut value treba da ukazuje na
trenutnu vrednost temperature, atribut min
- minimalnu moguću vrednost (u našem
slučaju 0), atribut max - maksimalnu
moguću (u našem slučaju 100).
U zavisnosti od vrednosti atributa value
traka će biti mala ili velika. Ako
navedete value u vrednosti 10,
traka će biti mala (jer je 10
veoma blizu minimumu - nuli), ako pak
navedete vrednost 90, traka će biti
velika (jer je 90 blizu maksimumu
- 100). Ako navedete vrednost 100 -
traka će zauzeti ceo element (jer je vrednost
dostigla maksimum).
Ako navedete vrednost, veću od 100,
traka će svejedno zauzeti ceo element.
Ako pak navedete 0 ili manje - trake
uopšte neće biti.
Primer
Vrednost atributa value je mala:
<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 srednja:
<meter value="50" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je jednaka maksimalnoj:
<meter value="100" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je jednaka minimalnoj:
<meter value="0" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je veća od maksimalne:
<meter value="110" min="0" max="100"></meter>
:
Primer
Vrednost atributa value je manja od minimalne:
<meter value="-10" min="0" max="100"></meter>
:
Dodavanje atributa low i high
U tagu meter postoje još 2 atributa:
low i high.
Pogledajmo njihov rad na primeru temperature.
Podsećam, naša minimalna temperatura
jednaka je 0, a maksimalna - 100.
Neka sada želimo da napravimo sledeće opsege
- "hladna temperatura" od 0 do 20,
"normalna" od 20 do 80 i
"vruća" od 80 do 100.
Da bismo postavili hladnu temperaturu, navedimo
vrednost atributa low broj 20.
Ispostaviće se da od nule (to je vrednost atributa
min) do 20 (vrednost atributa
low) imamo oblast niskih vrednosti.
Da bismo postavili vruću temperaturu, navedimo
vrednost atributa high broj 80.
Ispostaviće se da od 80 (to je vrednost
atributa high) do 100 (vrednost
atributa max) imamo oblast visokih
vrednosti.
Normalna temperatura biće od 20
(to je vrednost atributa low) do 80
(vrednost atributa high). Ovu oblast
nazovimo oblast normalnih vrednosti.
Sada, u zavisnosti od toga u koju oblast
upada vrednost atributa value,
traka će biti obojena u zelenu ili
žutu boju. Zelena će biti, ako upadnemo
u oblast normalnih vrednosti, a žuta
- ako u oblast visokih ili niskih vrednosti.
Primer
Vrednost atributa value upada u
oblast niskih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Primer
Vrednost atributa value upada u
oblast normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Primer
Vrednost atributa value upada u
oblast visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Dodavanje atributa optimum
Atribut optimum definiše optimalnu
vrednost. Za naš primer optimalna
može biti hladna temperatura, normalna
ili vruća - po vašem izboru. Pretpostavimo,
da navedete da je optimalna temperatura
hladna. Sada, u zavisnosti od vrednosti
atributa value (odnosno od trenutne
temperature) boja trake će biti zelena,
žuta ili crvena.
Ako trenutna temperatura upada u oblast optimalnih temperatura (a mi smo naveli da je optimalna - hladna), onda će boja trake biti zelena. Ako trenutna temperatura upada u susedni sa optimalnim domet (u našem slučaju to je normalna temperatura), traka će postati žuta. Ako pak trenutna temperatura upada ne u susedni sa optimalnim domet (u našem slučaju to je vruća temperatura), traka će postati crvena.
Na sličan način će sve biti, ako optimalnom temperaturom naznačimo vruću. U ovom slučaju, ako trenutna temperatura upadne u oblast vrućih temperatura - traka će biti zelena, ako upadne u oblast normalnih - žuta, ako u oblast hladnih - crvena.
Ako optimalnom naznačimo normalnu temperaturu, traka može biti samo zelena (ako trenutna temperatura upadne u normalnu) ili žuta (ako trenutna temperatura upadne u suseda normalne temperature, a to su vruća ili hladna).
Da bismo naveli, koji domet je optimalan,
treba navesti kao vrednost atributa
optimum bilo koji broj iz tog dometa.
U primerima ispod vrednost atributa optimum
upada u oblast niskih vrednosti
(odnosno hladnih temperatura).
Primer
Vrednost atributa value upada u
oblast niskih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Primer
Vrednost atributa value upada u
oblast normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Primer
Vrednost atributa value upada u
oblast visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
U primerima ispod vrednost atributa optimum
upada u oblast visokih vrednosti
(odnosno vrućih temperatura).
Primer
Vrednost atributa value upada u
oblast niskih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Primer
Vrednost atributa value upada u
oblast normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Primer
Vrednost atributa value upada u
oblast visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
U primerima ispod vrednost atributa optimum
upada u oblast normalnih vrednosti
(odnosno normalnih temperatura).
Primer
Vrednost atributa value upada u
oblast niskih vrednosti:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Primer
Vrednost atributa value upada u
oblast normalnih vrednosti:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Primer
Vrednost atributa value upada u
oblast visokih vrednosti:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Stari brauzeri
Stari brauzeri neće moći da prikažu tag meter
u lepom obliku i ispisaće umesto toga
sadržaj samog taga:
<meter value="10" min="0" max="100">Ovaj tekst će se videti u starim brauzerima.</meter>
:
Atributi
Vrednost atributa može biti razlomak i negativan broj.
| Atribut | Opis |
|---|---|
value |
Postavlja trenutnu vrednost. Obavezni atribut. |
min |
Određuje minimalnu moguću vrednost. Podrazumevana vrednost: 0. |
max |
Određuje maksimalnu moguću vrednost. Podrazumevana vrednost: 1. |
low |
Određuje granicu oblasti niskih vrednosti. Niske vrednosti će biti od broja u atributu
min do broja u atributu low.
|
high |
Određuje granicu oblasti niskih vrednosti. Niske vrednosti će biti od broja u atributu
high do broja u atributu max.
|
optimum |
Definiše oblast optimalnih vrednosti. |
Videti još
-
tag
progress,
koji kreira traku za učitavanje.