Тегот meter
Тегот meter се користи за приказ на
одредена вредност убавно оформена.
Надворешниот изглед на тегот претставува делумно или целосно обоена лента. Лентата може да биде зелена, жолта или црвена (бојата на лентата зависи од вредностите на атрибутите, за тоа ќе биде понатаму):
Тегот meter треба да се користи, на
пример, во следната ситуација: сакате да
прикажете на екранот моментална вредност на температурата,
при што температурата може да се менува од 0
до 100. Треба да ги наведете следните
атрибути: атрибутот value треба да ја означува
моменталната вредност на температурата, атрибутот min
- минималната можна вредност (во нашиот
случај 0), атрибутот max - максималната
можна (во нашиот случај 100).
Во зависност од вредноста на атрибутот value
лентата ќе биде мала или голема. Ако
се наведе value со вредност 10,
тогаш лентата ќе биде мала (бидејќи 10
е многу блиску до минимумот - до нула), ако
се наведе вредност 90, тогаш лентата ќе
биде голема (бидејќи 90 е блиску до максимумот
- до 100). Ако се наведе вредност 100 - тогаш
лентата ќе го заземе целиот елемент (бидејќи вредноста
ја достигна максимумот).
Ако се наведе вредност, поголема од 100,
тогаш лентата сепак ќе го заземе целиот елемент.
Ако се наведе 0 и помалку - тогаш лента
воопшто нема да има.
Пример
Вредноста на атрибутот value мала:
<meter value="10" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value голема:
<meter value="90" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value средна:
<meter value="50" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value еднаква на максималната:
<meter value="100" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value еднаква на минималната:
<meter value="0" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value поголема од максималната:
<meter value="110" min="0" max="100"></meter>
:
Пример
Вредноста на атрибутот value помала од минималната:
<meter value="-10" min="0" max="100"></meter>
:
Додавање на атрибути 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 погодува во
областа на ниски вредности:
<meter value="10" min="0" low="20" high="80" max="100"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на нормални вредности:
<meter value="50" min="0" low="20" high="80" max="100"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на високи вредности:
<meter value="90" min="0" low="20" high="80" max="100"></meter>
:
Додавање на атрибутот optimum
Атрибутот optimum ја определува оптималната
вредност. За нашиот пример оптимална
може да биде студена температура, нормална
или топла - по ваш избор. Да претпоставиме,
дека ќе наведете дека оптимална температура
е студената. Сега, во зависност од вредноста
на атрибутот value (односно од моменталната
температура) бојата на лентата ќе биде зелена,
жолта или црвена.
Ако моменталната температура погодува во областа на оптимални температури (а ние наведовме дека оптимална е студената), тогаш бојата на лентата ќе биде зелена. Ако моменталната температура погодува во соседниот со оптималниот опсег (во нашиот случај тоа е нормална температура), тогаш лентата ќе стане жолта. Ако пак моменталната температура погодува не во соседниот со оптималниот опсег (во нашиот случај тоа е топла температура), тогаш лентата ќе стане црвена.
На сличен начин сè ќе се случи, ако оптимална температура се наведе топлата. Во овој случај, ако моменталната температура погоди во областа на топли температури - лентата ќе биде зелена, ако погоди во областа на нормални - жолта, ако во областа на студени - црвена.
Ако оптимална се наведе нормална температура, тогаш лентата може да биде само зелена (ако моменталната температура погоди во нормалната) или жолта (ако моменталната температура погоди во соседот на нормалната температура, а тоа се топла или студена).
За да се наведе, кој опсег е оптимален,
треба да се наведе како вредност на атрибутот
optimum кој било број од тој опсег.
Во примерите подолу вредноста на атрибутот optimum
погодува во областа на ниски вредности
(односно студени температури).
Пример
Вредноста на атрибутот value погодува во
областа на ниски вредности:
<meter value="10" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на нормални вредности:
<meter value="50" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на високи вредности:
<meter value="90" min="0" low="20" high="80" max="100" optimum="10"></meter>
:
Во примерите подолу вредноста на атрибутот optimum
погодува во областа на високи вредности
(односно топли температури).
Пример
Вредноста на атрибутот value погодува во
областа на ниски вредности:
<meter value="10" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на нормални вредности:
<meter value="50" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на високи вредности:
<meter value="90" min="0" low="20" high="80" max="100" optimum="90"></meter>
:
Во примерите подолу вредноста на атрибутот optimum
погодува во областа на нормални вредности
(односно нормални температури).
Пример
Вредноста на атрибутот value погодува во
областа на ниски вредности:
<meter value="10" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на нормални вредности:
<meter value="50" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Пример
Вредноста на атрибутот value погодува во
областа на високи вредности:
<meter value="90" min="0" low="20" high="80" max="100" optimum="50"></meter>
:
Стари прелистувачи
Старите прелистувачи нема да можат да го прикажат тегот meter
убавно и ќе прикажуваат наместо тоа
содржината на самиот тег:
<meter value="10" min="0" max="100">Овој текст ќе се прикаже во стари прелистувачи.</meter>
:
Атрибути
Вредноста на атрибутите може да биде децимален и негативен број.
| Атрибут | Опис |
|---|---|
value |
Ја поставува моменталната вредност. Задолжителен атрибут. |
min |
Го задава минимално можната вредност. Вредност по основно: 0. |
max |
Го задава максимално можната вредност. Вредност по основно: 1. |
low |
Го задава рабодот на областа на ниски вредности. Ниски вредности ќе бидат од бројот во атрибутот
min до бројот во атрибутот low.
|
high |
Го задава рабодот на областа на ниски вредности. Ниски вредности ќе бидат од бројот во атрибутот
high до бројот во атрибутот max.
|
optimum |
Го определува опсегот на оптимални вредности. |
Погледнете ги и
-
тегот
progress,
кој создава лента за вчитување.