Login Register

Menu

The Menu widget models a context menu, otherwise known as a right-click or popup menu, and they also appear in ComboButton and DropDownButton widgets.

MenuItem widgets are the actual items in the menu. The PopupMenuItem is like a MenuItem, but displays a submenu or other widget to the right . A PopupMenuItem always has two child nodes: a tag with the displayed label (usually in a SPAN tag), and a widget to be popped up, typically a dijit.Menu widget.

Example

Right click anywhere in Grey Area
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Menu Demo</title>
    <style type="text/css">
        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
    </style>
    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
</script>
    <script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.Menu");
     </script>
</head>
<body class="tundra">
        <style>
        .myIcon {
           /*  Note: Drupal may add an anchor tag here.  Don't include it in your code */
           background-image:
              url(http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/images/checkmark.gif);
           background-position: -16px 0px;
           width: 16px;
           height: 16px;
        }
        </style>
       
        <div dojoType="dijit.Menu" id="submenu1"
                 contextMenuForWindow="true" style="display: none;">

                <div dojoType="dijit.MenuItem" iconClass="myIcon"
                     onClick="alert('Hello world');">
Enabled Item</div>
                <div dojoType="dijit.PopupMenuItem" id="submenu2">
                    <span>Submenu</span>
                    <div dojoType="dijit.Menu">
                                <div dojoType="dijit.MenuItem"
                                     onClick="alert('Submenu 1!')">
Submenu Item One</div>
                                <div dojoType="dijit.MenuItem"
                                     onClick="alert('Submenu 2!')">
Submenu Item Two</div>
                    </div>
                </div>
        </div>
</body></html>
dijit.Menu
Define a drop down or context (right-click) menu.
Attributes
contextMenuForWindow Boolean
false
if true, right clicking anywhere on the window will cause this context menu to open; if false, must specify targetNodeIds
popupDelay Integer
500
number of milliseconds before hovering (without clicking) causes the popup to automatically open
targetNodeIds String[] Array of dom node ids of nodes to attach to. Fill this with nodeIds upon widget creation and it becomes context menu for those nodes.
Methods
Methods
addChild(/*Widget*/ child, /*Integer?*/ insertIndex) Process the given child widget, inserting its dom node as a child of our dom node
bindDomNode(/*String|DomNode*/ node) attach menu to given node
Widget[] getChildren() returns array of children widgets
removeChild(/*Widget*/ page) removes the passed widget instance from this widget but does not destroy it
unBindDomNode(/*String|DomNode*/ nodeName) detach menu from given node
Extension Points
onClose() callback when this menu is closed
onOpen(/*Event*/ e) Open menu relative to the mouse
dijit.MenuItem
One menu item, usable in a Menu
Attributes
disabled Boolean
false
if true, the menu item is disabled if false, the menu item is enabled. Use setDisabled() to change after creation time.
iconClass String class to apply to div in button to make it display an icon
label String Menu text. Typically specified as innerHTML when declaring a Menu programmatically.
Methods
setDisabled(/*Boolean*/ value) enable or disable this menu item
Extension Points
getParent() returns the parent widget of this widget, assuming the parent implements dijit._Container
onClick() User defined function to handle clicks

dijit.MenuSeparator
A line between two menu items

Accessibility

Keyboard

ActionKey
Open a context menuOn Windows: shift-f10 or the Windows context menu key
On Firefox on the Macintosh: ctrl-space
Navigate menu itemsUp and down arrow keys
Activate a menu itemSpacebar or enter
Open a submenuSpacebar, enter, or right arrow
Close a context menu or submenuEsc or left arrow
Close a context menu and all open submenusTab

Known Issues

When reading a menu item on Firefox 2, JAWS 8 may say "submenu" for an item that does not have a submenu. This will be fixed in Firefox 3.