Индикаторы

Назначение и примеры индикаторов

Индикаторы на веб-страницах служат для того, чтобы визуально показывать пользователям состояние какого-либо процесса: загрузки/выгрузки файлов, установки программ, либо других процессов, происходящих в настоящий момент времени.

Они, т.е. их тэги, "вшиты" в современные браузеры точно так же, как и тэги input (поле), или же, скажем, button (кнопка). Их отображение Вы сейчас видите ниже.

 КНОПКА

В поля можно что-либо вводить, а на кнопки нажимать. Подробнее об этих веб-элементах (кнопках) здесь:  и много об их оформлении браузерами здесь: (все будут открываться в новых окнах).

А это уже примеры того, как браузеры отображают индикаторы.

Так:

или

Так:

либо

Так:

Разумеется, для того, чтобы они отображали их по-разному, нужно использовать специальные атрибуты этих тэгов. Об этом дальше.   можно смотреть сразу:

Создание индикаторов

На этой странице учебных сайтов проверяю, и показываю создание индикаторов средствами HTML, причём(!) не в HTML 5, а лишь в HTML 4.01 только!

На веб-странице индикаторы создаются с помощью открывающего и закрывающего тэга <progress></progress>, а также с помощью его специальных атрибутов.

Кроме этого, для некоторых целей можно использовать тэги <meter></meter>, конечно же, тоже с соответствующими атрибутами.

Всё делал и проверял в браузере "Yandex".

Примеры индикаторов в старых браузерах не работают!

Использование созданных индикаторов можно смотреть сразу:

Пример отображения сразу нескольких индикаторов

Сделал этот пример с помощью 2-ух тэгов progress, идущих друг за другом, и ясно видно, что этот тэг - строчный элемент!

И каждый из них показывает по 30% выполнения.

Всё то же самое относится и к тэгу meter. Он тоже строчный элемент, и выглядит отображение 3-ёх таких тэгов так:

Важно!  О прописывании тэгов в коде страницы.
Чтобы эти тэги отображались друг за другом БЕЗ ПРОБЕЛОВ, их нужно писать в одну строчку!

Иначе будет так:

Такую особенность отображения браузерами этих тэгов индикации нужно просто учитывать!

Пример направления индикации

А здесь я изменил направление стандартной индикации (по умолчанию), и теперь индикатор показывает справа на лево.

Сделано это добавлением в тэг специального атрибута dir (направление), который может иметь 2 значения: dir=”ltr” (слева на право) - это по умолчанию, и другое возможное значение: dir=”rtl” (справа на лево) - как в показанном примере.

*Prim.  Эти атрибуты работают в обоих упомянутых тэгах одинаково!

Пример увеличенных индикаторов

Кстати! Со всеми этими тэгами работает и тэг BIG!

- Этот ещё БЕЗ тэга big.
И он показывает 50%

- Этот уже обрамлён упомянутым тэгом.
Сейчас показывает 75%

Пример тэга meter, обрамлённый 2-умя тэгами big выглядит так:

Важное!  О тэге meter
Чтобы последний из показанных индикаторов отображался посередине, я заключил его в тэг <p> с атрибутом align=”center”.
Обязательно(!) добавить атрибут align=”left” в сам тэг meter!

Иначе он будет отображаться так:

Данное примечание тэга progress не касается!

Изменение стиля индикаторов

В этом подразделе учебной страницы пробую изменить стиль отображения браузерами индикаторов с помощью атрибута style.

- Это отображение по умолчанию.

- А это под действием атрибута style.

Прописал в тэге progress вот такой код: style=”font-size:30px;”

Ну а здесь, ниже, добавил в код стиля ещё и смену фона. Фон сменился, но есть большое, очень большое НО!

Важно!  О смене фона индикаторов.

Для смены фона я пробовал прописывать разные цвета и разными способами. Через RGB тоже. Сейчас прописал так: style=”background-color:red;” (красный).
Однако!!!  Какие бы цвета я ни указывал в коде, результат всё время один! Вот его сейчас и видно в показанном выше примере.
Да! Ещё кое-что важное!  Команда !important в этом случае не срабатывает!

Вывод: атрибут style в этих тэгах работает ПЛОХО! Хотя и срабатывает, но не всегда. Так же ведёт себя и отдельная таблица стилей.

Ну ... ... ... жалко, обидно, досадно, но не смертельно! Переживём!

Группировка индикаторов

Здесь пробую объединить тэги индикаторов в блоки. Баловство это, конечно, но зато интересно!
Объединяю в единый блок тэг meter, прописывая каждой (кроме последней) строчке тэг переноса br.

Заряд батареи:

В этом примере отображения браузерами индикаторов самое интересное то, что в зависимости от выставленных значений специального атрибута low, меняется ещё и цвет индикации. В этом примере установил: low=”30”, а если установить значение, скажем, 40 (причём это "40" нужно прописывать во всех тэгах), то красной станет и следующая полоска индикаторов.

Об атрибутах и их значениях подробнее рассказал в следующем подразделе.

Атрибуты индикаторов

У тэгов индикации есть общие атрибуты, такой как value (заполненность), и ещё один атрибут - max (максимум).

***КСТАТИ! Атрибут max отвечает за ЁМКОСТЬ(!), а НЕ за размер индикатора. Чем он больше, тем меньше "подсвеченная" зона.

Атрибуты тэга progress

Проще всего тэг progress. У него только 2 обязательных атрибута: value и max.

Однако!

Если же НЕ указать тэгу progress атрибут max, то индикатор будет выглядит вот так при любом значении атрибута value (кроме "0"):

* * *

Атрибуты тэга meter

У этого тэга разных атрибутов гораздо больше, и работать с ним сложнее, чем с его "коллегой". Данный тэг преимущественно используют для индикации величин, диапазон размеров которых точно известен: объём резервуара, заряд батарей, и т.д..

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

А здесь атрибуты тэга meter.
Значение "number" - означает "число", т.е. просто цифра без указания единиц.

Использование индикаторов

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

Практический же смысл они имеют только при подключении их атрибута value  к скриптам. Иначе - никак!

Подробности смотрите в "JavaScript" (откроется в новом окне).

* * *

А здесь я покажу Вам лишь два довольно простых, но очень интересных примера, как практически работает такая связка: атрибут + скрипт.

Нижнему тестовому индикатору я установил значение упомянутого атрибута - 30.

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

Для возвращения его в исходное состояние, страницу нужно перезагрузить.

Надеюсь, показанный пример связки атрибута тэга со скриптом, сделанной в самом коде тэга, Вам понравился. Дальше посмотрите ещё один интересный пример.

Движущийся индикатор

Сделал его с помощью тэга progress и кода JavaScript, причём, прописанного уже не как атрибут этого тэга, а вполне самостоятельным скриптом.

*Prim.  Пока Вы просматривали верхние подразделы страницы, скрипт уже сработал.
Чтобы увидеть его работу, перезагрузите страницу.

Для повторного просмотра движения, страницу нужно перезагрузить.

Длину этого индикатора нужно задавать в атрибуте style этого тэга. Сейчас я установил ему длину 600 px.

Скорость заполнения индикатора задаётся уже в скрипте. Сейчас я ему установил скорость 100 (просто цифра).
Причём! Чем меньше указанная цифра, тем быстрее он заполняется. Если же вообще её не указать, то заполнение произойдёт очень быстро!

И кстати!

Это именно та цифра, которую в скрипте вполне можно, и даже лучше(!) прописать в качестве переменной (для реального, а не учебного программирования).

Тогда, написав код немного по-другому, а не так, как он написан сейчас, можно было бы управлять скоростью отображения индикатором каких-либо процессов.

Скажем, так:

  var speed = 100;
  setTimeout(getProgress, speed);

Где, как раз и нужно вместо цифры 100, прописать обращение к объекту, в котором происходят эти процессы.
И это уже будет не учебное, а практическое использование созданного индикатора.

* * *

Посмотреть другие интересные примеры веб-страниц, созданные при обучении и тренировках, можно, вернувшись в раздел "Учебные сайты" по нижней навигационной большой синей стрелке.

ВВЕРХ