Close [x]

DropdownDialog widget

Edit this page on GitHub

Overview

Magento dropdownDialog widget is a customization of the standard jQuery UI Dialog. As extra functionality it implements the following:

  • triggering event for opening
  • delaying to automatically close the drop-down on mouse out
  • clicking outside the area closes the drop-down

The dropdownDialog widget source is located in lib/web/mage/dropdown.js.

Initialize the dropdownDialog widget

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

Options

Magento customized Dialog widget has default Query UI Dialog widget options, plus several custom options:

Description of each option follows.

autoPosition

Specifies if the position option is used for calculating the drop-down offset.

If set to false (default value), then position rules are not used and the drop-down is positioned under the element for which the widget is initialized. Otherwise the drop-down offset is calculated using the position rules.

Type: Boolean

Default value: false

autoSize

Specifies if the size of the drop-down is defined by widget options (height, width, minHeight, minWidth).

Type: Boolean

Default value: false

closeOnMouseLeave

Specifies if the drop-down is closed when mouse pointer is moved out.

Type: Boolean

Default value: true

closeOnClickOutside

Specifies if the drop-down is closed on mouse click outside the drop-down.

Type: Boolean

Default value: true

createTitleBar

Defines if the title option is used for displaying the title bar.

Type: Boolean

Default value: false

defaultDialogClass

Class that is added to the drop-down, when it gets initialized.

Type: String

Default value: mage-dropdown-dialog

dialogContentClass

Class that is added/removed on drop-down content when it gets opened/closed.

Type: String

Default value: null

parentClass

Class that is added/removed for the dropdown parent, when the drop-down gets opened/closed.

Type: String

Default value: null

triggerClass

Class that is added/removed on the trigger element when the drop-down gets opened/closed.

Type: String

Default value: null

triggerEvent

Name of the event that triggers the open() function for drop-down.

Type: String

Default value: click

triggerTarget

Element that triggers the drop-down.

Type:

  • String
  • jQuery object

Default value: null

timeout

The number of milliseconds until the dropdown is closed after mouse pointer moves out.

Type: Number

Default value: 500

Methods

Magento customized dropdownDialog widget has default Query UI Dialog widget methods, though some of them are customized.

Customized public methods:

open()

Beside default functionality, this method calls the _mouseLeave() and _mouseEnter() functions, adds classes on trigger and drop-down parent, and binds the close on mouse click outside drop-down to the <body> element.

close()

Beside default functionality, this method removes the classes from trigger and drop-down parent and clears the timeout if the latter exists.