Firefox
Raiting:
2

Context menu in HTML5 came on the market and it looks reasonably well


Somewhere was mentioned that Firefox 8 will support the context menus, which were written in HTML5 language. If we update Firefox to version 8 beta, so we can see how these menus will look like. We can get some additional information from an article "Firefox 8 for developers" and follow its hyperlinks get to the corresponding demo page

image

It is not difficult to see the context menu of the site that is located just above the usual context menu browser and separated by a horizontal separator from it. Context menu of the site may contain individual items and entire submenus; as well it can be decorated with colored icons.

Here is the complete code listing of the demo page:

<!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>

As we can see the content of the menu is in the attributes of a new element menuitem, which is not known to the previous browsers, therefore they are required to ignore it.

Perhaps, with the lapse of time the authors of plugins for the JavaScript libraries (primarily jQuery) will write and adapt some sort of "help" that provides for those browsers, which do not read this sub-standard of HTML5. Alternative option is the JavaScript transformation of the context menu in HTML5 language, which was used in the last few years before this new product.
BumBum 30 november 2011, 20:04
Vote for this post
Bring it to the Main Page
 

Comments

0 wsjoomla December 1, 2011, 12:23
A contextual menu is a new term in HTML. It will definitely change the look of webpage in HTML.

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute