Class idx.widget.MenuDialog
Extends
dijit.TooltipDialog, idx.widget._EventTriggerMixin.
The MenuDialog widget is the main container for rich mega-menu
content. It extends dijit.TooltipDialog and adds the necessary
functionality to enable the resulting popup to act like a menu, and integrate
with the rest of the existing dijit menu framework. This results in a
widget that
facilitates the creation of menus with arbitrary dialog content.
Instances can be supplied as the "popup" parameter for dijit.PopupMenuItem and dijit.PopupMenuBarItem, and will work "as expected". Instances can also operate as popup menus on arbitrary DOM nodes, or for the whole window.
Instances can display with a "shark fin" connector to identify the initiating element or with a thinner border, no shark fin and abutting the initiating element.
Instances behave as content panes, and HTML and dijits may be laid out within them. If a menu with "menuForDialog" set to true is included within the layout, the menu dialog will operate as a drop-down menu in combination with the contained menu.
Defined in: <idx\widget\MenuDialog.js>.
Constructor Summary
Constructor Attributes | Constructor Name and Description |
---|---|
Creates a new idx.widget.MenuDialog
|
Field Summary
Field Attributes | Field Name and Description |
---|---|
If true, hover will trigger popup whenever the menu dialog is
bound to a DOM node (via bindToDomNode).
|
|
If true, a left mouse click (or tap on a touch interface) will
trigger popup whenever the menu dialog is bound to a DOM node
(via bindDomNode).
|
|
Ordered list of positions to try placing the popup at whenever the
menu dialog is bound to a DOM node (via bindToDomNode).
|
|
An array of DOM node ids to which the menu dialog should be
bound during widget initialisation.
|
|
If true, the menu will show a "shark-fin" connector linking the
opened popup dialog to the initiating DOM element or menu item.
|
Method Summary
Method Attributes | Method Name and Description |
---|---|
bindDomNode(node, params)
Attach the MenuDialog to the specified trigger node.
|
|
close()
Closes the MenuDialog.
|
|
focus()
|
|
onBlur()
An attach point that is called when the MenuDialog loses focus.
|
|
onCancel()
An attach point for the parent menu to listen for the MenuDialog being
cancelled.
|
|
onClose()
An attach point that is called when the MenuDialog is closed.
|
|
An attach point for the parent menu to listen for menu items being
executed.
|
|
onOpen(pos)
An attach point that is called when the MenuDialog is opened.
|
|
open(args)
Opens the MenuDialog at the specified position.
|
|
unBindDomNode(nodeName)
Detach menu dialog from given DOM node.
|
Constructor Detail
idx.widget.MenuDialog()
<div data-dojo-type="idx.widget.MenuBar"> <div data-dojo-type="dijit.PopupMenuBarItem"> <span>Menu #1</span> <div data-dojo-type="idx.widget.MenuDialog"> <!-- Arbitrary mega menu content --> </div> </div> </div>
Field Detail
{boolean} hoverToOpen
{boolean} leftClickToOpen
{string[]} popupPosition
- before: places drop down to the left of the anchor node/widget, or to the right in RTL mode
- after: places drop down to the right of the anchor node/widget, or to the right in RTL mode
- above: drop down goes above anchor node/widget
- above-alt: same as above except right sides aligned instead of left
- below: drop down goes below anchor node/widget
- below-alt: same as below except right sides aligned instead of left
{DOMNode[]} targetNodeIds
{boolean} useConnector
Method Detail
bindDomNode(node, params)
- Parameters:
- {string|DOMNode} node
- The node to be used to trigger the MenuDialog to pop-up.
- {Object} params
- An object that can contain properties that override the popupPosition, useConnector, leftClickToOpen, and hoverToOpen properties of the MenuDialog on a per node attachment basis.
close()
focus()
onBlur()
onCancel()
onClose()
onExecute()
onOpen(pos)
- Parameters:
- pos
open(args)
- Parameters:
- {Object} args
- An object containing some the following fields,
which are all optional but at least one of 'around' and 'coords'
should be supplied:
- around: A DOM node that the popup should be placed around.
- coords: A position (with fields x and y) containing coordinates that the popup should be placed at.
-
position: Ordered list of positions to try placing the popup at.
The first position which allows the popup to be fully visible
within the viewport will be used, or the best available option.
Possible values are:
- before: places drop down to the left of the around node/coords, or to the right in RTL mode
- after: places drop down to the right of the around node/coords, or to the right in RTL mode
- above: drop down goes above around node/coords
- above-alt: same as above except right sides aligned instead of left
- below: drop down goes below around node/coords
- below-alt: same as below except right sides aligned instead of left
- useConnector: If true, a shark-fin connector is shown linking the popup to the around node/coords. If this field is omitted the current value of the widget useConnector property is used.
postMixInProperties()
unBindDomNode(nodeName)
- Parameters:
- {string|DOMNode} nodeName
- The DOM node to dissociate the MenuDialog from.