Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

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

Скрипты для uCoz 2013-Мар-04 OkJkeee 1.1k 1


В данном уроке мы рассмотрим редко упоминаемую фишку 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.
Источник: не указан
1 комментарий
avatar
1
Хм... в демо не пашет в хроме и в опере ... crazy
avatar