110 of 133 menu

Tag meter

Tag meter se koristi za prikaz određene vrednosti u lepo formatiranom obliku.

Izgled taga predstavlja delimično ili potpuno popunjenu traku. Traka može biti zelena, žuta ili crvena (boja trake zavisi od vrednosti atributa, o tome će biti reči dalje):

Tag meter treba koristiti, na primer, u sledećoj situaciji: želite da prikažete na ekranu trenutnu vrednost temperature, pri čemu se temperatura može menjati od 0 do 100. Treba da navedete sledeće atribute: atribut value treba da ukazuje na trenutnu vrednost temperature, atribut min - minimalnu moguću vrednost (u našem slučaju 0), atribut max - maksimalnu moguću (u našem slučaju 100).

U zavisnosti od vrednosti atributa value traka će biti mala ili velika. Ako navedete value u vrednosti 10, traka će biti mala (jer je 10 veoma blizu minimumu - nuli), ako pak navedete vrednost 90, traka će biti velika (jer je 90 blizu maksimumu - 100). Ako navedete vrednost 100 - traka će zauzeti ceo element (jer je vrednost dostigla maksimum).

Ako navedete vrednost, veću od 100, traka će svejedno zauzeti ceo element. Ako pak navedete 0 ili manje - trake uopšte neće biti.

Primer

Vrednost atributa value je mala:

<meter value="10" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je velika:

<meter value="90" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je srednja:

<meter value="50" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je jednaka maksimalnoj:

<meter value="100" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je jednaka minimalnoj:

<meter value="0" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je veća od maksimalne:

<meter value="110" min="0" max="100"></meter>

:

Primer

Vrednost atributa value je manja od minimalne:

<meter value="-10" min="0" max="100"></meter>

:

Dodavanje atributa low i high

U tagu meter postoje još 2 atributa: low i high.

Pogledajmo njihov rad na primeru temperature. Podsećam, naša minimalna temperatura jednaka je 0, a maksimalna - 100. Neka sada želimo da napravimo sledeće opsege - "hladna temperatura" od 0 do 20, "normalna" od 20 do 80 i "vruća" od 80 do 100.

Da bismo postavili hladnu temperaturu, navedimo vrednost atributa low broj 20. Ispostaviće se da od nule (to je vrednost atributa min) do 20 (vrednost atributa low) imamo oblast niskih vrednosti.

Da bismo postavili vruću temperaturu, navedimo vrednost atributa high broj 80. Ispostaviće se da od 80 (to je vrednost atributa high) do 100 (vrednost atributa max) imamo oblast visokih vrednosti.

Normalna temperatura biće od 20 (to je vrednost atributa low) do 80 (vrednost atributa high). Ovu oblast nazovimo oblast normalnih vrednosti.

Sada, u zavisnosti od toga u koju oblast upada vrednost atributa value, traka će biti obojena u zelenu ili žutu boju. Zelena će biti, ako upadnemo u oblast normalnih vrednosti, a žuta - ako u oblast visokih ili niskih vrednosti.

Primer

Vrednost atributa value upada u oblast niskih vrednosti:

<meter value="10" min="0" low="20" high="80" max="100"></meter>

:

Primer

Vrednost atributa value upada u oblast normalnih vrednosti:

<meter value="50" min="0" low="20" high="80" max="100"></meter>

:

Primer

Vrednost atributa value upada u oblast visokih vrednosti:

<meter value="90" min="0" low="20" high="80" max="100"></meter>

:

Dodavanje atributa optimum

Atribut optimum definiše optimalnu vrednost. Za naš primer optimalna može biti hladna temperatura, normalna ili vruća - po vašem izboru. Pretpostavimo, da navedete da je optimalna temperatura hladna. Sada, u zavisnosti od vrednosti atributa value (odnosno od trenutne temperature) boja trake će biti zelena, žuta ili crvena.

Ako trenutna temperatura upada u oblast optimalnih temperatura (a mi smo naveli da je optimalna - hladna), onda će boja trake biti zelena. Ako trenutna temperatura upada u susedni sa optimalnim domet (u našem slučaju to je normalna temperatura), traka će postati žuta. Ako pak trenutna temperatura upada ne u susedni sa optimalnim domet (u našem slučaju to je vruća temperatura), traka će postati crvena.

Na sličan način će sve biti, ako optimalnom temperaturom naznačimo vruću. U ovom slučaju, ako trenutna temperatura upadne u oblast vrućih temperatura - traka će biti zelena, ako upadne u oblast normalnih - žuta, ako u oblast hladnih - crvena.

Ako optimalnom naznačimo normalnu temperaturu, traka može biti samo zelena (ako trenutna temperatura upadne u normalnu) ili žuta (ako trenutna temperatura upadne u suseda normalne temperature, a to su vruća ili hladna).

Da bismo naveli, koji domet je optimalan, treba navesti kao vrednost atributa optimum bilo koji broj iz tog dometa.

U primerima ispod vrednost atributa optimum upada u oblast niskih vrednosti (odnosno hladnih temperatura).

Primer

Vrednost atributa value upada u oblast niskih vrednosti:

<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

Primer

Vrednost atributa value upada u oblast normalnih vrednosti:

<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

Primer

Vrednost atributa value upada u oblast visokih vrednosti:

<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>

:

U primerima ispod vrednost atributa optimum upada u oblast visokih vrednosti (odnosno vrućih temperatura).

Primer

Vrednost atributa value upada u oblast niskih vrednosti:

<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>

:

Primer

Vrednost atributa value upada u oblast normalnih vrednosti:

<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>

:

Primer

Vrednost atributa value upada u oblast visokih vrednosti:

<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>

:


U primerima ispod vrednost atributa optimum upada u oblast normalnih vrednosti (odnosno normalnih temperatura).

Primer

Vrednost atributa value upada u oblast niskih vrednosti:

<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Primer

Vrednost atributa value upada u oblast normalnih vrednosti:

<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Primer

Vrednost atributa value upada u oblast visokih vrednosti:

<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>

:

Stari brauzeri

Stari brauzeri neće moći da prikažu tag meter u lepom obliku i ispisaće umesto toga sadržaj samog taga:

<meter value="10" min="0" max="100">Ovaj tekst će se videti u starim brauzerima.</meter>

:

Atributi

Vrednost atributa može biti razlomak i negativan broj.

Atribut Opis
value Postavlja trenutnu vrednost. Obavezni atribut.
min Određuje minimalnu moguću vrednost. Podrazumevana vrednost: 0.
max Određuje maksimalnu moguću vrednost. Podrazumevana vrednost: 1.
low Određuje granicu oblasti niskih vrednosti. Niske vrednosti će biti od broja u atributu min do broja u atributu low.
high Određuje granicu oblasti niskih vrednosti. Niske vrednosti će biti od broja u atributu high do broja u atributu max.
optimum Definiše oblast optimalnih vrednosti.

Videti još

  • tag progress,
    koji kreira traku za učitavanje.
Srpski
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Koristimo kolačiće za rad sajta, analitiku i personalizaciju. Obrada podataka se vrši u skladu sa Politikom privatnosti.
prihvati sve podesi odbij