|

Элементы progress и meter. HTML5

1 комментарий

HTML5 принес с собой множество новых семантических и функциональных элементов. Многие из них уже поддерживаются всеми современными браузерами, некоторые еще нет, либо поддерживаются частично.
Одними из таких являются элементы <progress> и <meter>.
Элемент progress служит для визуализации прогресса выполнения какой-либо задачи. Проще говоря — это прогресс-бар.
Элемент meter внешне похож на progress, но обладает большим количеством специфичных атрибутов и служит для графического отображения каких-либо числовых значений.
Нужда в таких элементах появляется достаточно часто, будь то страница «Coming soon», или диаграмма тестирования процессоров.
Несколько примеров:
Многостраничная форма с индикатором процессаВывод результатов голосования на Mail ru

Можно вспомнить еще визуализацию количества заполнения информации «о себе» на личной странице Вконтакте.
Есть достаточно много решений — скрипты, библиотеки для работы с вектором, но простого способа визуализации подобных задач до сих пор не было.


О семантике элементов <progress> и <meter>.

Если нам надо показать, к примеру градусник, либо процент голосов в голосовании — то это meter, а если процент загрузки файла, либо процент завершенности работ — то это progress.

О поддержке этих элементов браузерами.

Наиболее интенсивно набирающий популярность браузер Google Chrome уже давно поддерживает оба этих элемента.
С 11-й версии к нему добавился все еще популярный в России браузер Opera. И буквально на днях элемент <progress> включен в «ночные» и тестовые сборки Firefox. Beta-версия и Aurora (Firefox 7) доступны для скачивания на официальном сайте.
С элементом <meter> у Firefox дела обстоят чуть хуже — не готова визуальная часть, но надо полагать, что уже скоро мы увидим и его в тестовых сборках.

Теперь к делу. Давайте посмотрим, что можно сотворить уже сегодня.

Элемент progress

Атрибуты

Обязательных атрибутов не имеет.

  • value — текущее значение {number}
  • max — максимально возможное значение {number} (по умолчанию: 1)

Все просто — берется промежуток от 0 до значения max. Если max не задан, то по умолчанию он равен 1. Значение value должно находится в промежутке от 0 до max. Процент выполнения (положение прогрессбара) высчитывается как (value/max)*100.
Для получения текущего положения существует свойство «только для чтения» — position.
Разумеется, value (как и max) можно задать при помощи JavaScript.
Закрывающий тег у элемента обязателен. Браузеры, не поддерживающие элемент, покажут тот контент, который находится между открывающим и закрывающим тегами. Поддерживающие этот контент «спрячут».

Пример:

<progress max="10" value="3">
3 из 10…
</progress>
<label>Выполнено</label>

Элемент meter

Атрибуты

  • value — текущее значение {number}. Обязательный атрибут
  • min — минимально возможное значение {number} (по умолчанию: 0)
  • max — максимально возможное значение {number} (по умолчанию: 1)
  • low — от min до low значение считается ниже нормы (прогресс-бар обычно окрашивается в другой цвет) {number}
  • optimum — оптимальное значение {number}
  • high — от high до max значение считается выше нормы (прогресс-бар обычно окрашивается в другой цвет) {number}

Значение value должно находится в промежутке от 0 до max. Процент выполнения (положение прогрессбара) высчитывается как (value/max)*100.
Также, как и у progress, акрывающий тег у элемента обязателен. Браузеры, не поддерживающие элемент, покажут тот контент, который находится между открывающим и закрывающим тегами. Поддерживающие этот контент «спрячут».

Примеры:

<h2>Результаты голосования:</h2>
<meter min="0" max="100" value="13">13%</meter>
<label>Вова</label>
<meter min="0" max="100" value="45">45%</meter>
<label>Миша</label>
<meter min="0" max="100" value="28">28%</meter>
<label>Петя</label>
<meter min="0" max="100" value="14">14%</meter>
<label>Против всех</label>
<h2>Уровень воды в чайнике:</h2>
<meter min="0.4"  max="2.2" low="0.7" optimum="1" high="2" value="0.54">0.54 литра</meter>
<p>Долейте воды!</p>

Рабочий пример. Элементы progress и meter

Дополнительные сылки по теме:

Анимированный CSS прогресс-бар
Создание многостраничной формы с прогресс-баром
Форма регистрации с прогресс-баром
Прогресс-бар в jQuery UI (использовался в демо для визуализации в браузерах, не поддерживающих элементы progress и meter)
Прогресс-бар в Mootols
Прогресс-бар для библиотеки Prototype
Closure Library — еще одна JavaScript библиотека с реализацией прогресс-бара



Раздел: Вёрстка. Тэги: < />

Следить за комментариями к этой статье (RSS 2.0) | Оставить комментарий

1 комментарий

  1. Макс 15 Июль 2012 в 21:20

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

Оставить комментарий:

Вы можете использовать следующие тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Где взять аватар?

Вход | Регистрация

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

6 + семь =

|