HTML5 для веб-дизайнеров - Джереми Кит

Тонко сделано, Webkit, тонко.

Рис. 4.05. Mobile Safari показывает разные экранные клавиатуры в зависимости от значения атрибута type

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

Классический пример – ползунок. До сих пор нам приходилось использовать JavaScript для того, чтобы эмулировать этот в каком-то смысле интерактивный элемент. В HTML5 благодаря

можно воспользоваться элементом управления, встроенным в браузер:

Safari и Opera на данный момент поддерживают этот тип элемента ввода, предлагая похожие элементы управления (рис. 4.06).

Рис. 4.06. Тип ввода range в Safari и Opera

По умолчанию элемент ввода принимает значения от нуля до ста. Вы можете поставить свои собственные минимальные и максимальные значения с помощью атрибутов min и max:

Для пользователей Safari и Opera все здорово и прекрасно; другие браузеры просто будут выводить обычное текстовое поле. Это, наверное, нормально, но вы, пожалуй, захотите использовать запасное решение на JavaScript для браузеров, которые не поддерживают

.

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

. Затем вы устанавливаете атрибут на то значение, которое хотите проверить.

После этого вы запрашиваете значение свойства

, и если получаете значение “text”, то вы знаете, что браузер не поддерживает то значение, которое вы установили.

Вот примерный код, хотя я уверен, что вы можете написать и что-то гораздо более элегантное:

Теперь вы можете использовать эту функцию, чтобы удостовериться, что JavaScript-widget будет исполняться только в тех браузерах, которые не поддерживают определенный тип элемента как встроенный:

Встроенный в браузер элемент ввода будет, разумеется, грузиться быстрее, чем решение на JavaScript, которому нужно ждать, пока загрузится вся DOM. Встроенный в браузер элемент управления будет также более доступен для технологий специальных возможностей, чем элемент, который написан на JavaScript, хотя – что весьма странно – элементом

в Safari на данный момент нельзя управлять с клавиатуры!

Встроенный в браузер элемент управления

не показывает пользователю свое внутреннее значение. Вместо этого номер переводится в графическое представление ползунка. Это отлично для определенных типов данных. Другие типы данных предназначены для того, чтобы пользователь мог видеть и выбирать числовое значение. Здесь на помощь приходит :