Контекстное меню в браузере средствами HTML5

В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 - contextmenu. Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным.

Для чего может быть предназначен атрибут contextmenu? Он позволяет добавлять различные опции в контекстное меню браузера, которое выводится по нажатию правой кнопки мыши, с помощью всего лишь нескольких строк кода HTML даже тогда, когда Javascript отключен. Хотя на текущий момент такой удобный инструмент доступен только в Firefox.

Вот как он работает:

demosourse

Демонстрация контекстного меню

Действие атрибута

Использовать 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"

^ Наверх ^