De meter-tag
De tag meter wordt gebruikt om
een bepaalde waarde op een visueel aantrekkelijke
manier weer te geven.
De weergave van de tag is een gedeeltelijk of volledig ingekleurde balk. De balk kan groen, geel of rood zijn (de kleur van de balk is afhankelijk van de attribuutwaarden, hieronder meer daarover):
De tag meter moet bijvoorbeeld worden gebruikt
in de volgende situatie: u wilt
de huidige temperatuur weergeven,
terwijl de temperatuur kan variëren van 0
tot 100. U moet de volgende
attributen opgeven: het attribuut value moet
de huidige temperatuurwaarde aangeven,
het attribuut min - de minimaal
mogelijke waarde (in ons geval 0),
het attribuut max - de maximaal
mogelijke waarde (in ons geval 100).
Afhankelijk van de waarde van het attribuut value
zal de balk klein of groot zijn. Als
u value een waarde van 10 geeft,
zal de balk klein zijn (omdat 10
zeer dicht bij het minimum ligt - bij nul),
maar als u de waarde 90 opgeeft,
zal de balk groot zijn (omdat 90
dicht bij het maximum ligt - bij 100).
Als u de waarde 100 opgeeft - dan
zal de balk het hele element vullen (omdat de waarde
het maximum heeft bereikt).
Als u een waarde opgeeft die groter is dan 100,
zal de balk toch het hele element vullen.
Als u 0 of minder opgeeft - dan zal er
helemaal geen balk zijn.
Voorbeeld
De waarde van het value-attribuut is klein:
<meter value="10" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is groot:
<meter value="90" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is gemiddeld:
<meter value="50" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is gelijk aan het maximum:
<meter value="100" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is gelijk aan het minimum:
<meter value="0" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is groter dan het maximum:
<meter value="110" min="0" max="100"></meter>
:
Voorbeeld
De waarde van het value-attribuut is kleiner dan het minimum:
<meter value="-10" min="0" max="100"></meter>
:
De attributen low en high toevoegen
In de tag meter zijn er nog 2 attributen:
low en high.
Laten we hun werking bekijken aan de hand van het temperatuurvoorbeeld.
Onthoud dat onze minimumtemperatuur
0 is, en de maximumtemperatuur - 100.
Laten we nu de volgende bereiken maken
- "koude temperatuur" van 0 tot 20,
"normaal" van 20 tot 80 en
"heet" van 80 tot 100.
Om de koude temperatuur in te stellen, geven we
het attribuut low de waarde 20.
Zo wordt het bereik van nul (de waarde van het attribuut
min) tot 20 (de waarde van het attribuut
low) ons gebied met lage waarden.
Om de hete temperatuur in te stellen, geven we
het attribuut high de waarde 80.
Zo wordt het bereik van 80 (de waarde
van het attribuut high) tot 100 (de waarde
van het attribuut max) ons gebied met hoge
waarden.
De normale temperatuur loopt van 20
(de waarde van het attribuut low) tot 80
(de waarde van het attribuut high). Dit gebied
noemen we het gebied met normale waarden.
Nu, afhankelijk van in welk gebied
de waarde van het attribuut value valt,
zal de balk groen of geel gekleurd worden. Groen
als we in het gebied met normale waarden vallen,
en geel - als in het gebied met hoge of lage waarden.
Voorbeeld
De waarde van het attribuut value valt in het
gebied met lage waarden:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met normale waarden:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met hoge waarden:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Het attribuut optimum toevoegen
Het attribuut optimum definieert de optimale
waarde. Voor ons voorbeeld kan de optimale
temperatuur koud, normaal of heet zijn - naar uw keuze.
Stel dat
u opgeeft dat de optimale temperatuur
koud is. Nu, afhankelijk van de waarde
van het attribuut value (dus van de huidige
temperatuur) zal de kleur van de balk groen,
geel of rood zijn.
Als de huidige temperatuur in het gebied van de optimale temperaturen valt (en we hebben opgegeven dat de optimale temperatuur koud is), dan zal de kleur van de balk groen zijn. Als de huidige temperatuur in het gebied naast het optimale bereik valt (in ons geval is dat de normale temperatuur), dan wordt de balk geel. Als de huidige temperatuur niet in het gebied naast het optimale bereik valt (in ons geval is dat de hete temperatuur), dan wordt de balk rood.
Op een vergelijkbare manier zal alles verlopen, als de optimale temperatuur heet is. In dat geval, als de huidige temperatuur in het gebied van hete temperaturen valt - zal de balk groen zijn, als deze in het gebied van normale temperaturen valt - geel, en als deze in het gebied van koude temperaturen valt - rood.
Als u de normale temperatuur als optimaal opgeeft, dan kan de balk alleen groen zijn (als de huidige temperatuur in het normale gebied valt) of geel (als de huidige temperatuur in het gebied naast het normale gebied valt, dus heet of koud).
Om aan te geven welk bereik optimaal is,
moet u als waarde van het attribuut
optimum een willekeurig getal uit dat bereik opgeven.
In de onderstaande voorbeelden valt de waarde van het attribuut optimum
in het gebied met lage waarden
(dus koude temperaturen).
Voorbeeld
De waarde van het attribuut value valt in het
gebied met lage waarden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met normale waarden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met hoge waarden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
In de onderstaande voorbeelden valt de waarde van het attribuut optimum
in het gebied met hoge waarden
(dus hete temperaturen).
Voorbeeld
De waarde van het attribuut value valt in het
gebied met lage waarden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met normale waarden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met hoge waarden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
In de onderstaande voorbeelden valt de waarde van het attribuut optimum
in het gebied met normale waarden
(dus normale temperaturen).
Voorbeeld
De waarde van het attribuut value valt in het
gebied met lage waarden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met normale waarden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Voorbeeld
De waarde van het attribuut value valt in het
gebied met hoge waarden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Oude browsers
Oude browsers kunnen de tag meter
niet op een visueel aantrekkelijke manier weergeven
en zullen in plaats daarvan de
inhoud van de tag zelf tonen:
<meter value="10" min="0" max="100">Deze tekst wordt getoond in oude browsers.</meter>
:
Attributen
De waarde van attributen kan een decimaal of negatief getal zijn.
| Attribuut | Beschrijving |
|---|---|
value |
Stelt de huidige waarde in. Verplicht attribuut. |
min |
Stelt de minimaal mogelijke waarde in. Standaardwaarde: 0. |
max |
Stelt de maximaal mogelijke waarde in. Standaardwaarde: 1. |
low |
Stelt de grens in voor het gebied met lage waarden. Lage waarden lopen van het getal in het attribuut
min tot het getal in het attribuut low.
|
high |
Stelt de grens in voor het gebied met hoge waarden. Hoge waarden lopen van het getal in het attribuut
high tot het getal in het attribuut max.
|
optimum |
Definieert het gebied met optimale waarden. |
Zie ook
-
de tag
progress,
die een laadbalk creëert.