Главная страница   /   15.5. Вставка представлений числовых значений (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

15.5. Вставка представлений числовых значений

Есть два элемента, которые являются новыми в 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, дифференцируют только значения, которые слишком малы или слишком велики, как это показано на рисунке.