Елемент meter

Елементът meter се използва за визуализиране на определена стойност в добре форматиран вид.

Външният вид на елемента представлява частично или напълно запълнена лента. Лентата може да бъде зелена, жълта или червена (цветът на лентата зависи от стойностите на атрибутите, за това ще стане дума по-долу):

Елементът meter трябва да се използва, например, в следната ситуация: искате да визуализирате на екрана текущата стойност на температурата, като температурата може да се променя от 0 до 100. Трябва да посочите следните атрибути: атрибутът value трябва да посочва текущата стойност на температурата, атрибутът min - минимално възможната стойност (в нашия случай 0), атрибутът max - максимално възможната (в нашия случай 100).

В зависимост от стойността на атрибута value лентата ще бъде малка или голяма. Ако се посочи value със стойност 10, лентата ще бъде малка (тъй като 10 е много близо до минимума - до нула), а ако се посочи стойност 90, то лентата ще бъде голяма (тъй като 90 е близо до максимума - до 100). Ако се посочи стойност 100 - то лентата ще заеме целия елемент (тъй като стойността е достигнала максимума).

Ако се посочи стойност, по-голяма от 100, лентата все пак ще заеме целия елемент. Ако се посочи 0 и по-малко - то лента изобщо няма да се вижда.

Пример

Стойността на атрибута value е малка:

:

Пример

Стойността на атрибута value е голяма:

:

Пример

Стойността на атрибута value е средна:

:

Пример

Стойността на атрибута value е равна на максималната:

:

Пример

Стойността на атрибута value е равна на минималната:

:

Пример

Стойността на атрибута value е по-голяма от максималната:

:

Пример

Стойността на атрибута value е по-малка от минималната:

:

Добавяне на атрибути low и high

В елемента meter има още 2 атрибута: low и high.

Нека разгледаме тяхното действие с примера за температурата. Напомням, че нашата минимална температура е 0, а максималната - 100. Нека сега искаме да дефинираме следните диапазони - "студена температура" от 0 до 20, "нормална" от 20 до 80 и "гореща" от 80 до 100.

За да зададем студена температура, ще посочим стойност на атрибута low числото 20. Ще се получи, че от нула (това е стойността на атрибута min) до 20 (стойността на атрибута low) имаме област на ниски стойности.

За да зададем гореща температура, ще посочим стойност на атрибута high числото 80. Ще се получи, че от 80 (това е стойността на атрибута high) до 100 (стойността на атрибута max) имаме област на високи стойности.

Нормалната температура ще бъде от 20 (това е стойността на атрибута low) до 80 (стойността на атрибута high). Тази област ще наречем област на нормални стойности.

Сега, в зависимост от това в коя област попада стойността на атрибута value, лентата ще бъде оцветена в зелен или жълт цвят. Зелен ще бъде, ако попаднем в областта на нормални стойности, а жълт - ако сме в областта на високи или ниски стойности.

Пример

Стойността на атрибута value попада в областта на ниски стойности:

:

Пример

Стойността на атрибута value попада в областта на нормални стойности:

:

Пример

Стойността на атрибута value попада в областта на високи стойности:

:

Добавяне на атрибут optimum

Атрибутът optimum определя оптималната стойност. За нашия пример оптимална може да бъде студената температура, нормалната или горещата - по ваш избор. Да предположим, че посочите, че оптималната температура е студена. Сега, в зависимост от стойността на атрибута value (тоест от текущата температура) цветът на лентата ще бъде зелен, жълт или червен.

Ако текущата температура попада в областта на оптимални температури (а ние посочихме, че оптималната е студена), то цветът на лентата ще бъде зелен. Ако текущата температура попада в съседния на оптималния диапазон (в нашия случай това е нормалната температура), то лентата ще стане жълта. Ако пък текущата температура попада не в съседния на оптималния диапазон (в нашия случай това е горещата температура), то лентата ще стане червена.

По аналогичен начин ще се случи, ако оптималната температура се посочи като гореща. В този случай, ако текущата температура попадне в областта на горещите температури - лентата ще бъде зелена, ако попадне в областта на нормалните - жълта, ако в областта на студените - червена.

Ако оптималната се посочи като нормална температура, то лентата може да бъде само зелена (ако текущата температура попадне в нормалната) или жълта (ако текущата температура попадне в съседна на нормалната температура, а това са горещата или студената).

За да се посочи кой диапазон е оптимален, трябва да се посочи като стойност на атрибута optimum произволно число от този диапазон.

В примерите по-долу стойността на атрибута optimum попада в областта на ниски стойности (тоест студени температури).

Пример

Стойността на атрибута value попада в областта на ниски стойности:

:

Пример

Стойността на атрибута value попада в областта на нормални стойности:

:

Пример

Стойността на атрибута value попада в областта на високи стойности:

:

В примерите по-долу стойността на атрибута optimum попада в областта на високи стойности (тоест горещи температури).

Пример

Стойността на атрибута value попада в областта на ниски стойности:

:

Пример

Стойността на атрибута value попада в областта на нормални стойности:

:

Пример

Стойността на атрибута value попада в областта на високи стойности:

:

---

В примерите по-долу стойността на атрибута optimum попада в областта на нормални стойности (тоест нормални температури).

Пример

Стойността на атрибута value попада в областта на ниски стойности:

:

Пример

Стойността на атрибута value попада в областта на нормални стойности:

:

Пример

Стойността на атрибута value попада в областта на високи стойности:

:

Стари браузъри

Старите браузъри няма да могат да покажат елемента meter в красив вид и ще визуализират вместо това съдържанието на самия елемент:

:

Атрибути

Стойността на атрибутите може да бъде дробно и отрицателно число.

Атрибут	Описание
value	Задава текущата стойност. Задължителен атрибут.
min	Задава минимално възможната стойност. Стойност по подразбиране: 0.
max	Задава максимално възможната стойност. Стойност по подразбиране: 1.
low	Задава границата на областта на ниски стойности. Ниски стойности ще бъдат от числото в атрибута min до числото в атрибута low.
high	Задава границата на областта на ниски стойности. Ниски стойности ще бъдат от числото в атрибута high до числото в атрибута max.
optimum	Определя областта на оптимални стойности.

Вижте също