Интерактивные элементы

В данном разделе рассмотрим еще несколько тегов, появившихся в спецификации HTML5, обладающие собственной интерактивностью.

<menu>…</menu>- определяет список/меню команд. Тег <menu> используется для контекстного меню, панели инструментов и для включения списка управления формой и команд.

Атрибуты: label - Определяет видимую метку для меню.

type – Определяет то, какой тип меню будет отображен на экране:

• context - контекстное меню с командами, с которыми может взаимодействовать пользователь.

• toolbar - список активных команд.

• list - неупорядоченный список элементов (каждый элемент такого списка создается с помощью тега <li>). Значение list используется по умолчанию.

Пример.

<menu type="toolbar">

<li>

<menu label="Файл ">

<button type="button" onclick="file_new()">Новый...</button>

<button type="button" onclick="file_open()">Открыть...</button>

<button type="button" onclick="file_save()">Сохранить</button>

</menu>

</li>

<li>

<menu label="Edit">

<button type="button" onclick="edit_cut()">Вырезать</button>

<button type="button" onclick="edit_copy()">Скопировать</button>

<button type="button" onclick="edit_paste()">Вставить</button>

</menu>

</li>

</menu>

Результат выполнения данного кода можно видеть на рисунке 3.

Рисунок 3 - Результат использования тега menu

<command> </command>- парный тег, в котором размещают команды для выпадающих списков, кнопок. Теги <command> </command> должны быть размещены внутри <menu> </menu>. Тег создает команду в виде переключателя, флажка или обычной кнопки.

Атрибуты:

checked - Активирует команду, атрибут доступен только если type установлен как radio или checkbox.

disabled - задает, доступна команда или нет.

icon - адрес картинки, которая показывается как команда.

label - название команды.

radiogroup - задает имя группы переключателей. Доступно только если type установлен как radio.

type - определяет тип команды: checkbox, command, radio (по умолчанию - command).

Пример.

<menu>

<command onclick="alert(Откроем страницу на русском ')" label="Выполнить загрузку русской версии">

<command onclick="alert('Откроем страницу на английском ')" label=" Выполнить загрузку английской версии ">

<command onclick="alert(''Откроем страницу на немецком ')" label=" Выполнить загрузку немецкой версии ">

</menu>

details – указывает дополнительную информацию, которую можно скрыть или показать по требованию пользователя. Тег <details> может использоваться для создания интерактивных виджетов, которые пользователь может открывать и закрывать. По умолчанию содержимое тега <details> не отображается, для изменения статуса применяется атрибут open, который указывает, что содержимое тега изначально должно быть показано в развернутом виде. Значения для логического атрибута open можно задавать следующими способами:

<details open>

<details open="open">

<details open="">

summary - заголовок для элемента <details>. HTML тег <summary> определяет видимый заголовок для элемента <details>. По заголовку можно щелкать, чтобы просмотреть либо скрыть информацию. Тег <summary> должен идти первым внутри элемента <details>.

Пример:

<details open="open">

<summary> Тут есть какое-то содержимое! </summary>

<p> Здесь можно разместить полезную информацию, такую, какую захочется!</p>

</details>

Результат выполнения данного кода можно видеть на рисунке 4.

Рисунок 4 - Результат использования тегов details и summary. Слева – информация скрыта, справа - открыта