Taggen meter
Taggen meter används för att visa
ett värde på ett vackert formaterat sätt.
Utseendet på taggen är en delvis eller helt ifylld stapel. Stapeln kan vara grön, gul eller röd (färgen på stapeln beror på attributens värden, mer om det nedan):
Taggen meter bör användas, till
exempel, i följande situation: du vill
visa det aktuella temperaturvärdet på skärmen,
där temperaturen kan variera från 0
till 100. Du bör ange följande
attribut: attributet value ska ange
det aktuella temperaturvärdet, attributet min
- det minsta möjliga värdet (i vårt
fall 0), attributet max - det maximalt
möjliga (i vårt fall 100).
Beroende på värdet på attributet value
kommer stapeln att vara liten eller stor. Om
du anger value till värdet 10,
kommer stapeln att vara liten (eftersom 10
är mycket nära minimum - noll), men om
du anger värdet 90, kommer stapeln att vara
stor (eftersom 90 är nära maximum
- 100). Om du anger värdet 100 - så
kommer stapeln att fylla hela elementet (eftersom värdet
nått maximum).
Om du anger ett värde större än 100,
kommer stapeln ändå att fylla hela elementet.
Om du anger 0 eller mindre - så kommer det inte
finnas någon stapel alls.
Exempel
Värdet på attributet value är litet:
<meter value="10" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är stort:
<meter value="90" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är mellanting:
<meter value="50" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är lika med maximalvärdet:
<meter value="100" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är lika med minimalvärdet:
<meter value="0" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är större än maximalvärdet:
<meter value="110" min="0" max="100"></meter>
:
Exempel
Värdet på attributet value är mindre än minimalvärdet:
<meter value="-10" min="0" max="100"></meter>
:
Lägger till attributen low och high
I taggen meter finns ytterligare 2 attribut:
low och high.
Låt oss titta på hur de fungerar med temperaturexemplet.
Kom ihåg att vår lägsta temperatur
är 0, och den högsta - 100.
Låt oss nu säga att vi vill ha följande intervall
- "kall temperatur" från 0 till 20,
"normal" från 20 till 80 och
"varm" från 80 till 100.
För att ange den kalla temperaturen, sätter vi
värdet på attributet low till 20.
Då blir det så att från noll (detta är värdet på attributet
min) till 20 (värdet på attributet
low) har vi området för låga värden.
För att ange den varma temperaturen, sätter vi
värdet på attributet high till 80.
Då blir det så att från 80 (detta är värdet
på attributet high) till 100 (värdet
på attributet max) har vi området för höga
värden.
Normal temperatur kommer att vara från 20
(detta är värdet på attributet low) till 80
(värdet på attributet high). Detta område
kallas området för normala värden.
Nu, beroende på vilket område
värdet på attributet value faller i,
kommer stapeln att färgas i grönt eller
gult. Grönt blir om vi hamnar
i området för normala värden, och gult
- om vi hamnar i området för höga eller låga värden.
Exempel
Värdet på attributet value hamnar i
området för låga värden:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för normala värden:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för höga värden:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Lägger till attributet optimum
Attributet optimum definierar det optimala
värdet. För vårt exempel kan den optimala
temperaturen vara den kalla, den normala
eller den varma - efter ditt val. Låt oss anta
att du anger att den optimala temperaturen
är den kalla. Nu, beroende på värdet
på attributet value (det vill säga den aktuella
temperaturen) kommer stapelns färg att vara grön,
gul eller röd.
Om den aktuella temperaturen hamnar inom området för optimala temperaturer (och vi har angett att den optimala är den kalla), så kommer stapelns färg att vara grön. Om den aktuella temperaturen hamnar i intervallet bredvid det optimala (i vårt fall är det den normala temperaturen), så blir stapeln gul. Men om den aktuella temperaturen hamnar i ett område som inte gränsar till det optimala (i vårt fall är det den varma temperaturen), så blir stapeln röd.
På samma sätt kommer allt att fungera om den optimala temperaturen anges som den varma. I detta fall, om den aktuella temperaturen hamnar i området för varma temperaturer - kommer stapeln att vara grön, om den hamnar i området för normala - gul, om den hamnar i området för kalla - röd.
Om den optimala anges som den normala temperaturen, kan stapeln bara vara grön (om den aktuella temperaturen hamnade i den normala) eller gul (om den aktuella temperaturen hamnade i ett område bredvid den normala temperaturen, det vill säga den varma eller den kalla).
För att ange vilket intervall som är optimalt,
måste du ange som värde på attributet
optimum ett valfritt tal från detta intervall.
I exemplen nedan hamnar värdet på attributet optimum
i området för låga värden
(det vill säga kalla temperaturer).
Exempel
Värdet på attributet value hamnar i
området för låga värden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för normala värden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för höga värden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
I exemplen nedan hamnar värdet på attributet optimum
i området för höga värden
(det vill säga varma temperaturer).
Exempel
Värdet på attributet value hamnar i
området för låga värden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för normala värden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för höga värden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
I exemplen nedan hamnar värdet på attributet optimum
i området för normala värden
(det vill säga normala temperaturer).
Exempel
Värdet på attributet value hamnar i
området för låga värden:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för normala värden:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Exempel
Värdet på attributet value hamnar i
området för höga värden:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Äldre webbläsare
Äldre webbläsare kan inte visa taggen meter
på ett vackert sätt och kommer istället att visa
innehållet i taggen:
<meter value="10" min="0" max="100">Denna text kommer att visas i äldre webbläsare.</meter>
:
Attribut
Värdet på attributen kan vara decimaltal och negativa tal.
| Attribut | Beskrivning |
|---|---|
value |
Sätter det aktuella värdet. Obligatoriskt attribut. |
min |
Anger det minsta möjliga värdet. Standardvärde: 0. |
max |
Anger det maximala möjliga värdet. Standardvärde: 1. |
low |
Anger gränsen för området med låga värden. Låga värden kommer att vara från talet i attributet
min till talet i attributet low.
|
high |
Anger gränsen för området med höga värden. Höga värden kommer att vara från talet i attributet
high till talet i attributet max.
|
optimum |
Definierar området för optimala värden. |
Se även
-
taggen
progress,
som skapar en laddningsindikator.