От автора: Контекстные меню – это не столь известная возможность спецификации HTML5. Они позволяют вам добавлять собственные пункты в меню, которое появляется, когда пользователь нажимает правую кнопку мыши, находясь на странице. Используя JavaScript, вы можете управлять действиями, которые произойдут, если один из этих пунктов меню будет выбран.
В этом посте, вы узнаете, как создавать собственные контекстные меню, используя элементы menu и menuitem.
 |
Перевод выполнила: Валерия ЗаруцкаяМеня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails. |
Поддержка браузеров для HTML5 Контекстных Меню
Контекстные меню на HTML5 на данный момент поддерживаются только в Firefox версии 8 и выше. Эта возможность стала доступной некоторое время назад, но другие браузеры пока не реализовали ее поддержку. Тем не менее, существует полизаполнение, которое добавит поддержку контекстных меню в других браузерах.
Элементы menu и menuitem
Контекстные меню на HTML5 создаются с помощью двух элементов – menu и menuitem. Элемент menu имеет некоторое количество атрибутов, которые отвечают за то, как он будет отображен в браузере.
|
1 |
<menu type="context" id="menu">...</menu> |
Атрибут type используется для того, чтобы обозначить, что мы создаем контекстное меню. Это важно, т.к. элемент menu может использоваться для разметки других типов меню. Обязательно задавайте атрибут id элементу menu, иначе вы не сможете использовать меню на странице (об этом далее). Атрибут label может быть задан вложенным элементам menu, для того чтобы текст отображался в главном контекстном меню. Аналогично, атрибут icon может использоваться для обозначения местонахождения иконки, которая будет показана рядом с текстом во вложенном меню.
Создание элементов меню
Элемент menuitem используется для создания элементов меню. Атрибут label должен содержать текст, который вы хотите показать в меню. Вы также можете по желанию задать атрибут icon вместе с указанием расположением картинки, которая будет показана рядом с текстом из атрибута label.
|
1 |
<menuitem label="Tweet this Page" onclick="doSomething();" icon="/path/to/icon.png"></menuitem> |
Действие, которое будет совершать пункт меню, определяется с помощью JavaScript. Вы можете использовать атрибут onclick, чтобы задать этот JavaScript код непосредственно элементу menuitem. Заметка: Я не большой фанат использования атрибута onclick для определения хэндлеров событий, но я не смог добиться того, чтоб это работало при использовании подхода фонового JavaScript.
Привязка контекстных меню
Когда вы создали контекстное меню, вам нужно привязать его к элементу на странице. Ваше меню будет видно только тогда, когда пользователь нажимает правую кнопку мыши на этом элементе. Вы можете привязать меню, поместив в значение атрибута contextmenu желаемого элемента значение id вашего элемента menu.
|
1 |
<div contextmenu="menu-id">...</div> |
Если вы хотите, чтобы меню появлялось независимо от того, в каком участке страницы пользователь нажал правую кнопку мыши, вы можете привязать меню к тэгу body.
Вложенные меню
Вложенные контекстные меню
Вы можете создавать элементы меню, вложенные одно в другое для более сложных структур меню. Это, в частности, может быть удобно, если вы хотите поместить большое количество пунктов, но не хотите засорять главное контекстное меню.
|
1 2 3 4 5 6 7 8 9 |
<menu type="context" id="menu"> <menuitem label="Действие" onclick="..." icon="icon.png"></menuitem> <!—Вложенное меню --> <menu label="Название вложенного меню" icon="/path/to/icon.png"> <menuitem label="Действие первое" onclick="..."></menuitem> <menuitem label=" Действие второе" onclick="..."></menuitem> <menuitem label=" Действие третье" onclick="..."></menuitem> </menu> </menu> |
Вложенные элементы menu должны включать атрибут label , содержащий текст, который будет показан в родительском меню. Вы также можете задать атрибут icon, со ссылкой на картинку, которая будет показана рядом с текстом пункта меню.
Демо контекстного меню
Контекстное Меню на HTML5
Собрав все вместе, вот демо примера контекстного меню, которое предоставляет возможность поделиться текущей страницей. Здесь мы собираемся использовать простой JavaScript код, который направит пользователя по соответствующей ссылке, когда он кликает по пункту меню.
|
1 2 3 4 5 6 |
<!—Создать меню--> <menu type="context" id="menu"> <menuitem label="Tweet This Page" onclick="window.location='//twitter.com/intent/tweet?text=' + document.title + ' ' + window.location.href;" icon="twitter.png"></menuitem> <menuitem label="Digg This Page" onclick="window.location='//digg.com/submit?url='+window.location;" icon="digg.png"></menuitem> <menuitem label="Email This Page" onclick="window.location='mailto:?body='+window.location;"></menuitem> </menu> |
В этом случае, мы используем стандартный элемент div, в качества объекта для события клика.
|
1 2 |
<!—Целевой элемент, к которому привязано меню--> <div id="target" contextmenu="menu">Right-click here to see the menu.</div> |
Заключение
Хотя я могу вспомнить несколько оправданных примеров использования контекстных меню на HTML5 (управление внутри игры – пауза, рестарт, и т.д.), я беспокоюсь, что возможность вторгаться в интерфейс браузера может эксплуатироваться. Подумайте о наличии возможности реализовать методы управления не через контекстные меню, а другой интерфейс. Мы берем на себя риск засорить контекстное меню и запутать пользователя, если не будем относиться к данному функционалу ответственно.
Что вы думаете о контекстных меню на HTML5? Вы бы хотели, чтоб другие браузеры поторопились реализовать эту возможность или вы озабочены тем, что она может эксплуатироваться? Сообщите нам в комментариях.
Автор: Matt West
Источник: //blog.teamtreehouse.com/
Редакция: Команда webformyself.
