Die meter-tag
Die etiket meter word gebruik om
'n sekere waarde op 'n mooi geformateerde manier uit te voer.
Die voorkoms van die etiket is 'n gedeeltelik of volledig gevulde strook. Die strook kan groen, geel of rooi wees (die kleur van die strook hang af van die kenmerkwaardes, daaroor sal hieronder meer wees):
Die etiket meter moet byvoorbeeld gebruik word in
die volgende situasie: jy wil
die huidige temperatuurwaarde op die skerm vertoon,
terwyl die temperatuur kan wissel van 0
tot 100. Jy moet die volgende
kenmerke spesifiseer: die kenmerk value moet die
huidige temperatuurwaarde aandui, die kenmerk min
- die minimum moontlike waarde (in ons
geval 0), die kenmerk max - die maksimum
moontlike (in ons geval 100).
Afhangende van die waarde van die kenmerk value
sal die strook klein of groot wees. As
jy value op die waarde 10 stel,
sal die strook klein wees (aangesien 10
baie naby aan die minimum - nul is), maar as
jy die waarde 90 spesifiseer, sal die strook
groot wees (aangesien 90 naby aan die maksimum
- 100 is). As jy die waarde 100 spesifiseer - dan
sal die strook die hele element vul (aangesien die waarde
die maksimum bereik het).
As jy 'n waarde spesifiseer wat groter as 100 is,
sal die strook steeds die hele element vul.
As jy egter 0 of minder spesifiseer - sal daar
glad nie 'n strook wees nie.
Voorbeeld
Die kenmerkwaarde value is klein:
<meter value="10" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is groot:
<meter value="90" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is gemiddeld:
<meter value="50" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is gelyk aan die maksimum:
<meter value="100" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is gelyk aan die minimum:
<meter value="0" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is groter as die maksimum:
<meter value="110" min="0" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value is kleiner as die minimum:
<meter value="-10" min="0" max="100"></meter>
:
Voeg die low- en high-kenmerke by
In die etiket meter is daar nog 2 kenmerke:
low en high.
Laat ons hul werking aan die hand van die temperatuurvoorbeeld beskou.
Onthou, ons minimum temperatuur
is gelyk aan 0, en die maksimum - 100.
Laat ons nou aanneem dat ons die volgende reekse wil hê
- "koue temperatuur" van 0 tot 20,
"normaal" van 20 tot 80 en
"warm" van 80 tot 100.
Om die koue temperatuur te spesifiseer, stel ons
die kenmerkwaarde low op die getal 20.
Dan sal dit wees dat vanaf nul (dit is die kenmerkwaarde
min) tot 20 (die kenmerkwaarde
low) ons 'n area van lae waardes het.
Om die warm temperatuur te spesifiseer, stel ons
die kenmerkwaarde high op die getal 80.
Dan sal dit wees dat vanaf 80 (dit is die waarde
van die kenmerk high) tot 100 (die waarde
van die kenmerk max) ons 'n area van hoë
waardes het.
Normale temperatuur sal van 20
(dit is die kenmerkwaarde low) tot 80
(die kenmerkwaarde high) wees. Hierdie area
noem ons die area van normale waardes.
Nou, afhangende van in watter area
die kenmerkwaarde value val,
sal die strook in groen of
geel kleur gekleur word. Groen sal wees as ons in
die area van normale waardes val, en geel
- as in die area van hoë of lae waardes.
Voorbeeld
Die kenmerkwaarde value val in die
area van lae waardes:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van normale waardes:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van hoë waardes:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Voeg die optimum-kenmerk by
Die kenmerk optimum definieer die optimale
waarde. Vir ons voorbeeld kan die optimale
wees koue temperatuur, normale
of warm - volgens jou keuse. Kom ons neem aan,
dat jy spesifiseer dat die optimale temperatuur
kou is. Nou, afhangende van die waarde
van die kenmerk value (dit is die huidige
temperatuur) sal die kleur van die strook groen,
geel of rooi wees.
As die huidige temperatuur in die area van optimale temperature val (en ons het gespesifiseer dat die optimale - koue is), dan sal die kleur van die strook groen wees. As die huidige temperatuur in die aangrensende gebied met die optimale reeks val (in ons geval is dit normale temperatuur), sal die strook geel word. As die huidige temperatuur egter in 'n nie-aangrensende gebied met die optimale reeks val (in ons geval is dit warm temperatuur), dan sal die strook rooi word.
Op 'n soortgelyke manier sal alles gebeur, as ons die optimale temperatuur as warm spesifiseer. In hierdie geval, as die huidige temperatuur in die area van warm temperature val - sal die strook groen wees, as dit in die area van normale val - geel, as in die area van koue - rooi.
As ons die optimale as normale temperatuur spesifiseer, kan die strook slegs groen wees (as die huidige temperatuur in die normale val) of geel (as die huidige temperatuur in die buur van die normale temperatuur val, en dit is warm of koud).
Om aan te dui watter reeks optimaal is,
moet jy as die kenmerkwaarde
optimum enige getal uit daardie reeks spesifiseer.
In die voorbeelde hieronder val die kenmerkwaarde optimum
in die area van lae waardes
(dit is koue temperature).
Voorbeeld
Die kenmerkwaarde value val in die
area van lae waardes:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van normale waardes:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van hoë waardes:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
In die voorbeelde hieronder val die kenmerkwaarde optimum
in die area van hoë waardes
(dit is warm temperature).
Voorbeeld
Die kenmerkwaarde value val in die
area van lae waardes:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van normale waardes:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van hoë waardes:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
In die voorbeelde hieronder val die kenmerkwaarde optimum
in die area van normale waardes
(dit is normale temperature).
Voorbeeld
Die kenmerkwaarde value val in die
area van lae waardes:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van normale waardes:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Voorbeeld
Die kenmerkwaarde value val in die
area van hoë waardes:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Ou blaaier
Ou blaaiers sal nie die etiket meter
in 'n mooi vorm kan wys nie en sal in plaas daarvan
die inhoud van die etiket self vertoon:
<meter value="10" min="0" max="100">Hierdie teks sal in ou blaaiers verskyn.</meter>
:
Kenmerke
Die waarde van kenmerke kan 'n breukwaarde of negatiewe getal wees.
| Kenmerk | Beskrywing |
|---|---|
value |
Stel die huidige waarde. Verpligte kenmerk. |
min |
Spesifiseer die minimum moontlike waarde. Verstekwaarde: 0. |
max |
Spesifiseer die maksimum moontlike waarde. Verstekwaarde: 1. |
low |
Spesifiseer die grens van die area van lae waardes. Lae waardes sal wees vanaf die getal in die kenmerk
min tot die getal in die kenmerk low.
|
high |
Spesifiseer die grens van die area van hoë waardes. Hoë waardes sal wees vanaf die getal in die kenmerk
high tot die getal in die kenmerk max.
|
optimum |
Definieer die area van optimale waardes. |
Sien ook
-
die etiket
progress,
wat 'n laaibalk skep.