Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 context menus in Firefox 8+

DZone's Guide to

HTML5 context menus in Firefox 8+

· Web Dev Zone ·
Free Resource

Access over 20 APIs and mobile SDKs, up to 250k transactions free with no credit card required

Starting with version 8, Firefox supports HTML5 context menus. This post is a summary of “ HTML5 context menus in Firefox (Screencast and Code)” by Chris Heilmann for Mozilla Hacks.

Example: The following HTML source code defines a section with a context menu. The menu has one item and a sub-menu with two items.

    <section id="noninteractive" contextmenu="imagemenu">
 
      <img src="html5.png" alt="HTML5" id="menudemo">
 
        <menu type="context" id="imagemenu">
          <menuitem label="rotate" onclick="rotate()"
                    icon="arrow_rotate_clockwise.png">
          </menuitem>
          <menu label="share">
            <menuitem label="twitter" onclick="alert('not yet')">
            </menuitem>
            <menuitem label="facebook" onclick="alert('not yet')">
            </menuitem>
          </menu>
        </menu>
    </section>

 

Naturally, you don’t need to rely on inline event handlers, all usual registration methods are available. When the context menu is activated, it looks like this:

 

The article also covers:

  • How to check whether a browser supports context menus.
  • How to dynamically enable/disable menu items depending on what state and app is currently in (active selection etc.): A menu fires a contextmenu event every time it opens.
  • A CSS cursor called context-menu is available to give a visual clue as to where context menus are available.

You can try out context menus on a demo page.

 

Source: http://www.2ality.com/2011/11/ff8-html5-context-menus.html

#1 for location developers in quality, price and choice, switch to HERE.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}