Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
PHP Поиск
<button>
<datalist>
<fieldset>
<input>
События
button
checkbox
file
hidden
number
password
radio
range
reset
submit
text
<keygen>
<label>
<legend>
<meter>
<optgroup>
<option>
<output>
<progress>
<select>
<textarea>
Тег <meter>
Тег <meter> является датчиком и используется для вывода значения в определенном диапазоне. Например, для отображения использования диска, или процента проголосовавших за определенного кандидата на выборах.
Атрибуты тега <meter>
- value
- Текущее значение в диапазоне. По умолчанию 0.
- min
- Нижняя граница диапазона. По умолчанию 0.
- max
- Верхняя граница диапазона. По умолчанию 1.
- low
- Верхний предел низких значений, т.е. с min до low – низкие значения, с low до high – средние значения. По умолчанию min.
- high
- Нижний предел высоких значений, т.е. с low до high – средние значения, с high до max – высокие значения. По умолчанию max.
- optimum
- Оптимальное значение. По умолчанию (min+max)/2.
Значения всех перечисленных атрибутов могут быть числами с плавающей точкой.
Для тега <meter> также доступны общие атрибуты и атрибуты обработки событий.
Должны выполняться неравенства:
- min ≤ value ≤ max
- min ≤ low ≤ high ≤ max
- min ≤ optimum ≤ max
Браузеры, не отображающие тег <meter> выводят текст из контейнера <meter>...</meter>
<meter value="150" max="736" title="150ГБ из 736ГБ занято"
style="height: 30px; width: 100%">150ГБ из 736ГБ занято</meter>
РЕЗУЛЬТАТ:
Примеры различных вариантов тега <meter> (по умолчанию min=0, max=1)
-
min < value < max
<meter value=".5"></meter>
-
value = max
<meter value="1"></meter>
-
value > max
<meter value="1.5"></meter>
-
value = min
<meter value="0"></meter>
-
value < min
<meter value="-.5"></meter>
-
value < high
<meter value=".5" high=".8"></meter>
-
value = high
<meter value=".8" high=".8"></meter>
-
value > high
<meter value=".9" high=".8"></meter>
-
value < low
<meter value=".15" low=".25"></meter>
-
value = low
<meter value=".25" low=".25"></meter>
-
value > low
<meter value=".5" low=".25"></meter>
-
optimum < low < value < high
<meter value=".5" low=".25" high=".75" optimum=".15"></meter>
-
low < value = optimum < high
<meter value=".5" low=".25" high=".75" optimum=".5"></meter>
-
low < value < high < optimum
<meter value=".5" low=".25" high=".75" optimum=".85"></meter>
-
value < low < high < optimum
<meter value=".2" low=".25" high=".75" optimum=".8"></meter>
-
value > high > low > optimum
<meter value=".8" low=".25" high=".75" optimum=".2"></meter>
Firefox 16+ отображаeт элемент <meter> со следующими значениями стилей:
meter {
-moz-appearance: meterbar;
background: rgba(0, 0, 0, 0) linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%) repeat scroll 0 0;
display: inline-block;
vertical-align: -0.2em;
}
*::-moz-meter-bar {
-moz-appearance: meterchunk;
display: inline-block !important;
float: none !important;
height: 100%;
overflow: visible !important;
position: static !important;
width: 100%;
}
:-moz-meter-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%) repeat scroll 0 0;
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: rgba(0, 0, 0, 0) linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%) repeat scroll 0 0;
}
Chrome 8+, Opera 11+, Safari 6+ отображают элемент <meter> со следующими значениями стилей:
meter {
-webkit-appearance: meter;
box-sizing: border-box;
display: inline-block;
height: 1em;
width: 5em;
vertical-align: -0.2em;
}
meter::-webkit-meter-inner-element {
-webkit-appearance: inherit;
box-sizing: inherit;
height: 100%;
width: 100%;
}
meter::-webkit-meter-bar {
background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#ddd), color-stop(0.20, #eee), color-stop(0.45, #ccc), color-stop(0.55, #ccc));
height: 100%;
width: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#ad7), to(#ad7), color-stop(0.20, #cea), color-stop(0.45, #7a3), color-stop(0.55, #7a3));
height: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-suboptimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#fe7), to(#fe7), color-stop(0.20, #ffc), color-stop(0.45, #db3), color-stop(0.55, #db3));
height: 100%;
box-sizing: border-box;
}
meter::-webkit-meter-even-less-good-value {
background: -webkit-gradient(linear, left top, left bottom, from(#f77), to(#f77), color-stop(0.20, #fcc), color-stop(0.45, #d44), color-stop(0.55, #d44));
height: 100%;
box-sizing: border-box;
}
Элементу <meter>, как и любому другому элементу, можно задать ширину и высоту. Но гораздо интереснее то, что есть возможность менять и фон (Opera 11 и 12 не допускает изменение цвета датчика).
<style type="text/css">
meter.my_meter {
margin-top: 10px;
width: 100%;
height: 25px;
background: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter.my_meter::-webkit-meter-bar {
background-color: #e5e5e5;
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: -webkit-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
meter.my_meter::-webkit-meter-optimum-value {
background: -webkit-gradient(linear, left top, left bottom, from(#bdf), to(#bdf), color-stop(0.20, #def), color-stop(0.45, #7ac), color-stop(0.55, #7ac));
background: -webkit-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}
meter.my_meter:-moz-meter-optimum::-moz-meter-bar {
background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}
</style>
<meter class="my_meter" value=".5"></meter>
РЕЗУЛЬТАТ:
Для отображения тега <meter> в старых браузерах надо имитировать внешний вид датчика, используя блоки <div> внутри тега <meter>. Браузеры, поддерживающие элемент <meter>, будут игнорировать содержимое тега. Браузеры, не поддерживающие элемент <meter>, будут игнорировать сам тег, а отображать его содержимое.
<style type="text/css">
.ie_meter {
width: 100%;
height: 25px;
background: #e5e5e5;
background: -moz-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: -webkit-gradient(linear, left top, right bottom, from(#e5e5e5), to(#e5e5e5), color-stop(0.33, #e5e5e5), color-stop(0.33, #cecece), color-stop(0.66, #cecece), color-stop(0.66, #e5e5e5));
background: -webkit-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: -o-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: -ms-linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background: linear-gradient(135deg, #e5e5e5, #e5e5e5 33%, #cecece 33%, #cecece 66%, #e5e5e5 66%);
background-size: 50px 25px;
}
.ie_meter > div {
height: inherit;
background: #7ac;
background: -moz-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
background: -webkit-gradient(linear, left top, left bottom, from(#bdf), to(#bdf), color-stop(0.20, #def), color-stop(0.45, #7ac), color-stop(0.55, #7ac));
background: -webkit-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
background: -o-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
background: -ms-linear-gradient(top, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
background: linear-gradient(to bottom, #bdf, #bdf, #def 20%, #7ac 45%, #7ac 55%);
}
</style>
<meter class="my_meter" value=".5">
<div class="ie_meter">
<div style="width: 50%;"></div>
</div>
</meter>
РЕЗУЛЬТАТ:
.
Прокомментировать/Отблагодарить
Популярное:
- Анализ сайта
- Проверка email
- Чей IP-адрес?
- Чей домен?
- Где телефон?
- Генератор Sitemap
- Примеры Ajax
- Примеры PHP
- Примеры Javascript
- Примеры HTML, CSS
- Бесплатные прокси
- GEO-сервисы
- Сайт в ТОП (SEO)
- Полезные ссылки
- Генератор Robots.txt
Содержание:
- HTML
- Что такое HTML
- <!DOCTYPE>
- Мета теги в <head>
- Тег <base>
- Текст в html
- HTML списки
- Ссылки
- Картинки на сайте
- Таблицы
- Фреймы
- Формы
- DHTML
- Музыка
- Видео
- Карты изображений
- SVG карты
- Графика в HTML
- SSI .shtml
- Таблица цветов RGB
- Правильное
сочетание цветов - Таблица
«безопасных»
цветов - Таблица символов
- Примеры HTML, CSS
- CSS
- JavaScript
- PHP + MySQL
- Введение в PHP
- Основы языка
- Использование
массивов - $_server
- Создание функций
- Строки
- Функции работы
со строками - Объектное
программирование - Формы
- Файлы
- Загрузка файлов
на сервер - MySQL
- Cookie
- htaccess
- Безопасность
- Сессии
- Отправка почты
- Кэширование
- Дата, время
- Математические
функции - Дополнительные
возможности - Регулярные
выражения - Библиотека Curl
- IMAP, POP3, NNTP
- Оптимизация
- Примеры скриптов
- XML + XSLT
- AJAX
- Графика CorelDRAW
- SEO
- Сервисы
- Разное
- Движки сайтов (CMS)
- Регистрация
доменов и хостинг - Заработок для
web-мастеров - Хостинг
- Настройка DNS
- ADSL
- RSS
- ActiveX и HTML
- Паролирование
страницы - HTTP коды
- HTTP протокол
- HTTP заголовки
- Прячем ссылки
- ☠ Черный список
сайтов - ☭ Заработок
в интернете - Термины и
определения - Продажа доменов
- ✉ Настройки
Яндекс-почты - Кнопки социалок
- ☎ Настроки SIP
в телефоне - Создание
поискового плугина - Сервис
коротких ссылок - Telegram: бот, ссылки
- Шаблоны сайтов
- Друзья
- Задания к л/р
- Примеры
зачетных задач
- Статьи, обзоры
- Новости