Использование и стилизация HTML5-метра [Руководство]

Если вы знакомы с индикатором выполнения HTML, который показывает, сколько действий было выполнено, вы обнаружите, что элемент meter похож на этот - оба показать текущее значение из максимального значения. Но в отличие от индикатора выполнения, индикаторный индикатор не должен использоваться для отображения прогресса..

Он используется, чтобы показать статическое значение в определенном диапазоне, Например, вы можете указать объем памяти, используемый в дисковом хранилище, показывая, сколько места заполнено, а сколько нет..

Кроме того, элемент измерителя может также использоваться для визуализации до трех областей в пределах его диапазона. Повторно используя пример места для хранения, вместо того, чтобы только показывать, сколько места занято, вы также можете визуально указать, заполнено ли занятое пространство только редко (скажем, ниже 30%) или почти наполовину (от 30 до 60%) или больше, чем наполовину полный (более 60%), используя разные цвета. Это помогает пользователям знать, когда они достигают предела хранилища.

В этом посте мы покажем вам как оформить бар для обеих упомянутых целей, то есть простой датчик (без обозначенных областей) и два примера датчиков с 3 обозначенными цветом участками. Для последнего мы будем работать над создание датчика "отметок" за выставление плохих, средних и хороших оценок, и датчик pH для отображения кислотных, нейронных и щелочных значений pH.

Атрибуты

Прежде чем мы начнем с примеров и углубимся, давайте кратко рассмотрим приведенный ниже список атрибутов, подробнее об этих атрибутах, таких как их значения по умолчанию и т. Д., Будет рассказано в примерах..

значение - Значение метр элемент
мин - Минимальное значение дальности метра
Максимум - Максимальное значение дальности метра
низкий - Указывает нижнее граничное значение
высоко - Указывает верхнее граничное значение
оптимальный - Оптимальная точка в ассортименте

1. Стилизация простой меры

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

(1) Есть дефолт мин а также Максимум значение, определяющее диапазон метр, что составляет 0 и 1 соответственно. (2) Если пользователь указал значение не попадает в метр диапазон, он будет принимать значение либо мин или же Максимум, какой бы он ни был. (3) Заканчивающийся тег обязателен.

Вот синтаксис:

0,5

В качестве альтернативы, мы также можем добавить мин а также Максимум атрибуты, таким образом, обеспечивающие определенный пользователем диапазон, например:

2. Стайлинг "Marks" Калибровка

Во-первых, нам нужно разделить диапазон на три региона (левый / низкий, средний, правый / высокий). Это были низкий а также высоко атрибуты вступают в игру. Вот как три региона разделены.

Три региона образуются между мин & низкий , низкий & высоко а также высоко & Максимум.

Теперь очевидно, что есть определенные условия низкий а также высоко значения должны следовать для трех областей, которые будут сформированы:

низкий не может быть меньше чем мин и больше чем высоко & Максимум
высоко не может быть больше чем Максимум и меньше чем низкий & мин.
И когда критерий нарушен как низкий а также высоко примет значение другой переменной в критериях, которая не удовлетворяется, т.е. если низкий значение найдено ниже чем мин чего не должно быть, низкий получит мин значение.

В этом примере мы рассмотрим три региона слева направо:

Бедные: (0-33)
Средний: (34-60)
Хорошо: (61-100)

Следовательно, ниже приведены значения для атрибутов; min = "0" low = "34" high = "60" max = "100".

Вот изображение, визуализирующее регионы.

Несмотря на то, что в счетчике, который мы только что создали, есть три региона, он покажет только два «вида» областей только в двух цветах. Зачем? Так как оптимальный находится в среднем регионе.

Оптимальная точка

В каком бы регионе (из трех) оптимальный точка падает, по умолчанию она считается «оптимальной областью» зеленого цвета. Область (ы), расположенная непосредственно рядом с ней, называется "субоптимальной областью", и она окрашена в оранжевый цвет. Самый дальний от нас - «не слишком оптимальный регион», окрашенный в красный цвет..

До сих пор в нашем примере мы не присваивали значение для оптимальный. Следовательно, значением по умолчанию становится 50, что делает средний регион «оптимальным регионом», а те, которые находятся рядом с ним (как слева, так и справа), - «субоптимальными регионами»..

Короче говоря, в приведенном выше случае любое значение метр элемент, попадающий в среднюю область, обозначен зеленым цветом; остальное апельсин.

Это не то, что мы хотим. Мы хотим, чтобы он был таким: Бедные (Красный), Средний (оранжевый), Хорошо (Зеленый)

Поскольку правый регион следует считать нашим оптимальным регионом, мы дадим оптимальный значение, которое попадет в правую область (любое значение от 61 до 100, включая 61 и 100).

Мы берем 90 для этого примера. Это сделает правую область «оптимальной», середину (ближайшую к ней ближайшую область) «неоптимальной», а крайнюю левую - «не слишком оптимальной» областью.

Это то, что мы получим на нашей колеи.

2. Укладка датчика pH

Во-первых, передышка по значениям pH. Кислотный раствор имеет рН менее 7, щелочной раствор имеет рН более 7, и если вы приземлитесь на 7, это нейтральный раствор.

Таким образом, мы будем использовать следующие значения и атрибуты:

низкое = "7" , высокий = "7", макс = "14", и мин примет значение по умолчанию ноль.

Прежде чем добавить остальные атрибуты для завершения кода, давайте определимся с цветами: кислый (Красный), нейтральный (белый) и щелочной (Синий). Давайте также рассмотрим кислотную область (левая область ниже 7) как «оптимальную»

Вот псевдоэлементы CSS, на которые мы нацеливаемся, чтобы получить желаемый визуал в Fire Fox. (Псевдоэлементы счетчика webkit и многое другое см. По ссылкам, перечисленным в разделе «Ссылка».)

 .ph_meter background: lightgrey; ширина: 300 пикселей;  .ph_meter: -moz-meter-оптимум :: - moz-meter-bar background: indianred;  .ph_meter: -moz-meter-sub-оптимальной :: - moz-meter-bar background: antiquewhite;  .ph_meter: -moz-meter-sub-sub-оптимум :: - moz-meter-bar background: steelblue;

Вот полный HTML-код и окончательный результат измерения pH.