0

Контексное меню в HTML5

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

Вот, пример.

Начнем с того, что создадим блок и укажем ему ID меню.

<section contextmenu='mymenu'>
    Some text.
</section>

А вот и само меню.

<menu type="context" id="mymenu">
    <menuitem label="Обновить" onclick="window.location.reload();" icon="images/refresh-icon.png"></menuitem>
    <menuitem label="К комментариям" onclick="window.location='#comments';" icon="images/comment_icon.gif"></menuitem>
    <menu label="Поделиться..." icon="/images/share_icon.gif">
    <menuitem label="Twitter" icon="images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>
    <menuitem label="Facebook" icon="images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>

ID меню совпадает со значением атрибута contextmenu блока. У элемента меню могут быть атрибуты label, icon и onclick. Label и icon определяют внешний вид. Onclick, понятно, функционал.

Пока что только Firefox поддерживает данную спецификацию. И, если честно, не похоже, что это жизненно необходимая фишка. Так что другие браузеры, не скоро подтянутся к Firefox’у.

А вот и демо.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *