Meter-elementti
Elementtiä meter käytetään
jonkin arvon näyttämiseen kauniisti muotoiltuna.
Elementin ulkoasu on osittain tai kokonaan täytetty palkki. Palkki voi olla vihreä, keltainen tai punainen (väri riippuu attribuuttien arvoista, siitä lisää myöhemmin):
Elementtiä meter tulisi käyttää esimerkiksi
seuraavassa tilanteessa: haluat näyttää
nykyisen lämpötilan,
kun lämpötila voi vaihdella 0
asteesta 100 asteeseen. Sinun tulee määrittää seuraavat
attribuutit: attribuutin value tulee osoittaa
nykyinen lämpötila, attribuutin min
- minimiarvo (meidän
tapauksessamme 0), attribuutin max - maksimiarvo
(meidän tapauksessamme 100).
Attribuutin value arvosta riippuen
palkki on pieni tai suuri. Jos
value on asetettu arvoon 10,
palkki on pieni (koska 10
on hyvin lähellä minimiä - nollaa), jos
arvo on 90, palkki on
suuri (koska 90 on lähellä maksimia
- 100). Jos arvo on 100 -
palkki täyttää koko elementin (koska arvo
on saavuttanut maksimin).
Jos määrität arvon, joka on suurempi kuin 100,
palkki täyttää silti koko elementin.
Jos määrität 0 tai vähemmän - palkkia
ei näy ollenkaan.
Esimerkki
Attribuutin value arvo on pieni:
<meter value="10" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on suuri:
<meter value="90" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on keskisuuri:
<meter value="50" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on yhtä suuri kuin maksimi:
<meter value="100" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on yhtä suuri kuin minimi:
<meter value="0" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on suurempi kuin maksimi:
<meter value="110" min="0" max="100"></meter>
:
Esimerkki
Attribuutin value arvo on pienempi kuin minimi:
<meter value="-10" min="0" max="100"></meter>
:
Low- ja high-attribuuttien lisääminen
Elementissä meter on vielä 2 attribuuttia:
low ja high.
Tarkastellaan niiden toimintaa lämpötilan esimerkillä.
Muistutan, että meidän minimilämpötilamme
on 0 ja maksimi - 100.
Tehdään nyt seuraavat alueet
- "kylmä lämpötila" 0:sta 20:een,
"normaali" 20:sta 80:een ja
"kuuma" 80:sta 100:een.
Määrittääksemme kylmän lämpötilan, asetamme
attribuutin low arvoksi luvun 20.
Saadaan, että nollasta (tämä on attribuutin
min arvo) 20:een (attribuutin
low arvo) on matalien arvojen alue.
Määrittääksemme kuuman lämpötilan, asetamme
attribuutin high arvoksi luvun 80.
Saadaan, että 80:sta (tämä on attribuutin
high arvo) 100:een (attribuutin
max arvo) on korkeiden arvojen
alue.
Normaali lämpötila on 20:sta
(tämä on attribuutin low arvo) 80:een
(attribuutin high arvo). Tätä aluetta
kutsutaan normaalien arvojen alueeksi.
Nyt, riippuen siitä, mihin alueeseen
attribuutin value arvo osuu,
palkki värjätään vihreäksi tai
keltaiseksi. Vihreä tulee, jos osutaan
normaalien arvojen alueeseen, ja keltainen
- jos korkeiden tai matalien arvojen alueeseen.
Esimerkki
Attribuutin value arvo osuu
matalien arvojen alueeseen:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Esimerkki
Attribuutin value arvo osuu
normaalien arvojen alueeseen:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Esimerkki
Attribuutin value arvo osuu
korkeiden arvojen alueeseen:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Optimum-attribuutin lisääminen
Attribuutti optimum määrittää optimaalisen
arvon. Esimerkissämme optimaalinen
voi olla kylmä lämpötila, normaali
tai kuuma - valintasi mukaan. Oletetaan,
että määrität, että optimaalinen lämpötila
on kylmä. Nyt attribuutin value arvosta
(eli nykyisestä lämpötilasta) riippuen palkin väri on vihreä,
keltainen tai punainen.
Jos nykyinen lämpötila osuu optimaalisten lämpötilojen alueelle (ja määritimme, että optimaalinen on kylmä), palkin väri on vihreä. Jos nykyinen lämpötila osuu optimaalin viereiseen alueeseen (meidän tapauksessamme tämä on normaali lämpötila), palkki muuttuu keltaiseksi. Jos nykyinen lämpötila osuu ei-viereiseen alueeseen optimaaliin verrattuna (meidän tapauksessamme tämä on kuuma lämpötila), palkki muuttuu punaiseksi.
Vastaavasti kaikki tapahtuu, jos optimaalisena lämpötilana määritetään kuuma. Tässä tapauksessa, jos nykyinen lämpötila osuu kuumien lämpötilojen alueelle - palkki on vihreä, jos osuu normaalien lämpötilojen alueelle - keltainen, jos kylmien lämpötilojen alueelle - punainen.
Jos optimaalisena määritetään normaali lämpötila, palkki voi olla vain vihreä (jos nykyinen lämpötila osuu normaalialueelle) tai keltainen (jos nykyinen lämpötila osuu normaalin lämpötilan viereiseen alueeseen, joka on kuuma tai kylmä).
Määrittääksesi, mikä alue on optimaalinen,
tulee asettaa attribuutin
optimum arvoksi mikä tahansa luku kyseiseltä alueelta.
Alla olevissa esimerkeissä attribuutin optimum arvo
osuu matalien arvojen alueeseen
(eli kylmiin lämpötiloihin).
Esimerkki
Attribuutin value arvo osuu
matalien arvojen alueeseen:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Esimerkki
Attribuutin value arvo osuu
normaalien arvojen alueeseen:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Esimerkki
Attribuutin value arvo osuu
korkeiden arvojen alueeseen:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Alla olevissa esimerkeissä attribuutin optimum arvo
osuu korkeiden arvojen alueeseen
(eli kuumiin lämpötiloihin).
Esimerkki
Attribuutin value arvo osuu
matalien arvojen alueeseen:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Esimerkki
Attribuutin value arvo osuu
normaalien arvojen alueeseen:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Esimerkki
Attribuutin value arvo osuu
korkeiden arvojen alueeseen:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Alla olevissa esimerkeissä attribuutin optimum arvo
osuu normaalien arvojen alueeseen
(eli normaaleihin lämpötiloihin).
Esimerkki
Attribuutin value arvo osuu
matalien arvojen alueeseen:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Esimerkki
Attribuutin value arvo osuu
normaalien arvojen alueeseen:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Esimerkki
Attribuutin value arvo osuu
korkeiden arvojen alueeseen:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Vanhat selaimet
Vanhat selaimet eivät pysty näyttämään elementtiä meter
kauniisti ja näyttävät sen sijaan
elementin sisällön:
<meter value="10" min="0" max="100">Tämä teksti näkyy vanhoissa selaimissa.</meter>
:
Attribuutit
Attribuuttien arvo voi olla desimaaliluku tai negatiivinen luku.
| Attribuutti | Kuvaus |
|---|---|
value |
Asettaa nykyisen arvon. Pakollinen attribuutti. |
min |
Asettaa pienimmän mahdollisen arvon. Oletusarvo: 0. |
max |
Asettaa suurimman mahdollisen arvon. Oletusarvo: 1. |
low |
Asettaa matalien arvojen alueen rajan. Matalat arvot ovat attribuutin
min arvosta attribuutin low arvoon.
|
high |
Asettaa korkeiden arvojen alueen rajan. Korkeat arvot ovat attribuutin
high arvosta attribuutin max arvoon.
|
optimum |
Määrittää optimaalisten arvojen alueen. |
Katso myös
-
elementti
progress,
joka luo latauspalkin.