Sildi meter
Silti meter kasutatakse
mõne väärtuse kuvamiseks kaunistatud kujul.
Sildi välimus kujutab endast osaliselt või täielikult täidetud riba. Riba võib olla roheline, kollane või punane (riba värv sõltub atribuutide väärtustest, sellest allpool):
Silti meter tuleks kasutada näiteks
järgmises olukorras: soovite kuvada ekraanil
käesolevat temperatuuri väärtust,
samas kui temperatuur võib muutuda 0
kuni 100. Te peaksite määrama järgmised
atribuudid: atribuut value peaks näitama
käesolevat temperatuuri väärtust, atribuut min
- minimaalset võimalikku väärtust (meie
juhul 0), atribuut max - maksimaalset
võimalikku väärtust (meie juhul 100).
Sõltuvalt atribuudi value väärtusest
on riba väike või suur. Kui
määrata value väärtuseks 10,
siis on riba väike (kuna 10
on väga lähedal miinimumile - nullile), kui aga
määrata väärtuseks 90, siis on riba
suur (kuna 90 on lähedal maksimumile
- 100-le). Kui määrata väärtuseks 100, siis
riba hõivab kogu elemendi (kuna väärtus
jõudis maksimumini).
Kui määrata väärtus, mis on suurem kui 100,
siis hõivab riba ikkagi kogu elemendi.
Kui aga määrata 0 või vähem, siis riba
ei ole üldse.
Näide
Atribuudi value väärtus on väike:
<meter value="10" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on suur:
<meter value="90" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on keskmine:
<meter value="50" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on võrdne maksimaalsega:
<meter value="100" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on võrdne minimaalsega:
<meter value="0" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on suurem kui maksimaalne:
<meter value="110" min="0" max="100"></meter>
:
Näide
Atribuudi value väärtus on väiksem kui minimaalne:
<meter value="-10" min="0" max="100"></meter>
:
Atribuutide low ja high lisamine
Sildil meter on veel 2 atribuuti:
low ja high.
Vaatleme nende toimimist temperatuuri näitel.
Tuletan meelde, et meie minimaalne temperatuur
on 0 ja maksimaalne - 100.
Olgu nüüd, et tahame teha järgmised vahemikud
- "külm temperatuur" alates 0 kuni 20,
"normaalne" alates 20 kuni 80 ja
"kuum" alates 80 kuni 100.
Külma temperatuuri määramiseks määrame
atribuudi low väärtuseks arvu 20.
Selgub, et nullist (see on atribuudi
min väärtus) kuni 20 (atribuudi
low väärtus) on meil madalate väärtuste piirkond.
Kuuma temperatuuri määramiseks määrame
atribuudi high väärtuseks arvu 80.
Selgub, et alates 80 (see on atribuudi
high väärtus) kuni 100 (atribuudi
max väärtus) on meil kõrgete
väärtuste piirkond.
Normaaltemperatuur on alates 20
(see on atribuudi low väärtus) kuni 80
(atribuudi high väärtus). Seda piirkonda
nimetatakse normaalsete väärtuste piirkonnaks.
Nüüd, sõltuvalt sellest, millisesse piirkonda
atribuudi value väärtus langeb,
kaetakse riba rohelise või
kollase värviga. Roheline on siis, kui me satume
normaalsete väärtuste piirkonda, ja kollane
- kui kõrgete või madalate väärtuste piirkonda.
Näide
Atribuudi value väärtus langeb
madalate väärtuste piirkonda:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Näide
Atribuudi value väärtus langeb
normaalsete väärtuste piirkonda:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Näide
Atribuudi value väärtus langeb
kõrgete väärtuste piirkonda:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Atribuudi optimum lisamine
Atribuut optimum määratleb optimaalse
väärtuse. Meie näites võib optimaalseks
olla külm temperatuur, normaalne
või kuum - teie valiku järgi. Oletame,
et määrate, et optimaalne temperatuur
on külm. Nüüd sõltuvalt atribuudi
value väärtusest (see tähendab käesolevast
temperatuurist) on riba värv roheline,
kollane või punane.
Kui käesolev temperatuur langeb optimaalsete temperatuuride piirkonda (ja me määrasime, et optimaalne on külm), siis on riba värv roheline. Kui käesolev temperatuur langeb optimaalsega kõrvuti asuvasse vahemikku (meie juhul on see normaaltemperatuur), muutub riba kollaseks. Kui aga käesolev temperatuur ei lange optimaalsega kõrvuti asuvasse vahemikku (meie juhul on see kuum temperatuur), siis muutub riba punaseks.
Samamoodi kõik toimub, kui optimaalseks temperatuuriks määrata kuum. Sel juhul, kui käesolev temperatuur langeb kuumade temperatuuride piirkonda - on riba roheline, kui langeb normaalsete temperatuuride piirkonda - kollane, kui külmade temperatuuride piirkonda - punane.
Kui optimaalseks määrata normaaltemperatuur, siis võib riba olla ainult roheline (kui käesolev temperatuur langes normaalsesse) või kollane (kui käesolev temperatuur langes normaalse naabrusse, see on kuum või külm).
Et määrata, milline vahemik on optimaalne,
tuleb atribuudi
optimum väärtuseks määrata suvaline arv sellest vahemikust.
Allpool olevates näidetes langeb atribuudi optimum väärtus
madalate väärtuste piirkonda
(see tähendab külmade temperatuuride).
Näide
Atribuudi value väärtus langeb
madalate väärtuste piirkonda:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Näide
Atribuudi value väärtus langeb
normaalsete väärtuste piirkonda:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Näide
Atribuudi value väärtus langeb
kõrgete väärtuste piirkonda:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Allpool olevates näidetes langeb atribuudi optimum väärtus
kõrgete väärtuste piirkonda
(see tähendab kuumade temperatuuride).
Näide
Atribuudi value väärtus langeb
madalate väärtuste piirkonda:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Näide
Atribuudi value väärtus langeb
normaalsete väärtuste piirkonda:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Näide
Atribuudi value väärtus langeb
kõrgete väärtuste piirkonda:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Allpool olevates näidetes langeb atribuudi optimum väärtus
normaalsete väärtuste piirkonda
(see tähendab normaalsete temperatuuride).
Näide
Atribuudi value väärtus langeb
madalate väärtuste piirkonda:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Näide
Atribuudi value väärtus langeb
normaalsete väärtuste piirkonda:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Näide
Atribuudi value väärtus langeb
kõrgete väärtuste piirkonda:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Vana brauserid
Vanad brauserid ei suuda kuvada silti meter
kaunistatud kujul ja kuvavad selle asemel
sildi enda sisu:
<meter value="10" min="0" max="100">See tekst kuvatakse vanades brauserites.</meter>
:
Atribuudid
Atribuutide väärtused võivad olla murd- ja negatiivsed arvud.
| Atribuut | Kirjeldus |
|---|---|
value |
Määrab käesoleva väärtuse. Kohustuslik atribuut. |
min |
Määrab minimaalse võimaliku väärtuse. Vaikeväärtus: 0. |
max |
Määrab maksimaalse võimaliku väärtuse. Vaikeväärtus: 1. |
low |
Määrab madalate väärtuste piirkonna piiri. Madalad väärtused on alates arvust atribuudis
min kuni arvuni atribuudis low.
|
high |
Määrab kõrgete väärtuste piirkonna piiri. Kõrged väärtused on alates arvust atribuudis
high kuni arvuni atribuudis max.
|
optimum |
Määratleb optimaalsete väärtuste piirkonna. |
Vaata ka
-
silt
progress,
mis loob laadimisriba.