TrackBar HTML5 и его использование

Трекбар — привычный элемент управления в операционных системах, но в веб-интерфейсе его встретишь редко, так как встроенной возможности для создания этого элемента в HTML4 не было. Существуют JavaScript-библиотеки, при помощи которых можно легко создавать трекбар на веб-странице. Потребность в этих библиотеках, однако, скоро отпадёт, так как, используя HTML5, этот элемент создаётся очень легко.

<input type=”range” />

Для того, чтобы указать максимальное (минимальное) значение, которое может принимать трекбар используются атрибут max (min). Если эти атрибуты не указаны, то по умолчанию min=0, max=100. Значение (положение бегунка) по умолчанию указывается в атрибуте value. Если он не указан, то бегунок установлен ровно посередине.

<input type="range" min="0" max="300" value="10" />

Как и любой другой интерактивный элемент на страничке, трекбар «мёртв», если не использовать смежные с HTML технологии. Рассмотрим пример взаимодействия этого элемента с PHP и JavaScript.

PHP

Если трекбар находится в форме, которая отправляется на сервер, то с ним можно работать так же, как и с любым другим полем формы:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TrackBar</title>
</head>
 
	<body>
		<?php
			if(isset($_POST['go'])) echo $_POST['trackbar'];
		?>
		<form method="POST" action="index.php">
			<input type="range" name="trackbar" />
			<input type="submit" value="ok" name="go" />
		</form>
	</body>
</html>

JavaScript

В JavaScript есть обработчик события onchange. Если повесить его на трекбар, то он будет срабатывать каждый раз, когда положение бегунка и, соответственно, значение атрибута value, будет меняться.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TrackBar</title>
<script type="text/javascript">
	function onChangeTrackBar() {
document.getElementById('trackBarValue').innerHTML = document.getElementById('trackbar').value;
	}
</script>
</head>
	<body>
		<input type="range" id="trackbar" onchange="onChangeTrackBar()" />
		Value: <span id="trackBarValue">50</span>
	</body>
</html>

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

Шагайте в ногу с современными веб-технологиями, ведь за ними будущее!

  • Автор, а у вас никто записи не тырит? А то у меня заколебали уже — копируют и копируют. И главное, что даже ссылку никто не удосужится поставить.

  • neolicense, пока не встречал. А что, видели совсем похожие?

  • Это написано для посвящённых, а им это надо? Вот я программист и не блондинка, HTML использую, но …. ничего не поняла. Извини, может напишешь?

    • Пьерро, что именно Вам не понятно?

  • Что такое «событие onchange», как его обработчик повесить на трекбар и просто, если я пишу все записи на HTML, пользуясь своими заготовками, нужен мне этот трек-бар и как его практически установить?

  • Pierrro, не «событие», а «обработчик события». Вешается он просто. К тэгу intput добавляется ещё один атрибут onchange. В его значение пишется JavaScript-код, обычно вызов какой-то функции. Этот код будет выполнятся каждый раз, когда бегунок будет передвинут.

    Если Ваши записи на чистом HTML, то использовать трекбар не имеет смысла. Этот элемент будет «мёртв» без js или php.

    Практически установить его можно просто вставив в HTML-код строку

    <input type=”range” />

    Ещё стоит помнить, что этот элемент не поддерживают старые браузеры.

  • А, onchange — обработчик события. Я не умею писать в HTML интерактивные элементы. А как подключить js и php?

    • Pierrro , js-код добавляется на html-страничку либо заключённый в тегах

      <script type="text/javascript"></script>

      , либо подгружается из внешнего файла. Для того, чтобы подключить js-скрипт, распаложенный во внешнем файле необходимо использовать ту же пару тегов с указанием пути к скрипту в атрибуте src. Вот так, например

       <script type="text/javascript" src="script.js"></script>

      Что касается php, то код написанный на этом языке, не подключается к страничке. Он может её генирировать и обрабатывать запросы, которые поступают от неё на сервер.

  • Спасибо, Правдивый Кодер. Не знаю, могу ли я тебя попросить прислать мне программку на JS для приёма ответа из трек-бара (?) в интерактивном режиме.

  • Pierrro, отправил на почту примеры использования. Для того чтобы они работали используй оперу или гугл хром последних версий. Даже firefox шестой чего-то не хочет по-человечески отображать трекбары.

  • А можно как-то этот трекбар продлить, например, на пол страницы?

    • Dmitry, вы можете задавать ему стили, как любому другому элементу html.

      • действительно. Спасибо за подсказку.

  • Глафира

    Антон, я Ваша большая фанатка! Почему так мало публикуетесь?