- Главная»
- Уроки»
- HTML и DHTML»
- Контекстное меню в браузере средствами HTML5
- Метки урока:
- меню
- web дизайн
- html
- кодинг
Контекстное меню в браузере средствами HTML5
В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 - contextmenu
. Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным.
Для чего может быть предназначен атрибут contextmenu
? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строк кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.
Вот как он работает:
Использовать contextmenu
гораздо проще, чем может показаться на первый взгляд. Нужно добавить атрибут contextmenu
:
<section contextmenu="my-right-click-menu"> <!-- Здесь располагается любой код --> </section>
Затем создаем меню:
<menu type="context" id="my-right-click-menu"> <!-- Здесь располагаются пункты контекстного меню --> </menu>
Атрибут id
должен соответствовать атрибуту contextmenu
. Таким образом, возможно использовать разные контекстные меню для разных частей страницы.
Затем добавляем пункты меню. Сначала вставляем пункт меню с текстом и иконкой, затем добавляем ссылку для трансляции ткущей страницы в Facebook, а в финале вставляем ссылку для обновления страницы. Получается контекстное меню с тремя пунктами:
<menu type="context" id="my-right-click-menu"> <menuitem label="Не надо тырить картинки" icon="img/forbidden.png"></menuitem> <menuitem label="Facebook" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> <menuitem label="Обновить" onclick="window.location.reload()"></menuitem> </menu>
Также можно создавать подменю:
<menu type="context" id="my-right-click-menu"> <menuitem label="Не надо тырить картинки" icon="img/forbidden.png"></menuitem> <menu label="Социальные сети"> <menuitem label="Facebook" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> <menuitem label="Обновить" onclick="window.location.reload()"></menuitem> </menu>
Очень интересное и полезное свойство HTML5. Но, его применение ограничивается только браузером Firefox.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: speckyboy.com/2013/02/13/quick-tip-the-html5-context-menu-attribute-2/
Перевел: Сергей Фастунов
Урок создан: 14 Февраля 2013
Просмотров: 38161
Правила перепечатки
5 последних уроков рубрики "HTML и DHTML"
-
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
-
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
-
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
-
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
-
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.