Контекстное меню в браузере средствами 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.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/NFM1U6QTnWk/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Контекстное меню в браузере средствами HTML5 | | 2013-02-15 15:13:12 | | Статьи Web-мастеру | | В данном уроке мы рассмотрим редко упоминаемую фишку HTML5 - contextmenu. Может быть, вы никогда раньше не слышали про такое меню, но в некоторых ситуациях оно может оказаться чрезвычайно полезным | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: