Тег 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,
который создает полосу загрузки.