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>
"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
| Action | Key |
|---|---|
| Open a context menu | On Windows: shift-f10 or the Windows context menu key On Firefox on the Macintosh: ctrl-space |
| Navigate menu items | Up and down arrow keys |
| Activate a menu item | Spacebar or enter |
| Open a submenu | Spacebar, enter, or right arrow |
| Close a context menu or submenu | Esc or left arrow |
| Close a context menu and all open submenus | Tab |
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.