Вставка представлений числовых значений
Есть два элемента, которые являются новыми в HTML5, и они позволяют вставлять в ваши документы представления числовых значений.
Представление прогресса
Элемент progress может быть использован для обозначения постепенного завершения задачи. В таблице 15-12 показан элемент progress.
Таблица 15-12: Элемент progress| Элемент | progress |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовый контент |
| Локальные атрибуты | value, max, form |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | Нет |
Атрибут value определяет текущий прогресс, который находится на шкале от нуля до значения атрибута max. Если атрибут max опущен, шкала находится между нулем и 1. Прогресс выражается при помощи чисел с плавающей точкой, например, для 30% используется 0,3.
В листинге 15-12 показан элемент progress и несколько кнопок. Нажатие кнопки обновляет значение, отображаемое элементом progress. Я объединил кнопки и элемент progress, используя немного простого JavaScript. Я опишу методы, которые я использую, в части IV этой книги.
Листинг 15-12: Использование элемента progress<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<progress id="myprogress" value="10" max="100"></progress>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var progress = document.getElementById('myprogress');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function (e) {
progress.value = e.target.value;
};
}
</script>
</body>
</html>
На рисунке 15-9 показано, как используется элемент progress для отображения различных значений.
Рисунок 15-9: Использование элемента progress
Показ предельных значений
Элемент meter показывает значение, отображаемое в контексте, в диапазоне возможных значений. В таблице 15-13 представлен этот элемент.
Таблица 15-13: Элемент meter| Элемент | meter |
| Тип элемента | Фразовый |
| Разрешенные родительские элементы | Любой элемент, который может содержать фразовые элементы |
| Локальные атрибуты | value, min, max, low, high, optimum, form |
| Содержание | Фразовый контент |
| Стиль тегов | Открывающий и закрывающий теги |
| Новый в HTML5 | Да |
| Изменения в HTML5 | N/A |
| Соглашение по стилям | Нет |
Атрибуты min и max устанавливают границы диапазона возможных значений. Они могут быть выражены при помощи чисел с плавающей точкой. Отображение элемента meter можно разбить на три сегмента: слишком мало, слишком много и правильно. Атрибут low задает значение, ниже которого значение считается слишком малым, а атрибут high задает значение, выше которого значение считается слишком большим. Атрибут optimum определяет "как раз нужное" значение. В листинге 15-13 показано, как эти атрибуты применяются к элементу meter.
Листинг 15-13: Использование элемента meter<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<meter id="mymeter" value="90"
min="10" max="100" low="40" high="80" optimum="60"></meter>
<p>
<button type="button" value="30">30</button>
<button type="button" value="60">60</button>
<button type="button" value="90">90</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var meter = document.getElementById('mymeter');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function (e) {
meter.value = e.target.value;
};
}
</script>
</body>
</html>
В этом примере элементы button устанавливают атрибут value элемента meter на значения, которые являются слишком маленьким, слишком большим и оптимальным. Вы можете увидеть, как это выглядит в браузере, на рисунке 15-10.
Рисунок 15-10: Использование элемента meter
Атрибут optimum не имеет никакого визуального эффекта при отображении элемента meter, как это реализуется в настоящее время. Браузеры, которые поддерживают элемент meter, дифференцируют только значения, которые слишком малы или слишком велики, как это показано на рисунке.
