Class idx.widget.Menu


Extends dijit.Menu, idx.widget._MenuOpenOnHoverMixin.
The Menu widget is a substantial extension of dijit.Menu that adds 3 sets of functionality:

  1. It facilitates event routing and functional linkage when used inside an idx.widget.MenuDialog (This is a key part of the infrastructure for implementing "mega menus")
  2. It provides cascade-on-hover behaviour when the menu is used "flat" (one important use of which is when one is placed inside an idx.widget.MenuDialog as part of a "mega menu")
  3. It provides multi-column menu support including keyboard navigation
Although the original motivation for adding these functional extensions to dijit.Menu was to support the creation of "mega menus", items (2) and (3) could have broader applications.

Instances can be supplied as the "popup" parameter for dijit.PopupMenuItem and dijit.PopupMenuBarItem, and will operate as dijit.Menu. Instances can operate as popup menus on arbitrary DOM nodes, or for the whole window, and will operate as dijit.Menu. Instances can be placed "flat" within a layout in the UI, and will operate as dijit.Menu except that cascade-on-hover behaviour is available (controlled by the openOnHover property). Instances can be placed "flat" within an idx.widget.MenuDialog, and can operate as a drop-down menu in combination with the containing dialog (controlled by the menuForDialog property).

When menu items are added to this widget, the "column" property on each item can be used to specify the column in which the item should be placed. Columns will be created as needed to accommodate each new item, and can be styled by CSS.


Defined in: <idx\widget\Menu.js>.

Constructor Summary

Constructor Attributes Constructor Name and Description
 
idx.widget.Menu()
Creates a new idx.widget.Menu

Field Summary

Field Attributes Field Name and Description
 
columnNodes 
An array of the DOM nodes that can be used for styling individual columns in a multi-column menu.
 
idxBaseClass 
Provide an IDX base class to distinguish from Dijit menus in CSS selectors.
 
menuForDialog 
Indicates if this menu should be used by an idx.widget.MenuDialog it is in to provide the primary menu functionality.
 
openOnHover 
If true, this menu / menu bar will open popup menu items when they are hovered over at any time.

Method Summary

Method Attributes Method Name and Description
 
addChild(widget, insertIndex)
Override of standard container addChild() method, to allocate menuitems and separators to specified columns.
 
childSelector(node)
<static>  
idx.widget.Menu.createMessageMenuItem(args)
Create a menu item that represents a single message and which can be inserted into One UI message menus (menus which have the additional CSS class "oneuiMessageMenu").
 
refresh()
Refresh the layout of the menu items in the columns.

Constructor Detail

idx.widget.Menu()

Creates a new idx.widget.Menu 
<div data-dojo-type="idx.widget.MenuDialog">
  <div data-dojo-type="idx.widget.Menu">
    <div data-dojo-type="dijit.MenuItem" onclick="...">
      ...
    </div>
      ...
  </div>
    ...
</div>

Field Detail

{DOMNode[]} columnNodes

An array of the DOM nodes that can be used for styling individual columns in a multi-column menu. The nodes are ('td's), one per column, which are in a table row that implements the multiple columns, and each of which contains a single column table containing the menu items. The column nodes are higher up in the DOM structure than the container nodes, but have a 1 to 1 relationship. They are externalised as they are more suitable for styling the columns than the container nodes.

idxBaseClass

Provide an IDX base class to distinguish from Dijit menus in CSS selectors.

{boolean} menuForDialog

Indicates if this menu should be used by an idx.widget.MenuDialog it is in to provide the primary menu functionality.

{boolean} openOnHover

If true, this menu / menu bar will open popup menu items when they are hovered over at any time. This is in addition to the usual mouse-click and key activations, which continue to work as usual. If false, the menu / menu bar will still open popup menu items on hover when it is "active" (ie, when the user is in the process of interacting with it), but will NOT open popup menu items on hover when the menu is inactive: only mouse-click and key activations work in this case. The default value is true, enabling menus to be activated by hover.
Defined in: <idx\widget\_MenuOpenOnHoverMixin.js>.

Method Detail

addChild(widget, insertIndex)

Override of standard container addChild() method, to allocate menuitems and separators to specified columns.
Parameters:
{dijit._Widget} widget
Menu item, separator or heading to be added to the menu.
{number} insertIndex
Optional position to insert the item into the column in.

childSelector(node)

Parameters:
node

<static> idx.widget.Menu.createMessageMenuItem(args)

Create a menu item that represents a single message and which can be inserted into One UI message menus (menus which have the additional CSS class "oneuiMessageMenu"). 
var menuItem = Menu.createMessageMenuItem({
	type: "error",    // or "warning", "information" or "success"
	content: "Hello, world!",
	timestamp: locale.format(new Date(), { formatLength: "medium", 
	                                       locale: this.lang }),
	messageId: "CAT123456"
});
Parameters:
{Object} args
An object containing some the following fields, which are all optional:
  • type: {string} The type of message. This can be "error", "warning", "information", or "success".
  • content: {string} The message content.
  • messageId: {string} An identifier for the message, displayed alongside the content.
  • timestamp: {string} The date/time that the message was originated, displayed alongside the content.

refresh()

Refresh the layout of the menu items in the columns.