Znacznik meter

Znacznik meter służy do wyświetlania pewnej wartości w atrakcyjnie sformatowany sposób.

Wygląd znacznika przedstawia częściowo lub całkowicie wypełniony pasek. Pasek może być zielony, żółty lub czerwony (kolor paska zależy od wartości atrybutów, o tym będzie poniżej):

Znacznika meter należy używać, na przykład, w następującej sytuacji: chcesz wyświetlić na ekranie aktualną wartość temperatury, przy czym temperatura może zmieniać się od 0 do 100. Należy wskazać następujące atrybuty: atrybut value powinien wskazywać aktualną wartość temperatury, atrybut min - minimalną możliwą wartość (w naszym przypadku 0), atrybut max - maksymalną możliwą (w naszym przypadku 100).

W zależności od wartości atrybutu value pasek będzie mały lub duży. Jeśli wskazać value z wartością 10, to pasek będzie mały (ponieważ 10 bardzo blisko minimum - do zera), jeśli zaś wskazać wartość 90, to pasek będzie duży (ponieważ 90 blisko maksimum - do 100). Jeśli wskazać wartość 100 - to pasek zajmie cały element (ponieważ wartość osiągnęła maksimum).

Jeśli wskazać wartość większą niż 100, to pasek i tak zajmie cały element. Jeśli zaś wskazać 0 i mniej - to paska w ogóle nie będzie.

Przykład

Wartość atrybutu value mała:

:

Przykład

Wartość atrybutu value duża:

:

Przykład

Wartość atrybutu value średnia:

:

Przykład

Wartość atrybutu value równa maksymalnej:

:

Przykład

Wartość atrybutu value równa minimalnej:

:

Przykład

Wartość atrybutu value większa od maksymalnej:

:

Przykład

Wartość atrybutu value mniejsza od minimalnej:

:

Dodajemy atrybuty low i high

W znaczniku meter są jeszcze 2 atrybuty: low i high.

Rozważmy ich działanie na przykładzie temperatury. Przypominam, że nasza minimalna temperatura wynosi 0, a maksymalna - 100. Niech teraz chcemy utworzyć następujące zakresy - "temperatura zimna" od 0 do 20, "normalna" od 20 do 80 i "gorąca" od 80 do 100.

Aby ustawić temperaturę zimną, wskażemy wartością atrybutu low liczbę 20. Okaże się, że od zera (to wartość atrybutu min) do 20 (wartość atrybutu low) mamy obszar niskich wartości.

Aby ustawić temperaturę gorącą, wskażemy wartością atrybutu high liczbę 80. Okaże się, że od 80 (to wartość atrybutu high) do 100 (wartość atrybutu max) mamy obszar wysokich wartości.

Temperatura normalna będzie od 20 (to wartość atrybutu low) do 80 (wartość atrybutu high). Ten obszar nazwijmy obszarem normalnych wartości.

Teraz, w zależności od tego, w który obszar trafi wartość atrybutu value, pasek będzie zabarwiany na zielono lub żółto. Zielony będzie, jeśli trafimy w obszar normalnych wartości, a żółty - jeśli w obszar wysokich lub niskich wartości.

Przykład

Wartość atrybutu value trafia w obszar niskich wartości:

:

Przykład

Wartość atrybutu value trafia w obszar normalnych wartości:

:

Przykład

Wartość atrybutu value trafia w obszar wysokich wartości:

:

Dodajemy atrybut optimum

Atrybut optimum określa optymalną wartość. Dla naszego przykładu optymalną może być temperatura zimna, normalna lub gorąca - według twojego wyboru. Załóżmy, że wskażesz, że optymalna temperatura to zimna. Teraz, w zależności od wartości atrybutu value (czyli od aktualnej temperatury) kolor paska będzie zielony, żółty lub czerwony.

Jeśli aktualna temperatura trafia w obszar optymalnych temperatur (a wskazaliśmy, że optymalna - zimna), to kolor paska będzie zielony. Jeśli aktualna temperatura trafia w sąsiedni z optymalnym zakres (w naszym przypadku to temperatura normalna), to pasek stanie się żółty. Jeśli zaś aktualna temperatura trafia nie w sąsiedni z optymalnym zakres (w naszym przypadku to temperatura gorąca), to pasek stanie się czerwony.

W analogiczny sposób wszystko będzie przebiegać, jeśli optymalną temperaturą wskażemy gorącą. W tym przypadku, jeśli aktualna temperatura trafiła w obszar gorących temperatur - pasek będzie zielony, jeśli trafiła w obszar normalnych - żółty, jeśli w obszar zimnych - czerwony.

Jeśli optymalną wskażemy temperaturę normalną, to pasek może być tylko zielony (jeśli aktualna temperatura trafiła w normalną) lub żółty (jeśli aktualna temperatura trafiła w sąsiada temperatury normalnej, a to gorąca lub zimna).

Aby wskazać, który zakres jest optymalny, należy wskazać jako wartość atrybutu optimum dowolną liczbę z tego zakresu.

W przykładach poniżej wartość atrybutu optimum trafia w obszar niskich wartości (czyli zimnych temperatur).

Przykład

Wartość atrybutu value trafia w obszar niskich wartości:

:

Przykład

Wartość atrybutu value trafia w obszar normalnych wartości:

:

Przykład

Wartość atrybutu value trafia w obszar wysokich wartości:

:

W przykładach poniżej wartość atrybutu optimum trafia w obszar wysokich wartości (czyli gorących temperatur).

Przykład

Wartość atrybutu value trafia w obszar niskich wartości:

:

Przykład

Wartość atrybutu value trafia w obszar normalnych wartości:

:

Przykład

Wartość atrybutu value trafia w obszar wysokich wartości:

:

---

W przykładach poniżej wartość atrybutu optimum trafia w obszar normalnych wartości (czyli normalnych temperatur).

Przykład

Wartość atrybutu value trafia w obszar niskich wartości:

:

Przykład

Wartość atrybutu value trafia w obszar normalnych wartości:

:

Przykład

Wartość atrybutu value trafia w obszar wysokich wartości:

:

Stare przeglądarki

Stare przeglądarki nie będą w stanie pokazać znacznika meter w atrakcyjny sposób i będą wyświetlać zamiast tego zawartość samego znacznika:

:

Atrybuty

Wartość atrybutów może być liczbą ułamkową i ujemną.

Atrybut	Opis
value	Ustawia aktualną wartość. Atrybut obowiązkowy.
min	Ustala minimalną możliwą wartość. Wartość domyślna: 0.
max	Ustala maksymalną możliwą wartość. Wartość domyślna: 1.
low	Ustala granicę obszaru niskich wartości. Niskie wartości będą od liczby w atrybucie min do liczby w atrybucie low.
high	Ustala granicę obszaru niskich wartości. Niskie wartości będą od liczby w atrybucie high do liczby w atrybucie max.
optimum	Określa obszar optymalnych wartości.

Zobacz też