110 of 133 menu

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.
Nederlands
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Wij gebruiken cookies voor de werking van de site, analyse en personalisatie. De verwerking van gegevens gebeurt volgens het Privacybeleid.
alles accepteren aanpassen weigeren