Контекстное меню в браузере средствами HTML5
В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 - contextmenu. Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным.
Для чего может быть предназначен атрибут contextmenu? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строки кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.
Вот как он работает:
Использовать contextmenu гораздо проще, чем может показаться на первый взгляд. Нужно добавить атрибут contextmenu:
Код
<section contextmenu="my-right-click-menu">
<!--
Здесь располагается любой код
-->
</section>
<!--
Здесь располагается любой код
-->
</section>
Затем создаем меню:
Код
<menu type="context" id="my-right-click-menu">
<!--
Здесь располагаются пункты контекстного меню
-->
</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>
<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>
<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.
Источник: не указан
