Тэг 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
,
які стварае палосу загрузкі.