Žymė meter
Žymė meter naudojama
tam, kad būtų rodoma tam tikra reikšmė gražiai suformuotu pavidalu.
Žymės išorinis pavidalas yra iš dalies arba visiškai užpildyta juostelė. Juostelė gali būti žalia, geltona arba raudona (spalva priklauso nuo atributų reikšmių, apie tai bus kalbama toliau):
Žymė meter turėtų būti naudojama, pavyzdžiui,
šioje situacijoje: norite
rodyti ekrane dabartinę temperatūros reikšmę,
o temperatūra gali kisti nuo 0
iki 100. Turėtumėte nurodyti šiuos
atributus: atributas value turi nurodyti
dabartinę temperatūros reikšmę, atributas min
- mažiausią įmanomą reikšmę (mūsų
atveju 0), atributas max - didžiausią įmanomą (mūsų atveju 100).
Priklausomai nuo atributo value reikšmės
juostelė bus maža arba didelė. Jei
nurodysite value reikšmę 10,
juostelė bus maža (nes 10
labai arti minimumo - nuliui), jei
nurodysite reikšmę 90, tuomet juostelė bus
didelė (nes 90 arti maksimumo
- 100). Jei nurodysite reikšmę 100 - tuomet
juostelė užims visą elementą (nes reikšmė
pasiekė maksimumą).
Jei nurodysite reikšmę, didesnę nei 100,
juostelė vis tiek užims visą elementą.
Jei nurodysite 0 ar mažiau - juostelės
nebus visai.
Pavyzdys
Atributo value reikšmė maža:
<meter value="10" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė didelė:
<meter value="90" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė vidutinė:
<meter value="50" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė lygi maksimaliajai:
<meter value="100" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė lygi minimaliajai:
<meter value="0" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė didesnė už maksimaliąją:
<meter value="110" min="0" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė mažesnė už minimaliąją:
<meter value="-10" min="0" max="100"></meter>
:
Pridedame atributus low ir high
Žymėje meter yra dar 2 atributai:
low ir high.
Panagrinėkime jų veikimą temperatūros pavyzdžiu.
Primenu, kad mūsų minimali temperatūra
yra 0, o maksimali - 100.
Tarkime, kad dabar norime sudaryti šiuos diapazonus
- "šalta temperatūra" nuo 0 iki 20,
"normalioji" nuo 20 iki 80 ir
"karšta" nuo 80 iki 100.
Kad nustatytumėme šaltą temperatūrą, nurodysime
atributo low reikšmę skaičių 20.
Taip bus, kad nuo nulio (tai atributo
min reikšmė) iki 20 (atributo
low reikšmė) mes turime žemų reikšmių sritį.
Kad nustatytumėme karštą temperatūrą, nurodysime
atributo high reikšmę skaičių 80.
Taip bus, kad nuo 80 (tai atributo
high reikšmė) iki 100 (atributo
max reikšmė) mes turime aukštų reikšmių sritį.
Normalioji temperatūra bus nuo 20
(tai atributo low reikšmė) iki 80
(atributo high reikšmė). Šią sritį
pavadinkime normalaus diapazono reikšmių sritimi.
Dabar, priklausomai nuo to, į kurią sritį
pateks atributo value reikšmė,
juostelė bus nuspalvinta žalia arba
geltona spalva. Žalia bus, jei pateksime
į normalaus diapazono reikšmių sritį, o geltona
- jei į aukštų arba žemų reikšmių sritį.
Pavyzdys
Atributo value reikšmė patenka į
žemų reikšmių sritį:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
normalaus diapazono reikšmių sritį:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
aukštų reikšmių sritį:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Pridedame atributą optimum
Atributas optimum nustato optimalią
reikšmę. Mūsų pavyzdyje optimali
gali būti šalta temperatūra, normalioji
arba karšta - priklauso nuo jūsų pasirinkimo. Tarkime,
kad nurodysite, kad optimali temperatūra
šalta. Dabar, priklausomai nuo atributo
value reikšmės (tai yra nuo dabartinės
temperatūros) juostelės spalva bus žalia,
geltona arba raudona.
Jei dabartinė temperatūra patenka į optimalių temperatūrų sritį (o mes nurodėme, kad optimali - šalta), tuomet juostelės spalva bus žalia. Jei dabartinė temperatūra patenka į gretimą su optimaliuoju diapazonu (mūsų atveju tai normalioji temperatūra), tuomet juostelė taps geltona. Jei dabartinė temperatūra patenka ne į gretimą su optimaliuoju diapazonu (mūsų atveju tai karšta temperatūra), tuomet juostelė taps raudona.
Analogiskai viskas vyks, jei optimaliąja temperatūra nurodysite karštą. Šiuo atveju, jei dabartinė temperatūra pateks į karštų temperatūrų sritį - juostelė bus žalia, jei pateks į normaliųjų - geltona, jei į šaltų - raudona.
Jei optimaliąja nurodysite normaliąją temperatūrą, tuomet juostelė gali būti tik žalia (jei dabartinė temperatūra pateko į normaliąją) arba geltona (jei dabartinė temperatūra pateko į gretimą su normaliąja temperatūra, o tai karšta arba šalta).
Kad nurodytumėte, kuris diapazonas yra optimalus,
reikia nurodyti kaip atributo
optimum reikšmę bet kurį skaičių iš šio diapazono.
Žemiau pateiktuose pavyzdžiuose atributo optimum reikšmė
patenka į žemų reikšmių sritį
(tai yra šaltų temperatūrų).
Pavyzdys
Atributo value reikšmė patenka į
žemų reikšmių sritį:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
normalaus diapazono reikšmių sritį:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
aukštų reikšmių sritį:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Žemiau pateiktuose pavyzdžiuose atributo optimum reikšmė
patenka į aukštų reikšmių sritį
(tai yra karštų temperatūrų).
Pavyzdys
Atributo value reikšmė patenka į
žemų reikšmių sritį:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
normalaus diapazono reikšmių sritį:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
aukštų reikšmių sritį:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Žemiau pateiktuose pavyzdžiuose atributo optimum reikšmė
patenka į normalaus diapazono reikšmių sritį
(tai yra normaliųjų temperatūrų).
Pavyzdys
Atributo value reikšmė patenka į
žemų reikšmių sritį:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
normalaus diapazono reikšmių sritį:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Pavyzdys
Atributo value reikšmė patenka į
aukštų reikšmių sritį:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Senos naršyklės
Senos naršyklės negalės parodyti žymės meter
gražiu pavidalu ir vietoje to
rodys pačios žymės turinį:
<meter value="10" min="0" max="100">Šis tekstas bus rodomas senose naršyklėse.</meter>
:
Atributai
Atributų reikšmės gali būti trupmeniniaia ir neigiamia skaičiais.
| Atributas | Aprašas |
|---|---|
value |
Nustato dabartinę reikšmę. Privalomas atributas. |
min |
Nustato mažiausią įmanomą reikšmę. Numatytoji reikšmė: 0. |
max |
Nustato didžiausią įmanomą reikšmę. Numatytoji reikšmė: 1. |
low |
Nustato žemų reikšmių srities ribą. Žemos reikšmės bus nuo skaičiaus atribute
min iki skaičiaus atribute low.
|
high |
Nustato aukštų reikšmių srities ribą. Aukštos reikšmės bus nuo skaičiaus atribute
high iki skaičiaus atribute max.
|
optimum |
Nustato optimalių reikšmių sritį. |
Taip pat žiūrėkite
-
žymę
progress,
kuri sukuria įkėlimo juostą.