Контекстное меню в браузере средствами 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
Просмотров: 36658
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 14 Февраля 2013 17:42
    Ruslaner___
    "Но, его применение ограничивается только браузером Firefox." =_= Буду надеяться, что в будущих версиях современных браузерах достаточно скоро появится поддержка данной фичи, ибо она очень интересная.
  • 14 Февраля 2013 19:04
    Xamle
    интересная штука, скорее бы все браузеры поддерживали !!!
  • 14 Февраля 2013 19:26
    Hunter1985
    Весьма удобно, действительно удручает только ишак, так как остальные идут почти в ногу со временем )) хотя 10 вроде веселее
  • 15 Февраля 2013 11:32
    Imperil
    У меня в хроме ничего не показывает
    • 17 Февраля 2013 03:12
      sipayrt
      я так понял, что ты тыкнул демо и, не читая пост, сразу решил отписать коммент? молодец, нашел багу=)
  • 15 Февраля 2013 12:15
    rockettboost
    macos 10.8 chrome и Safari не фурычит
    • 17 Февраля 2013 03:11
      sipayrt
      Очень интересное и полезное свойство HTML5. Но, его применение ограничивается только браузером Firefox.
  • 15 Февраля 2013 13:15
    VindDevil
    хром, не фурычит
    • 17 Февраля 2013 03:10
      sipayrt
      ты пост хоть прочитал?
  • 15 Февраля 2013 16:00
    rubyx
    Не надо тырить картинки! :) Прогресс, пока ещё молодой...
  • 18 Февраля 2013 11:04
    Декстер
    Будем ждать развития)
  • 25 Февраля 2013 21:15
    micha
    куда делась кнопка? облазил весь квадрат. кто стырил кнопку?
  • 3 Марта 2013 06:23
    LuckyJack
    Прикольная штучка. Весьма интересные разработки нас ждут в ближайшем будущем.
  • 13 Марта 2013 10:35
    vladmaxi
    Спасибо за полезный материал!
  • 26 Апреля 2013 23:41
    EugeneDzhumak
    Chromium Версия 25.0.1364.160 Ubuntu 12.10 (25.0.1364.160-0ubuntu0.12.10.1) Не работает прием.
^ Наверх ^