110 of 133 menu

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.
Svenska
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Vi använder kakor för webbplatsens funktion, analys och personalisering. Behandling av data sker i enlighet med Integritetspolicyn.
acceptera alla anpassa avvisa