Пару раз на Хабрахабре я упоминал ужé ([1], [2]), что Firefox 8 станет поддерживать контекстные меню, написанные на языке HTML5. Именно поэтому, едва мой Firefox по бета-каналу обновился до версии 8 beta, я пошёл пощупать, как эти меню будут выглядеть. Мне достаточно было из статьи «Firefox 8 for developers» по гиперссылкам допрыгать до соответствующей демонстрационной страницы да жмякнуть правой кнопкою мыши — и вот что предстало моим глазам:
Как нетрудно видеть, контекстное меню сайта располагается чуть выше обыкновенного контекстного меню браузера и отделяется от него горизонтальным разделителем. Контекстное меню сайта может содержать отдельные пункты и целые подменю, а также может быть украшено цветными значками.
Вот полный листинг кода демонстрационной страницы:
Как нетрудно видеть, содержательная часть меню находится в атрибутах нового элемента menuitem, который прежним браузерам не известен — и потому они обязаны всецело его игнорировать.
Уверен, что со временем авторы плагинов к ведущим джаваскриптовым библиотекам (прежде всего, видимо, jQuery) сочинят и приспособяткакой-нибудь «костыль», обеспечивающий тем браузерам, которые ещё не понимают этот подраздел стандарта HTML5, альтернативный вариант — джаваскриптовое преобразование контекстного меню на языке HTML5 в те виды наджаваскриптованных контекстных меню, которые употреблялись в последние годы перед этой нынешней новинкою.
Как нетрудно видеть, контекстное меню сайта располагается чуть выше обыкновенного контекстного меню браузера и отделяется от него горизонтальным разделителем. Контекстное меню сайта может содержать отдельные пункты и целые подменю, а также может быть украшено цветными значками.
Вот полный листинг кода демонстрационной страницы:
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>testing menu</title>
<style>
.rotate {
-moz-transform: rotate(90deg);
}
.resize {
-moz-transform: scale(0.7);
}
</style>
</head><body><div contextmenu="supermenu">
<h1>Yo. Look at the source code.</h1>
<img src="http://people.mozilla.com/~prouget/bugs/context-menu-test/b.gif">
</div>
<menu type="context" id="supermenu">
<menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
<menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
<menu label="share">
<menuitem label="twitter" onclick="alert('foo')"></menuitem>
<menuitem label="facebook" onclick="alert('bar')"></menuitem>
</menu>
</menu>
<script>
function rotate() { document.querySelector("img").classList.toggle("rotate"); }
function resize() { document.querySelector("img").classList.toggle("resize"); }
</script>
<style>@import url("http://paulrouget.com/style/pure.css")</style>
</body></html>
Как нетрудно видеть, содержательная часть меню находится в атрибутах нового элемента menuitem, который прежним браузерам не известен — и потому они обязаны всецело его игнорировать.
Уверен, что со временем авторы плагинов к ведущим джаваскриптовым библиотекам (прежде всего, видимо, jQuery) сочинят и приспособят