Options class (Menu)

The align field horizontally aligns the item's caption. 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 field 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

The align field is mapped to the Align property, which means that the following statements are equivalent:

oMenu.Options = {align: 1}
oMenu.SetOptions({align: 1})
oMenu.Align = 1
oMenu.SetAlign(1)

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

The alignClient field specifies whether a parent item's client area is aligned with its sub-items' client areas 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 setting helps you control the visual structure of the menu and improve its usability.

The alignClient field is mapped to the AlignClient property, which means that the following statements are equivalent:

oMenu.Options = {alignClient: true}
oMenu.SetOptions({alignClient: true})
oMenu.AlignClient = true
oMenu.SetAlignClient(true)

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 field 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.

The alignContextMenu field is mapped to the AlignContextMenu property, which means that the following statements are equivalent:

oMenu.Options = {alignContextMenu: 0}
oMenu.SetOptions({alignContextMenu: 0})
oMenu.AlignContextMenu = 0
oMenu.SetAlignContextMenu(0)

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 field 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 setting lets you define how radio items behave to suit your application's needs.

The allowToggleRadio field is mapped to the AllowToggleRadio property, which means that the following statements are equivalent:

oMenu.Options = {allowToggleRadio: false}
oMenu.SetOptions({allowToggleRadio: false})
oMenu.AllowToggleRadio = false
oMenu.SetAllowToggleRadio(false)

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 field specifies the size (width and height) of the item's arrow. The arrow is shown only for popup items or for items that contain sub-items or child items. A popup item in the items field is defined as parent(child1, child2, …), where each child represents a sub-item or another popup. Children are delimited by parentheses (). The arrSize field defines the area allocated for the arrow, ensuring it is rendered correctly within the menu item. By setting arrSize, you control the arrow's appearance and its alignment relative to the item's text. By default, arrSize is 6, meaning the arrow is displayed within a 6×6 pixel rectangle inside the item.

The arrSize field is mapped to the ArrSize property, which means that the following statements are equivalent:

oMenu.Options = {arrSize: 6}
oMenu.SetOptions({arrSize: 6})
oMenu.ArrSize = 6
oMenu.SetArrSize(6)

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

The arrangeItemsAs field specifies how the items are arranged on the control's top-level menu. It accepts a combination of one or more ArrangeItemsEnum flags, 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 multiple aspects of the item arrangement simultaneously, 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

The arrangeItemsAs field is mapped to the ArrangeItemsAs property, which means that the following statements are equivalent:

oMenu.Options = {arrangeItemsAs: 1}
oMenu.SetOptions({arrangeItemsAs: 1})
oMenu.ArrangeItemsAs = 1
oMenu.SetArrangeItemsAs(1)

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 field specifies the size (width and height) to show the button's arrow. The button's arrow is displayed only for items that contain sub-items or child-items and are of [button] type (items field). By setting the btnArrSize field, you 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. The btnArrSize field defines the area allocated for the button's arrow, allowing you to customize its size based on your design preferences. By default, btnArrSize is 6, meaning that the button's arrow is displayed within a 6×6 pixel rectangle inside the item.

The btnArrSize field is mapped to the BtnArrSize property, which means that the following statements are equivalent:

oMenu.Options = {btnArrSize: 6}
oMenu.SetOptions({btnArrSize: 6})
oMenu.BtnArrSize = 6
oMenu.SetBtnArrSize(6)

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 field 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 field defines the item's padding, which is the space between the menu border and the item's content. The itemsPad field 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 field, you can control the spacing around buttons within menu items, enhancing the visual organization and readability of interactive elements in your menu.

The btnPad field is mapped to the BtnPad property, which means that the following statements are equivalent:

oMenu.Options = {btnPad: 4}
oMenu.SetOptions({btnPad: 4})
oMenu.BtnPad = 4
oMenu.SetBtnPad(4)

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 close field defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. By setting this value, you can control how quickly the sub-menu disappears when the user moves the cursor away from it, providing a smoother and more intuitive navigation experience. A shorter close time allows for quicker menu interactions, while a longer close time can help prevent accidental closures and improve usability.

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

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

The close field is mapped to the Close property, which means that the following statements are equivalent:

oMenu.Options = {close: 0}
oMenu.SetOptions({close: 0})
oMenu.Close = 0
oMenu.SetClose(0)

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 closeOnClick field defines which types of items will close the float-menu when clicked. By configuring this property, you control how the menu responds to user interactions, making it more intuitive and user-friendly. Based on the flags set in closeOnClick, the menu can be set to close when users click on enabled items, disabled items, separators, buttons, checkboxes, radio buttons, or any combination of these. This flexibility ensures the menu behaves in a way that best fits your application's needs and improves 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

The closeOnClick field is mapped to the CloseOnClick property, which means that the following statements are equivalent:

oMenu.Options = {closeOnClick: 0}
oMenu.SetOptions({closeOnClick: 0})
oMenu.CloseOnClick = 0
oMenu.SetCloseOnClick(0)

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 field specifies whether the check-box/radio-button or the item's image are vertically aligned. When criAlign is set to true, the control vertically aligns the check-box/radio-button or the item's image with the item's text, ensuring a cohesive and visually balanced appearance. If criAlign is false, the check-box/radio-button or the item's image is not vertically aligned with the text, which may result in a less uniform look. The criAlign property has an effect only when the control's criFlat property is set to exNormal, meaning that vertical alignment of these elements is relevant in non-flat menu styles.

The criAlign field is mapped to the CriAlign property, which means that the following statements are equivalent:

oMenu.Options = {criAlign: true}
oMenu.SetOptions({criAlign: true})
oMenu.CriAlign = true
oMenu.SetCriAlign(true)

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 field indicates whether the menu's flat bar is shown or hidden. The flat bar is a visual element that can be displayed on the menu to enhance its appearance. By setting the criFlat field, you can control the visibility of this flat bar based on the presence of certain item types (such as check, radio, or image) or choose to always show it regardless of item types. This allows for customization of the menu's look and feel to better suit the design preferences or requirements of your application.

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

The criFlat field is mapped to the CriFlat property, which means that the following statements are equivalent:

oMenu.Options = {criFlat: 1}
oMenu.SetOptions({criFlat: 1})
oMenu.CriFlat = 1
oMenu.SetCriFlat(1)

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

The criPad field specifies the padding applied to a check-box, radio-button, or the item's image. It can be set as a single numeric value, which applies the same padding to both horizontal and vertical dimensions, or as a pair "x,y" or [x,y] to define horizontal and vertical padding separately. The criSize field determines the dimensions (width and height) that the control uses to display a check-box, radio-button, or the item's image, ensuring the visual element fits correctly within the menu item. The criAlign field specifies the vertical alignment of the check-box, radio-button, or the item's image relative to the item's text. Together, these attributes allow precise control over the size, padding, and alignment of visual elements within menu items.

The criPad field is mapped to the CriPad property, which means that the following statements are equivalent:

oMenu.Options = {criPad: 4}
oMenu.SetOptions({criPad: 4})
oMenu.CriPad = 4
oMenu.SetCriPad(4)

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 field specifies 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.

The criSize field is mapped to the CriSize property, which means that the following statements are equivalent:

oMenu.Options = {criSize: 16}
oMenu.SetOptions({criSize: 16})
oMenu.CriSize = 16
oMenu.SetCriSize(16)

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

The cursors field specifies the mouse cursor displayed when the pointer is over a specific part of the control. It allows you to assign different cursor styles to individual parts, helping indicate their purpose or interaction behavior. By configuring the cursors field, you can improve usability by providing visual feedback based on the part 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)

The cursors property is mapped to the Cursors property, which means that the following statements are equivalent:

oMenu.Options = {cursors: "pointer(btn)"}
oMenu.SetOptions({cursors: "pointer(btn)"})
oMenu.Cursors = "pointer(btn)"
oMenu.SetCursors("pointer(btn)")

"" {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. The debug-information is typically the identifier of each item, which can be useful for development and troubleshooting purposes. When debug is set to true, this information is displayed for each item, allowing developers to easily identify and work with specific items in the control. Setting debug to false hides this information, providing a cleaner user interface for end-users.

The debug field is mapped to the Debug property, which means that the following statements are equivalent:

oMenu.Options = {debug: true}
oMenu.SetOptions({debug: true})
oMenu.Debug = true
oMenu.SetDebug(true)

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

The items field defines the items of the control. Each item can have sub-items delimited by parentheses '()'. Each item or sub-item can have one or more flags delimited by square brackets '[]'.

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 field 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 field defines the item's padding, which is the space between the menu border and the item's content. The btnPad field defines the padding of a button, which is the space between the button's border and its content. By adjusting the itemsPad field, you can control the spacing around sub-items within a menu, enhancing the visual organization and readability of nested menu structures.

The itemsPad field is mapped to the ItemsPad property, which means that the following statements are equivalent:

oMenu.Options = {itemsPad: 4}
oMenu.SetOptions({itemsPad: 4})
oMenu.ItemsPad = 4
oMenu.SetItemsPad(4)

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 locked field 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.

The locked field is mapped to the Locked property, which means that the following statements are equivalent:

oMenu.Options = {locked: true}
oMenu.SetOptions({locked: true})
oMenu.Locked = true
oMenu.SetLocked(true)

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

The open field defines the time, in milliseconds, that a top-level item waits before opening its sub-menu when the cursor hovers over it. Setting this value controls the delay before the sub-menu appears, allowing you to adjust the responsiveness of the menu. A lower value makes the sub-menu open quickly, while a higher value introduces a slight pause, which can help prevent accidental menu openings and improve the overall navigation experience.

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

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

The open field is mapped to the Open property, which means that the following statements are equivalent:

oMenu.Options = {open: 0}
oMenu.SetOptions({open: 0})
oMenu.Open = 0
oMenu.SetOpen(0)

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 outClose field defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. By setting this value, you can control how quickly the menu disappears when the user moves the cursor away from it, providing a smoother and more intuitive navigation experience. A shorter outClose time allows for quicker menu interactions, while a longer outClose time can help prevent accidental closures and improve usability when navigating through the menu.

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

The outClose field is mapped to the OutClose property, which means that the following statements are equivalent:

oMenu.Options = {outClose: 0}
oMenu.SetOptions({outClose: 0})
oMenu.OutClose = 0
oMenu.SetOutClose(0)

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 field defines the item's padding, which is the space between the menu border and the item's 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 field defines the padding of a button, which is the space between the button's border and its content. The itemsPad field 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.

The pad field is mapped to the Pad property, which means that the following statements are equivalent:

oMenu.Options = {pad: 4}
oMenu.SetOptions({pad: 4})
oMenu.Pad = 4
oMenu.SetPad(4)

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 field defines a positive number that sets the maximum size of a float or popup menu relative to the document's view area. 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. For example, a value of 1/2 means the float-menu's width and height cannot exceed half of the document's view width and height. 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.

The popupRatio field is mapped to the PopupRatio property, which means that the following statements are equivalent:

oMenu.Options = {popupRatio: 0.5}
oMenu.SetOptions({popupRatio: 0.5})
oMenu.PopupRatio = 0.5
oMenu.SetPopupRatio(0.5)

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, the user can interact with the items (such as clicking or hovering), but cannot select or check any item. This means that no onselect event is fired when the user interacts with the items. In contrast, a locked control does not respond to any user interactions at all, while a read-only control allows interactions but prevents item selection or checking.

The readOnly field is mapped to the ReadOnly property, which means that the following statements are equivalent:

oMenu.Options = {readOnly: true}
oMenu.SetOptions({readOnly: true})
oMenu.ReadOnly = true
oMenu.SetReadOnly(true)

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

The scrollClip field specifies 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 entities, allowing the scroll bar to be displayed without overlapping or obscuring the menu items. This means that when the scroll bar is active, it will not cover any part of the menu items, providing a clearer and more user-friendly interface for navigating through the menu content. If scrollClip is set to false, the scroll bar is not clipped, which may result in it being shown over the menu items, potentially making it more difficult for users to interact with the menu while scrolling.

The scrollClip field is mapped to the ScrollClip property, which means that the following statements are equivalent:

oMenu.Options = {scrollClip: true}
oMenu.SetOptions({scrollClip: true})
oMenu.ScrollClip = true
oMenu.SetScrollClip(true)

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 field specifies 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 allows you to customize various aspects of the scroll bar. By configuring options within the scrollOpt object, you can adjust its style, size, colors, and interaction behavior. This customization ensures that the scroll bar integrates with the overall design of the menu and improves the user experience when navigating content that requires scrolling.

The scrollOpt field is mapped to the ScrollOpt property, which means that the following statements are equivalent:

oMenu.Options = {scrollOpt: {...}}
oMenu.SetOptions({scrollOpt: {...}})
oMenu.ScrollOpt = {...}
oMenu.SetScrollOpt({...})

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

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

The scrollSize field specifies the size (width/height) of the control's scroll bar. The scroll bar is a UI element that allows users to navigate through content that exceeds the visible area of the menu. By setting the scrollSize field, you can control the dimensions of the scroll bar, ensuring it is appropriately sized for user interaction and fits well within the overall design of the menu. A larger scrollSize provides a more prominent and easier-to-use scroll bar, while a smaller scrollSize results in a more compact appearance. By default, scrollSize is 8, meaning that the scroll bar is displayed with a width or height of 8 pixels when it is required for scrolling.

The scrollSize field is mapped to the ScrollSize property, which means that the following statements are equivalent:

oMenu.Options = {scrollSize: 4}
oMenu.SetOptions({scrollSize: 4})
oMenu.ScrollSize = 4
oMenu.SetScrollSize(4)

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 field specifies 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 field using the [sep] flag, and the sepSize field determines how they are rendered visually.

The sepSize field is mapped to the SepSize property, which means that the following statements are equivalent:

oMenu.Options = {sepSize: 4}
oMenu.SetOptions({sepSize: 4})
oMenu.SepSize = 4
oMenu.SetSepSize(4)

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

The shapes field 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 field, 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)

The shapes property is mapped to the Shapes property, which means that the following statements are equivalent:

oMenu.Options = {shapes: "red(item)"}
oMenu.SetOptions({shapes: "red(item)"})
oMenu.Shapes = "red(item)"
oMenu.SetShapes("red(item)")

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 show field specifies how an item that includes a check-box or radio button is displayed. It accepts a value of type Menu.ShowCheckedAsSelectedEnum, which determines whether the checked item is highlighted and whether its check-box or radio button remains visible or is hidden.

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

The show field is mapped to the Show property, which means that the following statements are equivalent:

oMenu.Options = {show: 1}
oMenu.SetOptions({show: 1})
oMenu.Show = 1
oMenu.SetShow(1)

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

The smoothSel field defines the time, in milliseconds, for the control's selection to change from one item to another. A value of 0 makes the change immediate, while a positive value (e.g., 125) makes the transition gradual over the specified time. By adjusting smoothSel, you control how quickly or slowly the selection changes, allowing smoother and more visually consistent transitions between items.

The smoothSel field is mapped to the SmoothSel property, which means that the following statements are equivalent:

oMenu.Options = {smoothSel: 125}
oMenu.SetOptions({smoothSel: 125})
oMenu.SmoothSel = 125
oMenu.SetSmoothSel(125)

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 field specifies 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 over it, to display additional sub-items or options. The subArrangeItemsAs field controls the layout of these sub-items inside the float-menu, determining their alignment, stacking, or flow. It typically accepts a combination of ArrangeItemsEnum flags, 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 the usability and 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

The subArrangeItemsAs field is mapped to the SubArrangeItemsAs property, which means that the following statements are equivalent:

oMenu.Options = {subArrangeItemsAs: 1}
oMenu.SetOptions({subArrangeItemsAs: 1})
oMenu.SubArrangeItemsAs = 1
oMenu.SetSubArrangeItemsAs(1)

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 field defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). By setting this value, you can control how quickly sub-menus at different levels of the menu hierarchy disappear when the user moves the cursor away from them, providing a smoother and more intuitive navigation experience. A shorter subClose time allows for quicker menu interactions, while a longer subClose time can help prevent accidental closures and improve usability when navigating through nested menu structures.

The value of subClose field 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

The subClose field is mapped to the SubClose property, which means that the following statements are equivalent:

oMenu.Options = {subClose: 0}
oMenu.SetOptions({subClose: 0})
oMenu.SubClose = 0
oMenu.SetSubClose(0)

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 field defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). By setting this value, you can control the responsiveness of sub-menus at different levels of the menu hierarchy, allowing for a more tailored and user-friendly navigation experience. A shorter subOpen time makes sub-menus appear quickly, while a longer subOpen time can help prevent accidental openings and improve usability when navigating through nested menu structures.

The value of subOpen field 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

The subOpen field is mapped to the SubOpen property, which means that the following statements are equivalent:

oMenu.Options = {subOpen: 0}
oMenu.SetOptions({subOpen: 0})
oMenu.SubOpen = 0
oMenu.SetSubOpen(0)

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 field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. By default, the tfi field 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 field 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 field 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 field 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.

The tfi field is mapped to the Tfi property, which means that the following statements are equivalent:

oMenu.Options = {tfi: "b monospace 16 <fg blue>"}
oMenu.SetOptions({tfi: "b monospace 16 <fg blue>"})
oMenu.Tfi = "b monospace 16 <fg blue>"
oMenu.SetTfi("b monospace 16 <fg blue>")

null {null}, the tfi field 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 field specifies how much the control scrolls when the user rotates the mouse wheel. This setting allows you to 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 scrolled
• Setting wheelChange to a positive number, such as 5, increases the control's value by that amount each time the wheel is rotated, enabling faster adjustments

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

The wheelChange field is mapped to the WheelChange property, which means that the following statements are equivalent:

oMenu.Options = {wheelChange: 5}
oMenu.SetOptions({wheelChange: 5})
oMenu.WheelChange = 5
oMenu.SetWheelChange(5)

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 field defines the horizontal position to display the context/shortcut-menu relative to the document. The y field defines the vertical position to display the context/shortcut-menu relative to the document. The x and y fields has effect only, if the control is opened as a context-menu (no canvas provided), using the Open() method.

The x field is mapped to the X property, which means that the following statements are equivalent:

oMenu.Options = {x: 0}
oMenu.SetOptions({x: 0})
oMenu.X = 0
oMenu.SetX(0)

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 field defines the vertical position to display the context/shortcut-menu relative to the document. The x field defines the horizontal position to display the context/shortcut-menu relative to the document. The x and y fields has effect only, if the control is opened as a context-menu (no canvas provided), using the Open() method.

The y field is mapped to the Y property, which means that the following statements are equivalent:

oMenu.Options = {y: 0}
oMenu.SetOptions({y: 0})
oMenu.Y = 0
oMenu.SetY(0)

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.