Menu class

The Menu.AlignContextMenuEnum type defines the alignment to show the context-menu/shortcut-menu. The AlignContextMenu property specifies the alignment to show the context-menu/shortcut-menu.

Each AlignContextMenuEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "left,top" is equivalent to the numeric value 0, or to the combination of enumeration constants exLeftAlign | exTopAlign.

The Menu.ArrangeItemsEnum type specifies the way the items of the control are arranged. The ArrangeItemsAs property specifies how the items are arranged on the control (top-level menu).

Each ArrangeItemsEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "horizontal,wrap,center" is equivalent to the numeric value 1281, or to the combination of enumeration constants exArrangeItemsHorizontal | exArrangeItemsWrap | exArrangeItemsAlignCenter.

The Menu.CloseOnClickEnum type defines whether the float-menu is closed once an item of specified type is clicked. The [close] option of the Items property supports flags of this type. The CloseOnClick property specifies whether the float-menu is closed once an item of specified type is clicked.

Each CloseOnClickEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive string containing the name that matches the enumeration constant.

For instance, the string "any" is equivalent to the numeric value -1, or to the enumeration constant exCloseOnAny.

The Menu.DisplayTypeEnum type defines the type of items the control can display. The [typ] option of the Items property supports flags of this type.

Each DisplayTypeEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constants.

For instance, the string "radio" is equivalent to the numeric value 2, or to the enumeration constant exRadio.

The Menu.FlatEnum type specifies whether the menu's flat bar is shown or visible. The menu's flat bar can be displayed only if the items are vertically arranged. The CriFlat property indicates whether the menu's flat bar is shown or hidden.

Each FlatEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing the name that matches the enumeration constant.

For instance, the string "alwaysflat" is equivalent to the numeric value 2, or to the enumeration constant exAlwaysFlat.

The Menu.GroupPopupEnum type specifies how the sub-items of a grouped-item are arranged. The [group] option of the Items property supports flags of this type.

Each GroupPopupEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "group,samewidth,vertical" is equivalent to the numeric value 273, or to the combination of enumeration constants exGroup | exSameWidth | exGroupVertical.

The Menu.ShowAsButtonEnum type defines the type of buttons an item supports. The [button] option of the Items property supports flags of this type.

Each ShowAsButtonEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A combination of one or more compatible enumeration constants, separated by the | operator.
• A case-insensitive partial string containing one or more comma-separated names that match the enumeration constants.

For instance, the string "button,selectlist" is equivalent to the numeric value 513, or to the combination of enumeration constants exButton | exSelectList.

The Menu.ShowCheckedAsSelectedEnum type defines how an item that has a check-box/radio button is displayed. The [show] option of the Items property supports flags of this type.

Each ShowCheckedAsSelectedEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constants.

For instance, the string "item" is equivalent to the numeric value 1, or to the enumeration constant exItemHighlight.

The Menu.ShowPopupAlignEnum type defines the alignment the of the sub-menu/popup/float relative to its parent item. The [popupalign] option of the Items property supports flags of this type.

Each ShowPopupAlignEnum property can be specified in one of the following ways:

• A numeric value.
• A single enumeration constant.
• A case-insensitive partial string containing a name that matches the enumeration constants.

For instance, the string "right" is equivalent to the numeric value 2, or to the enumeration constant exRight.

The type field holds the full name of the object, since constructor.name can differ in minimized or obfuscated code. This field is never altered by the control itself, so it can be reliably used to verify the object's type. It is particularly useful when multiple versions of a control exist or when you need to check the type without depending on constructor.name, which may be inconsistent in some scenarios, such as minified code. The Menu.type member always returns "Menu"

console.log(exontrol.Menu.type); // logs "Menu"

The version field defines the version of the control. Each release of the control has a different version number, so you can use this field to check the control's version and ensure that it supports the features you want to use. The version field is especially useful when you have multiple versions of the control, or when you want to check the version of the control without relying on other properties or methods that may differ between versions. The current version is 5.2

console.log(exontrol.Menu.version); // displays the version of the control, for instance "5.2"

The Menu.timeoutOC field indicates the time in ms, the Open/Close method opens/closes the float-menu(s) Specifies the time in ms, the Open/Close method opens/closes the float-menu(s). If negative the open/close is called immediately, if 0 the open/close method is invoked asap, else it indicates the time to wait until the open/close occurs.

The Align property horizontally aligns the item's caption. This property affects all items that do not have a custom alignment explicitly defined. You can use the <c> or <r> ex-HTML tags to align portions of the caption inside the item when the alignment is set to -1 (full-fit). The Align property provides a way to retrieve the current default alignment setting for item captions, allowing you to understand how text will be displayed within the menu items.

The Align property can be any of the following values:

• -1 {number}, specifies that the item's caption full-fits the item's background. You can use the <c> or <r> ex-HTML tags to align portions of caption inside the item
• 0 {number}, indicates that the caption is left-aligned
• +1 {number}, specifies that the caption is centered
• +2 {number}, specifies that the caption is right-aligned

2 {number}, right aligns the item's caption

The AlignClient property aligns a parent item's client area with the client areas of its sub-items when a float-menu is displayed. When set to true, the parent and its sub-items are vertically aligned, creating a consistent and organized appearance. When set to false, the alignment is not enforced, allowing a more flexible layout. This property helps you control the visual structure of the menu and improve its overall usability.

false {boolean}, specifies that the item and its sub-items are not vertically aligned (when a popup is opened)
true {boolean}, specifies that the item and its sub-items are vertically aligned (when a popup is opened)

The AlignContextMenu property defines the horizontal and vertical position of a context or shortcut menu relative to specified x and y coordinates. By configuring this property, you control how the menu appears on the screen in relation to those coordinates. Horizontal alignment options include left, center, and right, while vertical options include top, center, and bottom. This flexibility ensures that context or shortcut menus are displayed in a way that fits your application's layout and provides a more intuitive and visually consistent user experience.

The Menu.AlignContextMenuEnum type defines the following flags:

• exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter
• exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter
• exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter
• exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter
• exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter
• exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter

The AlignContextMenu property has effect only, if the control is opened as a context-menu, using the Open() method.

0 or Menu.AlignContextMenuEnum.exLeftAlign | Menu.AlignContextMenuEnum.exTopAlign {number}, the context-menu is shown aligned to x and y properties
20 or Menu.AlignContextMenuEnum.exCenterAlign | Menu.AlignContextMenuEnum.exVCenterAlign {number}, centers the context-menu relative to x and y properties
32 or Menu.AlignContextMenuEnum.exLeftAlign | Menu.AlignContextMenuEnum.exBottomAlign {number}, opens the context-menu right to the x and y properties

The AllowToggleRadio property controls whether radio items can be toggled off. When set to false, a checked radio item remains selected when clicked, ensuring that one option is always active. When set to true, clicking a checked radio item will uncheck it, allowing users to deselect options. This property allows you to define the behavior of radio items to suit your application's requirements and improve user interaction.

false {boolean}, no radio-item toggles its state (once the user clicks a checked radio-item, it stays checked (state on 1))
true {number}, any radio-item toggles its state (once the user clicks a checked radio-item, it gets unchecked (state on 0))

The ArrSize property defines the size (width and height) of an item's arrow. The arrow is displayed only for popup items or for items that contain sub-items or child items. A popup item in the Items property is defined as parent(child1, child2, …), where each child represents a sub-item or another popup, and children are delimited by parentheses (). The ArrSize property determines the area allocated for the arrow, ensuring it is rendered correctly within the menu item. By setting ArrSize, you can control the arrow's appearance and its alignment relative to the item's text. By default, ArrSize is 6, which means the arrow is displayed within a 6×6 pixel rectangle inside the item.

0 {number}, indicates that no arrow is shown
6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels

The ArrangeItemsAs property defines how the items are arranged on the control's top-level menu. It accepts one or more flags from the ArrangeItemsEnum, allowing you to customize the layout of the items. Each flag in ArrangeItemsEnum defines a specific arrangement behavior, such as aligning items horizontally, vertically, or in a flow layout. By combining multiple flags, you can control several aspects of the item arrangement at once, ensuring that the menu items are displayed according to your desired layout and order.

The Menu.ArrangeItemsEnum type supports the following flags:

• exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
• exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
• exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
• exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
• exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
• exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
• exArrangeItemsAlignCenter (0x400), centers the items on each row/column
• exArrangeItemsAlignReverse (0x800), reverses the alignment of the items

561 or Menu.ArrangeItemsEnum.exArrangeItemsHideTopArrow | Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | Menu.ArrangeItemsEnum.exArrangeItemsScroll | Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges horizontally all items of top-level menu

The BtnArrSize property defines the size (width and height) of a button's arrow. The arrow is displayed only for items of [button] type that contain sub-items or child items. By setting the BtnArrSize property, you can control the appearance of the arrow associated with buttons in menu items, ensuring it is rendered correctly and visually aligned with the button's content. This property defines the area allocated for the button's arrow, allowing you to customize its size according to your design preferences. By default, BtnArrSize is 6, which means the arrow is displayed within a 6×6 pixel rectangle inside the item.

0 {number}, indicates that no arrow is shown for an item of button type ([button])
6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels

The BtnPad property defines the button's padding (space between the button border and the item content). It can be set as a single numeric value, applying the same padding to both horizontal and vertical dimensions, or as a pair "x,y" or [x,y] to specify horizontal and vertical padding separately. The Pad property defines the item's padding, which is the space between the menu border and the item's content. The ItemsPad property defines the padding of the sub-items section of an item, controlling the space between the menu border and the content of the sub-items. By adjusting the BtnPad property, you can control the spacing around buttons within menu items, improving the visual organization and readability of interactive elements in your menu.

4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
"8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
[8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels

The CloseOnClick property defines which types of items will close the float-menu when clicked. By configuring this property, you can control how the menu responds to user interactions, making it more intuitive and user-friendly. Depending on the flags set in CloseOnClick, the menu can be configured to close when users click on enabled items, disabled items, separators, buttons, check-boxes, radio buttons, or any combination of these. This flexibility ensures that the menu behaves in a way that best fits your application's requirements and enhances overall usability.

The Menu.CloseOnClickEnum type defines the following flags:

• exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated
• exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item
• exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item
• exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type
• exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type
• exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type
• exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type
• exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere

0 or Menu.CloseOnClickEnum.exCloseOnDefault {number}, specifies that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated
-1 or Menu.CloseOnClickEnum.exCloseOnAny {number}, specifies that the float-menu is closed once the user clicks any type of item anywhere

The CriAlign property specifies whether the check-box/radio-button or the item's image are vertically aligned. When the CriAlign property is set to true, the check-box/radio-button or the item's image are vertically aligned, meaning they are centered vertically within the menu item. This can enhance the visual appearance of the menu by ensuring that these elements are properly aligned with the text and other content of the item. When CriAlign is set to false, the check-box/radio-button or the item's image may not be vertically aligned, which could result in a less polished look for the menu items. The CriAlign property has effect, if the control's CriFlat property is exNormal.

false {boolean}, check-box/radio-button or the item's image is not vertically aligned
true {boolean}, check-box/radio-button or the item's image is vertically aligned

The CriFlat property indicates whether the menu's flat bar is shown or hidden. The Menu.FlatEnum type supports the following values:

• exNormal (0), indicates that the menu's flat bar is not shown
• exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image
• exAlwaysFlat (2), indicates that the menu's flat bar is always visible

2 or Menu.FlatEnum.exAlwaysFlat {number}, defines a flat-menu

The CriPad property defines the padding to apply to a check-box/radio-button or the item's image. This padding defines the space around the check-box, radio-button, or image, ensuring that it is visually separated from other elements within the menu item. By adjusting the criPad field, you can control the spacing and alignment of these visual elements relative to the text and other content of the item. A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size.

4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
"8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
[8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels

The CriSize property defines the dimensions (width and height) that the control uses to display a check-box, radio-button, or the item's image. These dimensions determine how much space is allocated for the visual element, ensuring it is rendered correctly within the menu item. By setting the criSize field, you can control the appearance and alignment of check-boxes, radio-buttons, or images relative to the text of the item. By default, the criSize field is 16, which means that any check-box, radio-button, or image uses a 16x16 pixel rectangle for display within the item.

16 {number}, indicates that any check-box, radio or image uses a 16x16 rectangle to display it within the item

The Cursors property defines the mouse cursor displayed when the pointer hovers over a specific part of the control. It allows you to assign different cursor styles to individual parts, providing visual cues about their purpose or interaction behavior. By configuring the Cursors property, you can enhance usability and improve the user experience by giving clear feedback based on which part of the control is being hovered.

The format of the property is:

"cursor(part),cursor(part),..."

where:

• "cursor", defines the CSS mouse cursor to display while cursor hovers the part
• "part", defines the name of the part the cursor is applied on (as defined below)

The "cursor" can be any of the following:

Cursor	Description
"alias"	indicates a shortcut or alias will be created
"all-scroll"	indicates scrolling in any direction
"auto"	lets the browser decide the cursor based on context
"cell"	indicates a table cell
"col-resize"	indicates a column can be resized horizontally
"context-menu"	indicates a context menu is available
"copy"	indicates something will be copied
"crosshair"	a precise crosshair cursor
"default"	the default arrow cursor
"e-resize"	resize east (right edge)
"ew-resize"	resize horizontally
"grab"	indicates an item can be grabbed
"grabbing"	indicates an item is being grabbed
"help"	indicates help information is available
"move"	indicates something can be moved
"n-resize"	resize north (top edge)
"ne-resize"	resize northeast (top-right corner)
"nesw-resize"	resize along the northeast–southwest axis
"no-drop"	indicates dropping is not permitted
"not-allowed"	indicates the action is not allowed
"ns-resize"	resize vertically
"nw-resize"	resize northwest (top-left corner)
"nwse-resize"	resize along the northwest–southeast axis
"pointer"	the pointer cursor (a hand with a pointing finger)
"progress"	indicates background processing
"row-resize"	indicates a row can be resized vertically
"s-resize"	resize south (bottom edge)
"se-resize"	resize southeast (bottom-right corner)
"sw-resize"	resize southwest (bottom-left corner)
"text"	the text selection cursor (I-beam)
"url(...)"	uses a custom cursor image (with optional fallback)
"vertical-text"	the vertical text selection cursor
"w-resize"	resize west (left edge)
"wait"	indicates the program is busy
"zoom-in"	indicates zooming in
"zoom-out"	indicates zooming out

The "part" can be any of the following:

Part	Description
"anchor" (hyperlink)	defines the mouse-cursor when the mouse pointer hovers the anchor (the <a> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
"arr" (arrow)	defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items)
"barr" (bottom-arrow)	defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom)
"btn" (button)	defines the mouse-cursor to show when the mouse pointer hovers the buttons
"cap" (caption)	defines the mouse-cursor to show when the mouse pointer hovers the item's caption
"chk" (check)	defines the mouse-cursor to show when the mouse pointer hovers the item's check-box
"flat" (flat)	defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu)
"img" (image)	defines the mouse-cursor to show when the mouse pointer hovers the item's image
"item" (item)	defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
"menu" (menu)	defines the mouse-cursor to show when the mouse pointer hovers the entire menu
"rad" (radio)	defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button
"rarr" (right-arrow)	defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right)
"sep" (separator)	defines the mouse-cursor to show when the mouse pointer hovers the separator-items
"sub" (sub-items)	defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped)

"" {string}, no mouse cursor support
"pointer(chk,rad,btn)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "chk", "rad" or "btn" parts of the control

The Debug field indicates whether the control displays debug-information. When the control is in debug-mode, it displays debug-information for each item (usually the item's identifier). This information can be useful for developers to identify items and troubleshoot issues during development. When debug-mode is disabled, the control operates normally without displaying any additional debug information.

false {boolean}, no debug-information is displayed
true {boolean}, debug-information is displayed for each item (usually the item's identifier)

The Items property defines the items of the control. Each item can include sub-items, which are delimited by parentheses (). Additionally, each item or sub-item can have one or more flags enclosed in square brackets []. These flags determine the properties of the item, such as its alignment, whether it displays a check-box, its associated image, and other settings. This property is suitable for saving the current state of the menu and restoring it at a later time. Internally, the control also uses this property to construct the menu's layout, ensuring that both the structure and appearance of the menu are preserved. Since the string is generated recursively, it contains not only the top-level items but also all sub-items, maintaining the complete hierarchical structure of the menu. The Item.save() method returns the current item as a string representation (ToString format).

The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags):

"item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])"

or shortly:

item[flag=value][...](sub-item[flag=value][...], ...), ...

The string-representation supports the following flags:

Flag	Description	Sample
[align]	Horizontally aligns the caption. Align could be -1 (full-fits the item), 0 (left), 1 (center), or 2 (right).	"[align=2]"
[arrow]	Indicates whether the item's popup-arrow is shown(1) or hidden(0).	"[arrow=0]", "[arrow=1]"
[button]	Associates a button with the item. The option may be a combination of Menu.ShowAsButtonEnum flags. The btnPad field defines the button's padding (space between the button border and the item content) The btnArrSize field specifies the size (width and height) to show the button's arrow.	"[button]" or "[button=down]"
[captionHeight] / [ch]	Specifies the height of the item's caption. A negative value removes the limitation.	"[ch=128]"
[captionWidth] / [cw]	Specifies the width of the item's caption. A negative value removes the limitation.	"[cw=128]"
[close]	Specifies whether the float-menu is closed once the user clicks the item. The option could be a value of Menu.CloseOnClickEnum type.	"[close=any]" or "[close=-1]"
[chk]	Indicates that the item has a check-box associated. If [typ] is present, [chk] indicates the state of the item, and [rad] is ignored.	"[chk]", "[chk=0]", "[chk=1]"
[cursors]	Defines the mouse cursor for the item only.	"[cursors=pointer(item)]"
[dis]	Disables the item and all its descendents.	"[dis]"
[grp]	Defines the radio group. Use when defining multiple groups of radio buttons.	"[grp=sample]"
[height]	Specifies the height of the item.	"[height=64]"
[hid]	Hides or shows the item.	"[hid]"
[id]	Specifies the item's identifier.	"[id=10]"
[img]	Indicates the item's image. The image must be previously added using exontrol.HTMLPicture.Add.	"[img=logo]"
[itemsPad]	Specifies the items' padding (space between the menu border and the item content).	"[itemsPad=2]", "[itemsPad=2,2]"
[pad]	Specifies the item's padding (space between the menu border and the item content).	"[pad=2]", "[pad=2,2]"
[popupalign] / [pa]	Aligns the sub-menu/popup/float relative to the parent item. The option may be a combination of Menu.ShowPopupAlignEnum flags.	"[pa=down]" or "[pa=1]"
[sep]	Specifies a separator item. The sepSize field specifies the size of a separator item.	"[sep]"
[show]	Specifies how an item with check-box/radio-button is displayed. The option may be any value of Menu.ShowCheckedAsSelectedEnum type.	"[show=check]" or "[show=-1]"
[showdis]	Displays the item as disabled while still enabled.	"[showdis]"
[spchk]	Indicates whether sub-items are shown when the item is checked.	"[spchk]"
[tab]	Indicates the identifier of the sub-items of the current item.	"[tab=page]", "[tab=1]"
[typ]	Specifies the type of the item: 0 (normal), 1 (check-box), or 2 (radio button). If [typ] is present, [chk] indicates the state and [rad] is ignored. This option may be any value of Menu.DisplayTypeEnum type.	"[typ=check]" or "[typ=1]"
[width]	Specifies the width of the item.	"[width=64]"
[group]	Specifies how the sub-items are grouped. The option may be a combination of Menu.GroupPopupEnum flags.	"[group=vertical]" or "[group=0x100]"
[rad]	Indicates that the item has a radio-button associated. If [typ] is present, [chk] indicates the state and [rad] is ignored.	"[rad]", "[rad=0]", "[rad=1]"
[shapes]	Specifies shapes to apply on the item only.	"[shapes=dfitem(item),dfcap(cap)]"

"" {string}, clears the items collection
"Popup(A,B,C)" {string}, adds a popup-item with three sub-items A, B and C
"Popup[group](A,B,C)" {string}, adds an item with three sub-items A, B and C, and all items are visible and displayed as an horizontally group
"Popup[group][chk][spchk](A,B,C)" {string}, adds an item with three sub-items A, B and C, but A, B and C sub-items are visible and displayed only if the popup is checked

The ItemsPad property defines the padding the sub-items section of the item (space between the menu border and the items content). It can be set as a single numeric value, applying the same padding to both horizontal and vertical dimensions, or as a pair "x,y" or [x,y] to specify horizontal and vertical padding separately. The Pad property defines the item's padding, which is the space between the menu border and the item's content. The BtnPad property defines the padding of a button, which is the space between the button's border and its content. By adjusting the ItemsPad property, you can control the spacing around sub-items within a menu, improving the visual organization and readability of nested menu structures.

4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
"8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
[8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels

The Listeners field defines the events of the control, as an object of exontrol.Lts type. The exontrol.Lts type supports forEach(callback, thisArg) method that helps you to enumerate the events the control supports. The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. The Events section lists the events the component supports.

The following sample shows how you can get all events the component currently supports:

oMenu.Listeners.forEach(function(name)
{
 console.log(name);
});

The following sample displays the item being selected:

oMenu.Listeners.Add("onselect", function (oEvent)
{
 console.log(oEvent);
});

or

oMenu.on("select", function (oEvent)
{
 console.log(oEvent);
});

where oMenu is an object of Menu type

The Locked property indicates whether the control is locked(protected) or unlocked. When the control is locked, it does not respond to user interactions, meaning the user cannot select or modify any item. Unlocking the control restores full interactivity, allowing the user to select items as needed. Unlike a read-only control, which can still receive interactions but prevents item selection (so no onselect event is fired), a locked control is entirely non-interactive.

false {boolean}, unlocks the control (can select any item)
true {boolean}, locks the control (can't select any item)

The Options property is a reference to the current configuration options of the control, as an object of Menu.Options type. Each field within the options object corresponds directly to a property of the control. This mapping ensures that modifying a field in the options object immediately updates the corresponding property, and any change made to a property is reflected in the options object. For example, changing the value of the shapes field in the options object updates the control's Shapes property, and changing the Shapes property of the control updates the shapes field in the options object. This two-way mapping keeps the control's configuration consistent and synchronized with the options object.

Options = {debug: true}, sets that the control runs in debug mode (dispays identifiers of items during drawing)
console.log( oMenu.Options.open ) {number}, gets the time in ms the top-level item opens its sub-menu once the cursor hovers it

The following statements are equivalent:

 oMenu.SetOptions({debug: true}), sets that the control runs in debug mode (dispays identifiers of items during drawing)
 oMenu.Options = {debug: true}, sets that the control runs in debug
 oMenu.Debug = true, sets that the control runs in debug mode (dispays identifiers of items during drawing)
 oMenu.SetDebug(true), sets that the control runs in debug mode (dispays identifiers of items during drawing)

where oMenu is an instance of Menu control.

The OutClose property defines the time, in milliseconds, that the control takes to close all its float-menu as soon as the cursor hovers outside portion of the menu. By setting this value, you can control the delay before all float-menus are closed when the cursor moves outside the menu area, allowing you to adjust the menu's responsiveness. A lower value causes the float-menus to close quickly, while a higher value introduces a brief pause, helping to prevent accidental closures and improving the overall navigation experience.

The value of OutClose property can be any of the following:

• if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu
• if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it
• if negative, it has no effect

0 {number}, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it
350 {number}, the control's float-menus are closed once 350 ms ellapsed after the cursor hovers outside portion of the menu

The Pad property defines the item's padding (space between the menu border and the item content). It can be set as a single numeric value, applying the same padding to both horizontal and vertical dimensions, or as a pair "x,y" or [x,y] to specify horizontal and vertical padding separately. The BtnPad property defines the padding of a button, which is the space between the button's border and its content. The ItemsPad property defines the padding of the sub-items section of an item, controlling the space between the menu border and the content of the sub-items.

4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height
"8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels
[8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels

The PopupRatio property defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. By adjusting this value, you control how much of the screen the menu can occupy, ensuring it remains user-friendly and does not overwhelm the interface. A smaller PopupRatio limits the menu size, while a larger value allows for bigger menus. By default, the popupRatio is set to 0.5, which means the float-menu can occupy up to 50% of the document's view size.

0 {number}, indicates that the size of the float-menu is not influenced by the document's view size, so it will be displayed entirely as it is
0.5 {number}, indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page (control's scroll is automatically added if exArrangeItemsScroll flag is specified)

The ReadOnly field indicates whether the control is read-only. When the control is read-only, users can interact with the items - such as clicking or hovering - but cannot select or check any item. As a result, no onselect event is fired when users interact with the items. In contrast, a locked control does not respond to any user interactions, whereas a read-only control allows interaction but prevents item selection or checking.

false {boolean}, the user can select or check any item
true {boolean}, the user can not select or check the items

The ScrollClip property defines whether the control's scroll bar is clipped. When ScrollClip is set to true, the scroll bar and the items portion of the menu are treated as separate areas, ensuring that the scroll bar does not overlap or obscure the menu items. In this case, when the scroll bar is displayed, it does not cover any part of the menu items, resulting in a clearer and more user-friendly interface for navigating the menu content. If ScrollClip is set to false, the scroll bar is not clipped and may be rendered over the menu items. This can cause the scroll bar to overlap the items, potentially making interaction with the menu more difficult while scrolling.

false {boolean}, the scroll is not clipped, so it is shown over the menu
true {boolean}, the scroll and items portions of the menu are separatly

The ScrollOpt property defines the options that control the visual appearance and behavior of the control's scroll bar. It accepts an object of type exontrol.ScrollBar.Options, which provides access to various configurable settings. By configuring options within the scrollOpt object, you can customize aspects such as the scroll bar's style, size, colors, and interaction behavior. This level of customization allows the scroll bar to integrate seamlessly with the overall design of the menu and enhances the user experience when navigating content that requires scrolling.

The following example shows how to set the scrollOpt field to customize the scroll bar's appearance and behavior:

{
  cursors: "pointer(t,b)",
  visibleParts: "t,b",
  horizontalShapes: "button(t)",
  verticalShapes: "button(t)"
}

The ScrollSize property defines the size (width or height) of the control's scroll bar. The scroll bar is a user interface element that allows users to navigate content that exceeds the visible area of the menu. By setting the ScrollSize property, you can control the dimensions of the scroll bar, ensuring it is appropriately sized for user interaction and visually consistent with the overall design of the menu. A larger ScrollSize results in a more prominent and easier-to-use scroll bar, while a smaller value produces a more compact appearance. By default, ScrollSize is 8, meaning the scroll bar is displayed with a width or height of 8 pixels when scrolling is required.

0 {number}, hides the menu's scroll-bar but scrolling it is still posible by drag. Click an item and drag outside the margins so the menu gets scrolled
4 {number}, defines a 4-pixels wide scroll bar

The SepSize property defines the size of a separator item. A separator item is a non-interactive element used to visually divide groups of items within a menu. By setting SepSize, you control the thickness or height of the separator, which affects the visual organization and clarity of the menu. A larger SepSize creates a more prominent separation between groups of items, while a smaller SepSize results in a subtler division. By default, SepSize is 4, meaning separator items are displayed with a size of 4 pixels. Separator items are defined in the Items property using the [sep] flag, and the SepSize property determines how they are rendered visually.

0 {number}, hides all separator items ([sep])
4 {number}, specifies the separator items of 4-pixels size

The Shapes property defines the shapes that each part of the control can display. It allows you to customize the control's visual appearance by assigning specific shapes to its individual parts. By configuring the Shapes property, you can control how different elements of the control are rendered, ensuring they match the desired style and overall design.

The format of the property is:

"shape(part),shape(part),..."

where:

• "shape", defines the shape to apply on the UI part as one of the following:

  ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
  ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
  ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
  ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
  ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
  ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
  ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
  ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
  ◦ specifies the name of the field within the exontrol.Shapes.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem shape)
  ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)
  

• "part", defines the name of the part the shape is applied on (as defined bellow)

The Shapes property supports any of the following parts:

Part	Description
"arr" (arrow)	defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items)
"barr" (bottom-arrow)	defines the visual appearance to display button's arrow (to bottom)
"btn" (button)	defines the visual appearance to display the buttons
"cap" (caption)	defines the visual appearance for the item's caption
"chk" (check)	defines the visual appearance to display the item's check-box
"flat" (flat)	defines the visual appearance for menu's flat bar (usually shown in the left side of the menu)
"img" (image)	defines the visual appearance to display the item's image
"item" (item)	defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items
"menu" (menu)	defines the visual appearance for the entire menu
"rad" (radio)	defines the visual appearance to display the item's radio-button
"rarr" (right-arrow)	defines the visual appearance to display button's arrow (to right)
"sep" (separator)	defines the visual appearance to display separator-items
"sub" (sub-items)	defines the visual appearance to display sub-items of the item (while the item is grouped)

null {null}, specifies the default visual appearance
"" {string}, no shape (no visual appearance is applied to any part of the control)
"red(item)", "#FF0000(item)", "rgb(255,0,0)(item)", "rgba(255,0,0,1)(item)" {string}, shows all-items in red
'{"hover":{"frameColor":"black","pad":-0.5}}(item)' {string}, draws a black-frame arround the item being hovered
"xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.Menu.xxx combined with exontrol.Shapes.Menu.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Menu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Menu.zzz object defines the visual appearance of "y" part of the control

The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The Shortcuts field defines the shortcuts of the control, as an object of exontrol.Sts type. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts. In order to provide keyboard support for the component, the owner <canvas> element must include the tabIndex attribute, as <canvas ... tabIndex="0">. You can associated a function or a callback to any shortcut.

The following sample activates the File popup-menu as soon as user presses F key:

oMenu.Shortcuts.Add( "F", function(oShortcut)
{
  oMenu.Open("File");
});

where oMenu is an object of Menu type

The Show property specifies how an item that includes a check-box or radio button is displayed. It accepts a value of type Menu.ShowCheckedAsSelectedEnum, which determines how a checked item is visually represented. Depending on the selected value, the item may be highlighted as selected, and its check-box or radio button can either remain visible or be hidden. This property allows you to control the visual feedback provided for checked items within the menu.

The Menu.ShowCheckedAsSelectedEnum type defines the following values:

• exDefault (0), indicates that no highlight is applied to the item's check/radio
• exCheckHighlight (-1), highlights the checked item
• exItemHighlight (1), highlights the checked item, but hides the item's check/radio button

1 (Menu.ShowCheckedAsSelectedEnum.exItemHighlight) {number}, specifies that any checked-item gets highlighted, by not showing the item's check/radio button

The SmoothSel property defines the time, in milliseconds, that the control takes to change its selection from one item to another. A value of 0 makes the selection change immediate, while a positive value (for example, 125) creates a gradual transition over the specified duration. By adjusting SmoothSel, you can control the speed of selection changes, providing smoother and more visually consistent transitions between items.

0 {number}, no smooth changes once the user selects a new item
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

The SubArrangeItemsAs property defines how the items are arranged within a float-menu. A float-menu is a temporary or pop-up menu that appears when the user interacts with a menu item, such as clicking or hovering, to display additional sub-items or options. The SubArrangeItemsAs property controls the layout of these sub-items inside the float-menu, determining their alignment, stacking, or flow. It typically accepts one or more flags from the ArrangeItemsEnum, allowing you to customize whether the sub-items are arranged horizontally, vertically, or in another order within the menu. By setting SubArrangeItemsAs, you ensure that sub-items are displayed clearly and consistently, improving both the usability and visual appearance of the float-menu.

The Menu.ArrangeItemsEnum type supports the following flags:

• exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right
• exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom
• exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu)
• exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items
• exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu)
• exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required
• exArrangeItemsAlignCenter (0x400), centers the items on each row/column
• exArrangeItemsAlignReverse (0x800), reverses the alignment of the items

257 or Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | Menu.ArrangeItemsEnum.exArrangeItemsWrap {number}, wraps items within the float-menu
546 or Menu.ArrangeItemsEnum.exArrangeItemsVertical | Menu.ArrangeItemsEnum.exArrangeItemsScroll | Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges vertically the items within the float-menu

The SubClose property defines the time, in milliseconds, that a sub-menu waits before closing when the cursor hovers over its second-level item. By setting this value, you can control the delay before the sub-menu disappears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to close quickly, while a higher value introduces a brief pause, helping to prevent accidental closures and improving the overall navigation experience.

The value of SubClose property can be any of the following:

• if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item
• if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item
• if negative, it has no effect

0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item
350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers the second-level item

The SubOpen property defines the time, in milliseconds, that a second-level item waits before opening its sub-menu when the cursor hovers over it. By setting this value, you can control the delay before the sub-menu appears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to open quickly, while a higher value introduces a brief pause, helping to prevent accidental openings and improving the overall navigation experience.

The value of SubOpen property can be any of the following:

• if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it.
• if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it
• if negative, it has no effect so the item requires click in order to open its sub-menu

0 {number}, indicates that the item opens its sub-menu as soon as the cursor hovers it
-1 {number}, indicates that the item's sub-menu is opened once the user clicks it

The Tfi property defines the font attributes that are applied to the control's captions and can be set to customize their appearance. The Tfi property can be set by a string such as "b monospace 16" or by an object such as {bold: true, fontName: "monospace", fontSize: 16}, and immediately applies these settings to update the displayed captions. By default, the Tfi property is null, so the canvas uses its own default font defined by exontrol.defGUIFont (typically "12px sans-serif"). CSS fonts applied to surrounding HTML elements do not affect the canvas; the canvas text is independent of page styles, and the default font can be changed by setting exontrol.defGUIFont.

The Tfi property as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

• bold, displays the text in bold (equivalent of <b> tag)
• italic, displays the text in italics (equivalent of <i> tag)
• underline, underlines the text (equivalent of <u> tag)
• strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
• <fontName name>, specifies the font's family (equivalent of <font name> tag)
• <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
• <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
• <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
• <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
• <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the Tfi property that's not recognized as a keyword is interpreted as:

• name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
• size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The Tfi property as object supports any of the following fields:

• bold {boolean}, displays the text in bold (equivalent of <b> tag)
• italic {boolean}, displays the text in italics (equivalent of <i> tag)
• underline {boolean}, underlines the text (equivalent of <u> tag)
• strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
• fontName {string}, specifies the font's family (equivalent of <font name> tag)
• fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
• fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
• bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
• shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
  • color {string}, defines the color of the text's shadow (CSScolor)
  • width {number}, defines the size of the text's shadow
  • offset {number}, defines the offset to show the text's shadow relative to the text
• outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
• graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
  • color {string}, defines the gradient-color (CSScolor)
  • mode {number}, defines the gradient direction as 0 (left-right), 1 (default, top-bottom), 2 (left-center-right), and 3 (top-center-bottom)
  • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

• Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
• Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
• RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
• RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
• HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
• HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
• Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.

null {null}, the Tfi property is ignored
"bold monospace 16 <fg blue>" {string}, defines Monospace font of 16px height, bold and blue
{bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue

The WheelChange property specifies the amount the control scrolls when the user rolls the mouse wheel. This property lets you adjust the sensitivity of the mouse wheel interaction with the control.

• Setting WheelChange to 0 disables mouse wheel actions, preventing the control from changing when the wheel is rotated.
• Setting WheelChange to 1 applies the default scroll behavior, where the control scrolls by a standard amount with each wheel rotation.

By modifying the WheelChange value, you can fine-tune the control's responsiveness, making it easier for users to perform precise changes or larger adjustments as needed.

0 {number}, locks any action the mouse's wheel performs
1 {number}, indicates that the wheelChange property is applied for 1-time when user rotates the mouse wheel. Changes the wheelChange property to provide a different step to scroll once the user rotates the mouse wheel

The X property defines the horizontal position to display the context/shortcut-menu relative to the document. The Y property defines the vertical position for the menu relative to the document. These properties take effect only when the control is opened as a context menu (without a canvas) using the Open() method.

event.pageX {number}, The pageX read-only property of the MouseEvent(event) interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document.

The Y property defines the vertical position to display the conteyt/shortcut-menu relative to document. The X property defines the horizontal position for the menu relative to the document. These properties take effect only when the control is opened as a context menu (without a canvas) using the Open() method.

event.pageY {number}, The pageY read-only property of the MouseEvent(event) interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document.

The BeginUpdate() method suspends the control's render until the EndUpdate() method is called. It maintains performance, while multiple changes occurs within the control. The BeginUpdate() method is mostly used when you want to perform multiple changes to the control without refreshing the control after each change, and once all changes are performed, you can call the EndUpdate() method to refresh the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() method, because the methods already maintain performance while performing multiple changes to the control.

oMenu.BeginUpdate();
  // performs multiple changes to the control
oMenu.EndUpdate();

The Close() method programmatically closes the menu and all its associated float-menus. This method is useful for closing the menu when it is opened as a context or shortcut menu (without a canvas), or for dismissing any float-menus opened for a specific item. You can use the Open() method to display the menu as a context or shortcut menu, and then call Close() to close it programmatically. Additionally, calling Close() ensures that all open float-menus are closed, properly removing the menu from the user interface when needed.

oMenu.Close(), closes the menu and all its float-menus

The EndUpdate() method resumes the control's render, after it is suspended by the BeginUpdate() method. The EndUpdate() method is mostly used after calling the BeginUpdate() method, to refresh the control after performing multiple changes to the control. You can use the Update() method to perform multiple changes at once. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() method, because the methods already maintain performance while performing multiple changes to the control.

oMenu.BeginUpdate();
 // performs multiple changes to the control
oMenu.EndUpdate();

The EnsureVisibleItem() method scrolls the control to ensure that the giving item fits the control's visible area. This method is useful when you want to make sure that a specific item is visible to the user, especially in cases where the menu contains many items and some of them may be hidden due to scrolling. By calling EnsureVisibleItem() with a particular item, the control will automatically adjust its scroll position to bring that item into view, enhancing the user experience and making it easier for users to find and interact with specific menu items.

oMenu.EnsureVisibleItem(oItem), scrolls the control to ensure that the oItem fits the control's visible area, where oMenu is an object of Menu type, and oItem is an object of Item type

The GetCanvas() method returns the HTMLCanvasElement object where the control is currently running on. The control is always running on a canvas, which is the canvas of the control's canvas-window (exontrol.CW). The GetCanvas() method is useful when you need to access the canvas directly. You can also use the GetCanvas() method to retrieve the canvas's context and perform custom drawing operations using the Canvas API. It is recommended to call the exontrol.CC.Resize(<canvas>, [width], [height]) method to resize and refresh the control; otherwise, the control's content is lost.

The GetClose() method gets the time, in milliseconds, that a sub-menu waits before closing when the cursor hovers over its top-level item. By setting this value, you can control the delay before the sub-menu disappears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to close quickly, while a higher value introduces a brief pause, helping to prevent accidental closures and improving the overall navigation experience.

The following statements are equivalent:

 oMenu.GetClose() {number}, returns the time in ms the sub-menu is closed once the cursor hovers the top-level item
 oMenu.Close {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item
 
where oMenu is an instance of the Menu control.

The GetOpen() method gets the time, in milliseconds, that a top-level item waits before opening its sub-menu when the cursor hovers over it. By setting this value, you can control the delay before the sub-menu appears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to open quickly, while a higher value introduces a brief pause, helping to prevent accidental openings and improving the overall navigation experience.

The following statements are equivalent:

 oMenu.GetOpen() {number}, returns the time in ms the top-level item opens its sub-menu once the cursor hovers it
 oMenu.Open {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it

where oMenu is an instance of the Menu control.

The Item() method returns the item giving its identifier, caption or path. The identifier is a string that uniquely identifies an item within the menu, while the caption is the text displayed for the item. By providing either the identifier or caption, you can retrieve the corresponding item from the menu. This method is useful for accessing specific items programmatically, allowing you to manipulate their properties or trigger actions associated with them. Additionally, if the identifier includes a backslash (\), it can be used to locate an item based on its parent-child relationship within the menu structure. The Item.forEachU() method enumerates recursivelly the child-items, until the callback returns a truthy value.

oMenu.Item("File") {Item}, returns the item with the "File" caption, where oMenu is an object of Menu type
oMenu.Item("File\\New") {Item}, returns the item with the "new" identifier, which is a child of the "file" item, where oMenu is an object of Menu type

The Open() method opens the float-menu(s) for a given item identifier. If no canvas is specified, the menu is displayed as a shortcut or context menu. The X property defines the horizontal position of the menu relative to the document, while the Y property defines the vertical position. These properties determine where the context or shortcut menu appears on the screen when opened using Open().

oMenu.Open(), opens the current menu as a shortcut/context-menu

The Refresh() method forces the control to redraw and update its layout without modifying any of its properties or data. It is typically used when the visual appearance needs to be recalculated or repainted, even though no structural or state changes were made.

For example, call Refresh() when:

• The control's container has been resized and the layout must be recalculated.
• External CSS or styling changes affect the control's appearance.
• The control becomes visible after being hidden.
• You need to ensure the UI is visually synchronized with its current internal state.

The method does not alter the control's data, options, or configuration - it only updates the rendered output.

oMenu.Refresh(), refreshes the control

The SetClose() method sets the time, in milliseconds, that a sub-menu waits before closing when the cursor hovers over its top-level item. By setting this value, you can control the delay before the sub-menu disappears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to close quickly, while a higher value introduces a brief pause, helping to prevent accidental closures and improving the overall navigation experience.

0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item.
350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers a top-level item.

The SetOpen() method sets the time, in milliseconds, that a top-level item waits before opening its sub-menu when the cursor hovers over it. By setting this value, you can control the delay before the sub-menu appears, allowing you to adjust the menu's responsiveness. A lower value causes the sub-menu to open quickly, while a higher value introduces a brief pause, helping to prevent accidental openings and improving the overall navigation experience.

0 {number}, indicates that the top-level item opens its sub-menu as soon as cursor hovers it.
-1 {number}, indicates that the top-level item opens its sub-menu as soon as user clicks it.

The SetXY() method sets the horizontal and vertical position at which a context or shortcut menu is displayed relative to the document. These properties take effect only when the control is opened as a context menu (without a canvas) using the Open() method. By providing both the X and Y coordinates, you can precisely control where the context or shortcut menu appears on the screen, ensuring that it is displayed in a location that is relevant to the user's interaction and enhances the overall user experience.

The following statements are equivalent:

 oMenu.SetXY(event.pageX, event.pageY), sets the horizontal and vertical position to display the context/shortcut-menu relative to document
 oMenu.X = event.pageX; oMenu.Y = event.pageY, sets the horizontal and vertical position to display the context/shortcut-menu relative to document
 oMenu.SetX(event.pageX); oMenu.SetY(event.pageY), sets the horizontal and vertical position to display the context/shortcut-menu relative to document

where oMenu is an object of Menu type

The Shuffle() method arranges randomly all items within the control (the Refresh() method always resets any previous shuffle). The Shuffle() method is useful for creating dynamic and visually engaging menu layouts, adding an element of surprise and variety to the user interface. By specifying a ratio, you can control how far each item is randomized relative to its current position, allowing for a range of shuffling effects from subtle to dramatic. This method enhances the visual appeal of the menu and can be used to create unique user experiences. The Unshuffle() method restores the items of the control in case they were shuffled.

oMenu.Shuffle(0.5), arranges randomly all items within the control, allowing each item to randomize its position up to half of the layout width/height
 oMenu.Shuffle(1), arranges randomly all items within the control, allowing each item to randomize its position up to the layout width/height

The Unshuffle() method restores the items of the control in case they were shuffled. When you call Shuffle() to randomly arrange the items within the control, you can use Unshuffle() to revert them back to their original layout. This method is particularly useful when you want to provide users with the option to reset the menu layout after shuffling, ensuring that they can easily return to a familiar and organized structure if they find the shuffled arrangement confusing or less efficient.

oMenu.Unshuffle(), restores the items of the control in case they were shuffled

The Update() method locks the control's paint during the callback, and invalidates the control once the method ends. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() methods, because the methods already maintain performance while performing multiple changes to the control. The BeginUpdate/EndUpdate() methods are not required to be called when you use the Update() method, because the methods already maintain performance while performing multiple changes to the control.

oMenu.Update(function()
{
 // performs multiple changes to the control
});

The forEachU() method enumerates all items within the control, including child items, until the provided callback returns a truthy value. Enumeration is performed recursively, calling the callback for each item. This method is useful for applying styles, changing settings, or gathering information from all items. By supplying a callback function, you can define custom logic to execute for each item during the enumeration.

The following sample code enumerates all items within the control, including child items, and logs them in the console:

 oMenu.forEachU(function(oItem)
 {
   console.log(oItem);
 })

The following sample code searches for the item with caption "File" and logs it in the console:

 console.log(oMenu.forEachU(function(oItem)
 {
   return oItem.caption == "File" && oItem
 }))

The off() method removes a previously bound handler from a specified event, allowing you to stop listening for that event and prevent the associated actions from being executed. Also removes keyboard shortcuts previously defined using the on() method. The event name is case-insensitive and may or may not include the 'on' prefix. For example, 'click' is equivalent to 'onclick' and vice versa. If the event parameter is missing/empty/undefined, all event handlers are removed from the control. If the listener parameter is missing/empty/undefined, all handlers of the specified event are removed. If the method parameter is missing/empty/undefined, the listener[type]() function is used to compare and remove the handler(s).

The following example removes the select event handler from the control:

oMenu.off("select");

where oMenu is an object of Menu type.

This sample is equivalent to:

oMenu.Listeners.Remove("onselect");

The following example removes all event handlers from the control:

oMenu.off();

where oMenu is an object of Menu type.

This sample is equivalent to:

oMenu.Listeners.Clear();

or

oMenu.Listeners.Remove();

The on() method adds an event listener to the specified event or defines a keyboard shortcut. The on() method enables you to listen for events and execute custom code when those events occur, or to define keyboard shortcuts that trigger specific actions within the component. You can use the on() method to enhance the interactivity and functionality of your application by responding to user actions or keyboard inputs. Use the off() method to remove previously bound event handlers or keyboard shortcuts.

The following example logs event details when the control is selected:

oMenu.on("select", function(oEvent)
{
  console.log(oEvent);
});

where oMenu is an object of Menu type.

This sample is quivalent of 

oMenu.Listeners.Add("onselect", function (oEvent)
{
  console.log(oEvent);
});

The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element). The event has one parameter that indicates the anchor being clicked as an object of {id,options} type, where the id field specifies null (no identifier has been specified for the anchor) or the anchor's identifier, and the options attribute specifies null (no options has been specified for the anchor) or the anchor's options.

The following samples display information about the element being clicked:

oMenu.Listeners.Add("onanchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("anchorclick", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type.

The oncheck event notifies your application when an item is checked, while the onuncheck event notifies when an item is unchecked. The oncheck event receives one parameter, representing the item being checked as an object of type Item. These events allow you to synchronize the Item.state property of items between your application and the control whenever a user checks or unchecks an item. The oncheck event is triggered only when a user checks an item, and the onuncheck event is triggered only when a user unchecks an item. Neither event is triggered when the user clicks an item that does not have a check-box or radio button, or when clicking the item's button.

The following samples display the item being checked:

oMenu.oncheck = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("oncheck", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("check", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onclose event notifies your application when a float-menu has been closed, while the onopen event notifies when a new float-menu is opened. The onclose event receives one parameter representing the float-menu being closed, provided as an object of type Menu. These events allow you to synchronize the state of the float-menus between your application and the control whenever a user opens or closes a float-menu. The onopen event is triggered as soon as a new float-menu is opened, and the onclose event is triggered as soon as a float-menu is closed.

The following samples display the popup menu which has been closed:

oMenu.onclose = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onclose", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("close", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onlayoutchange event notifies your application that a new layout is about to be applied on the control. The event handler receives an object of Layout type that specifies the control's new layout. You can use this event to customize the appearance of the menu by modifying the layout before it is applied. For example, you can change the size or position of menu items, or add custom styles to the layout. By handling this event, you can ensure that the menu's appearance is consistent with your application's design and provides a better user experience.

The following samples display a message once a new layout for the menu has been built:

oMenu.onlayoutchange = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onlayoutchange", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("layoutchange", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onmodal() method occurs once that the control's modal-mode starts or ends (one or more float-menus are being displayed). The onmodal event receives one parameter, which is a boolean value indicating whether the control's modal-mode starts or ends. This event allows your application to respond when the control enters or exits modal-mode, such as by disabling or enabling other UI elements, pausing or resuming background tasks, or performing other related actions. The onmodal event is triggered as soon as the first float-menu is displayed (modal-mode starts) and as soon as all float-menus are closed (modal-mode ends).

The following samples display a message once one or more float-menus are being displayed:

oMenu.onmodal = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onmodal", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("modal", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onopen event notifies your application that a float-menu has been opened. The onclose event notifies your application that a float-menu has been closed. Both events have one parameter, which represents the float-menu being opened or closed as an object of type Menu. These events allow your application to respond when a menu becomes visible or is hidden, such as initializing or updating items, saving state, cleaning up resources, or performing other related actions.

The following samples display the popup menu which has been opened:

oMenu.onopen = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onopen", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("open", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onselect event notifies your application when an item has been selected or clicked, excluding popup items. It receives one parameter representing the item being clicked, provided as an object of type Item. The event is triggered only when a user clicks an item that does not have a float-menu (popup item). It is not triggered when the user clicks an item that has a float-menu, even if the item is enabled and does not include a check-box or radio button.

The following samples display the item being selected:

oMenu.onselect = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onselect", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("select", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type

The onuncheck event notifies your application when an item is unchecked, while the oncheck event notifies when an item is checked. The onuncheck event receives one parameter, representing the item being unchecked as an object of type Item. These events allow you to synchronize the Item.state property of items between your application and the control whenever a user checks or unchecks an item. The oncheck event is triggered only when a user checks an item, and the onuncheck event is triggered only when a user unchecks an item. Neither event is triggered when the user clicks an item that does not have a check-box or radio button, or when clicking the item's button.

The following samples display the item being unchecked:

oMenu.onuncheck = function (oEvent)
{
 console.log(oEvent);
}

or

oMenu.Listeners.Add("onuncheck", function (oEvent)
{
 console.log(oEvent);
})

or

oMenu.on("uncheck", function (oEvent)
{
 console.log(oEvent);
})

where oMenu is an object of Menu type