Taggen meter
Taggen meter brukes til å vise
en viss verdi på en pent utformet måte.
Utseendet til taggen er en delvis eller fullstendig fylt stripe. Stripen kan være grønn, gul eller rød (fargen på stripen avhenger av attributtenes verdier, mer om dette nedenfor):
Taggen meter bør brukes, for
eksempel, i følgende situasjon: du ønsker
å vise på skjermen den nåværende temperaturen,
samtidig som temperaturen kan variere fra 0
til 100. Du bør angi følgende
attributter: attributtet value skal angi
nåværende temperaturverdi, attributtet min
- minimum mulig verdi (i vårt
tilfelle 0), attributtet max
- maksimum mulig (i vårt tilfelle 100).
Avhengig av verdien til attributtet value
vil stripen være liten eller stor. Hvis
du angir value med verdien 10,
vil stripen være liten (fordi 10
er veldig nær minimum - null), men hvis
du angir verdien 90, vil stripen være
stor (fordi 90 er nær maksimum
- 100). Hvis du angir verdien 100 - vil
stripen fylle hele elementet (fordi verdien
har nådd maksimum).
Hvis du angir en verdi større enn 100,
vil stripen likevel fylle hele elementet.
Hvis du derimot angir 0 eller mindre - vil det ikke
være noen stripe i det hele tatt.
Eksempel
Verdien til value-attributtet er liten:
<meter value="10" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er stor:
<meter value="90" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er middels:
<meter value="50" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er lik maksimalverdi:
<meter value="100" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er lik minimalverdi:
<meter value="0" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er større enn maksimalverdi:
<meter value="110" min="0" max="100"></meter>
:
Eksempel
Verdien til value-attributtet er mindre enn minimalverdi:
<meter value="-10" min="0" max="100"></meter>
:
Legger til attributtene low og high
I taggen meter er det 2 attributter til:
low og high.
La oss se på hvordan de fungerer ved hjelp av et temperatur eksempel.
Husk at vår minimumstemperatur
er 0, og maksimumstemperaturen er 100.
La oss nå si at vi ønsker å lage følgende områder
- "kald temperatur" fra 0 til 20,
"normal" fra 20 til 80 og
"varm" fra 80 til 100.
For å angi kald temperatur, setter vi
verdien til attributtet low til tallet 20.
Da vil det si at fra null (dette er verdien til attributtet
min) til 20 (verdien til attributtet
low) har vi lavverdi området.
For å angi varm temperatur, setter vi
verdien til attributtet high til tallet 80.
Da vil det si at fra 80 (dette er verdien
til attributtet high) til 100 (verdien
til attributtet max) har vi høyverdi
området.
Normal temperatur vil være fra 20
(dette er verdien til attributtet low) til 80
(verdien til attributtet high). Dette området
kaller vi normalverdi området.
Nå, avhengig av hvilket område
verdien til attributtet value faller inn i,
vil stripen farges grønn eller
gul. Den vil være grønn hvis vi faller inn
i normalverdi området, og gul
- hvis i høyverdi eller lavverdi området.
Eksempel
Verdien til attributtet value faller inn i
lavverdi området:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
normalverdi området:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
høyverdi området:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Legger til attributtet optimum
Attributtet optimum definerer den optimale
verdien. For vårt eksempel kan den optimale
være kald temperatur, normal
eller varm - etter ditt valg. La oss anta
at du angir at optimal temperatur er kald.
Nå, avhengig av verdien til attributtet
value (det vil si den nåværende
temperaturen) vil fargen på stripen være grønn,
gul eller rød.
Hvis den nåværende temperaturen faller innenfor området for optimale temperaturer (og vi har angitt at optimal er kald), vil fargen på stripen være grønn. Hvis den nåværende temperaturen faller innenfor det tilstøtende området til det optimale (i vårt tilfelle er det normal temperatur), vil stripen bli gul. Hvis den nåværende temperaturen faller innenfor et område som ikke er tilstøtende til det optimale (i vårt tilfelle er det varm temperatur), vil stripen bli rød.
På samme måte vil alt skje hvis du angir varm temperatur som optimal. I dette tilfellet, hvis den nåværende temperaturen faller innenfor området for varme temperaturer - vil stripen være grønn, hvis den faller innenfor normale - gul, hvis innenfor kalde - rød.
Hvis du angir normal temperatur som optimal, kan stripen bare være grønn (hvis den nåværende temperaturen faller innenfor den normale) eller gul (hvis den nåværende temperaturen faller innenfor et tilstøtende område til normal temperatur, som er varm eller kald).
For å angi hvilket område som er optimalt,
må du angi som verdi for attributtet
optimum et hvilket som helst tall fra dette området.
I eksemplene nedenfor faller verdien til attributtet optimum
inn i lavverdi området
(det vil si kalde temperaturer).
Eksempel
Verdien til attributtet value faller inn i
lavverdi området:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
normalverdi området:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
høyverdi området:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
I eksemplene nedenfor faller verdien til attributtet optimum
inn i høyverdi området
(det vil si varme temperaturer).
Eksempel
Verdien til attributtet value faller inn i
lavverdi området:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
normalverdi området:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
høyverdi området:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
I eksemplene nedenfor faller verdien til attributtet optimum
inn i normalverdi området
(det vil si normale temperaturer).
Eksempel
Verdien til attributtet value faller inn i
lavverdi området:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
normalverdi området:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Eksempel
Verdien til attributtet value faller inn i
høyverdi området:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Eldre nettlesere
Eldre nettlesere vil ikke kunne vise taggen meter
pent og vil i stedet vise innholdet i selve taggen:
<meter value="10" min="0" max="100">Denne teksten vil vises i eldre nettlesere.</meter>
:
Attributter
Verdien til attributter kan være desimaltall og negative tall.
| Attributt | Beskrivelse |
|---|---|
value |
Setter nåværende verdi. Obligatorisk attributt. |
min |
Angir minimum mulig verdi. Standardverdi: 0. |
max |
Angir maksimum mulig verdi. Standardverdi: 1. |
low |
Angir grensen for lavverdi området. Lave verdier vil være fra tallet i attributtet
min til tallet i attributtet low.
|
high |
Angir grensen for høyverdi området. Høye verdier vil være fra tallet i attributtet
high til tallet i attributtet max.
|
optimum |
Definerer området for optimale verdier. |
Se også
-
taggen
progress,
som lager en progresjonslinje.