new Item(oParent)
The
Item object holds all information about an item within the
RadialMenu object
Every option of the RadialMenu.ItemOptions type has associated a property of the Item object. For instance, the option:
caption {string}, defines the item's caption
is associated with the property:
Caption {string}, defines the item's caption
which means that the following statements are equivalent:
oItem.Options = {caption: "font"}
oItem.SetOptions({caption: "font"})
oItem.Caption = "font"
oItem.SetCaption("font")
where oItem is an object of
Item type
Parameters:
| Name |
Type |
Description |
oParent |
Item
|
Indicates an object of Item type that specifies the parent of the item. |
Members
Caption :string
The Caption property defines the item's caption in
ex-HTML format. The caption is shown on the "items" portion of the control. The
SubCaption property defines the item's caption (ex-HTML format, shown under the "sub-items" portion only). You can include pictures in the caption using the
![]()
tag. For instance, the caption "<img>logo</img>" displays the "logo" image within the item's caption. The "logo" image can be added using the exontrol.
HTMLPicture.Add method. The
Image property specifies the image to be displayed on the "items" portion of the control, while the Caption property specifies the caption (ex-HTML format) to be displayed on the "items" portion of the control.
Type:
Example
null {null}, indicates no caption
"caption" {string}, declares a plain-caption
"<b>text</b>" {string}, displays the text in bold
"<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
Caption
Color :string
The Color property defines the item's background color to be shown within the "items" portion of the control. The
SubColor property specifies the item's background color in the "sub-items" portion. The
Shapes property defines the shapes used by each part of the control, allowing customization of its appearance. By default, items are displayed as pie shapes, while on the sub-items layer they appear as ring arcs. No color is applied by default, so the item's background is transparent.
The Color property accepts any CSS color value, such 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)
Type:
Example
null {null}, indicates no color
"red" {string}, defines a red-pie
"rgb(255,0,0)" {string}, defines a red-pie
"rgba(255,0,0,0.5)" {string}, defines a 50% red-pie
Color
Disabled :boolean
The Disabled property disables or enables the item (including the root item). Setting the Disabled property to true disables the item and all its descendant items, while setting it to false enables the item (if its parent is enabled) and all its descendant items. The
AllowToggleExpand property defines whether the user can expand or collapse the item while it is disabled. By default, the
Enabled property is set to true, which means that all items are enabled by default.
Type:
Example
false {boolean}, enables the item (including all its descendent items)
true {boolean}, disables the item
Disabled
Enabled :boolean
The Enabled property enables or disables the item (including the root item). Setting the Enabled property to false disables the item and all its descendant items, while setting it to true enables the item (if its parent is enabled) and all its descendant items. The
AllowToggleExpand property defines whether the user can expand or collapse the item while it is disabled. By default, the Enabled property is set to true, which means that all items are enabled by default.
Type:
Example
false {boolean}, disables the item (including all its descendent items)
true {boolean}, enables the item
Enabled
Image :string
The Image property defines the name of the image or picture the item displays (the "items" section only). The image can be added using the exontrol.
HTMLPicture.Add method. You can also display a picture in the
Caption property using the <img>
ex-HTML tag. The
DisplayParentType.imageAlign field specifies the alignment of the image relative to the caption (valid for the content only). The
DisplayParentType.imageSize field specifies the aspect ratio used to display the image.
Type:
Example
null {null}, indicates no image
"logo" {string}, displays the "logo" image
Image
(readonly) Index :number
The Index property returns the item's index (0-based). This index is relative only to the item's siblings collection, meaning it reflects the item's order among its siblings. As a result, different items can share the same index if they belong to different sibling collections. The index indicates the order in which items are added, while the position determines the order in which they are displayed. For example, if three items are added as item1, item2, and item3, their indexes are 0, 1, and 2. If item3 has its position set to 0, the display order becomes item3, item1, item2, but their indexes remain unchanged (0, 1, and 2). The
Position property gets or sets the display order of the item, while the Index property retrieves its original insertion order.
Type:
Example
The following statements are equivalent:
oItem.GetIndex() {number}, returns the index of the item (0-based)
oItem.Index {number}, returns the index of the item (0-based)
where oItem is an object of Item type
Index
Key :string
The Key property defines the key for the item. If no key is provided, the item's plain-caption can be used to request an item. The plain-caption includes no
ex-HTML tags, such as <b>, <fgcolor>, and so on. For instance, the caption "<fgcolor red>logo</fgcolor>" has the plain-caption "logo". The Key property can be used to request an item using the
Root.Item(key) method.
Type:
Example
"logo" {string}, defines the item with the giving key (logo). You can use the Root.Item("logo") method to request the item giving its key.
Key
The Options property defines the options of the item as an object of RadialMenu.ItemOptions type. Each field within the options object corresponds to a property of the item. For instance, the
caption field of the RadialMenu.ItemOptions object corresponds to the
Item.Caption property, which means that the following statements are equivalent:
oItem.SetOptions({caption: "font"})
oItem.Options = {caption: "font"}
oItem.Caption = "font"
oItem.SetCaption("font")
where oItem is an object of
Item type.
Type:
Example
The following statements are equivalent:
oItem.SetOptions({visible: false})
oItem.Options = {visible: false}
oItem.Visible = false
oItem.SetVisible(false)
where oItem is an object of Item type
Options
The Parent property retrieves the parent of the item. Use the
Item.Parent property to get the parent of an item. The parent of the root item is null, while the parent of any other item is an object of
Item type. The Parent property is read-only. You can use the
Item.Add() method to add a child item to an item, which automatically sets the parent of the child item to that item. The
GoBack() method of the control allows you to browse back to the parent of the currently browsed item, while the
Item() method allows you to request an item by its key or caption.
Type:
- Since:
Example
The following statements are equivalent:
oItem.GetParent() {Item}, gets the parent of the item
oItem.Parent {Item}, gets the parent of the item
where oItem is an object of Item type
Parent
Position :number
The Position property defines the item's position (0-based). This position is relative only to the item's siblings collection, meaning it reflects the item's order among its siblings. As a result, different items can share the same position if they belong to different sibling collections. The index indicates the order in which items are added, while the position determines the order in which they are displayed. For example, if three items are added as item1, item2, and item3, their indexes are 0, 1, and 2. If item3 has its position set to 0, the display order becomes item3, item1, item2, but their indexes remain unchanged (0, 1, and 2). The Position property gets or sets the display order of the item, while the
Index property retrieves its original insertion order.
Type:
Example
0 {number}, indicates that the item should be displayed first
2 {number}, indicates that the item should be displayed third
Position
SubCaption :string
The SubCaption property defines the item's caption (
ex-HTML format, shown under the "sub-items" portion only). The
Caption property is shown on the "items" portion of the control. You can include pictures in the SubCaption using the
![]()
tag. For instance, the SubCaption "
![]()
logo" displays the "logo" image within the item's sub-caption. The "logo" image can be added using the exontrol.
HTMLPicture.Add method. The
SubImage property specifies the image to be displayed on the "sub-items" portion of the control, while the SubCaption property specifies the caption (ex-HTML format) to be displayed on the "sub-items" portion of the control.
Type:
Example
null {null}, indicates no caption
"caption" {string}, declares a plain-caption
"<b>text</b>" {string}, displays the text in bold
"<img>logo</img>" {string}, displays the "logo" image. The image can be added using the exontrol.HTMLPicture.Add method
SubCaption
SubColor :string
The SetSubColor() method sets the item's background color to be shown within the "sub-items" portion of the control. The
Color property defines the item's background color in the "items" portion. The
Shapes property defines the shapes used by each part of the control, allowing customization of its appearance. By default, items are displayed as pie shapes, while on the sub-items layer they appear as ring arcs. No color is applied by default, so the item's background is transparent.
Type:
Example
null {null}, indicates no color
"red" {string}, defines a red-pie
"rgb(255,0,0)" {string}, defines a red-pie
"rgba(255,0,0,0.5)" {string}, defines a 50% red-pie
SubColor
SubImage :string
The SubImage property defines the name of the image or picture the item displays in the "sub-items" section only. The image can be added using the exontrol.
HTMLPicture.Add method. You can also display a picture in the
SubCaption property using the <img>
ex-HTML tag. The
DisplayParentType.imageAlign field specifies the alignment of the sub-image relative to the sub-caption (valid for the content only). The
DisplayParentType.imageSize field specifies the aspect ratio used to display the sub-image.
Type:
Example
null {null}, indicates no image
"logo" {string}, displays the "logo" image
SubImage
Visible :boolean
The Visible property shows or hides the item. Setting the Visible property to false hides the item and all its descendant items, while setting it to true shows the item (if its parent is visible) and all its descendant items. The method has no effect on the root item, which is always visible. The
Root property gets the root-item of the item. By default, the item is visible (the Visible property is true).
Type:
Example
false {boolean}, hides the item (including all its descendent items)
true {boolean}, shows the item
Visible
Methods
Add(oOpts) → {Item}
The Add() method adds a child item. You can define the items of the control using the
items field with a string representation such as "File(New,Open),Exit", or by using the Add() method. The Add() method inserts a child item into the item, meaning it appends the child item to the end of the current item's children collection. The
Position property specifies the item's position among its siblings; however, the Add() method always adds the child item to the end of the current item's children collection. The
Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The
Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself.
Parameters:
| Name |
Type |
Description |
oOpts |
RadialMenu.ItemOptions
|
Specifies an object of RadialMenu.ItemOptions type that holds information about the item, such as caption, image and so on. If the oOpts parameter is not-of object type it indicates the item's ex-HTML caption instead. |
Returns:
Returns the child-item as an object of Item type
-
Type
-
Item
Example
oRadialMenu.Root.Add("File"), adds a child-item with caption "File" to the root-item of the control
oRadialMenu.Root.Add({caption: "File", image: "fileIcon", key: "file"}), adds a child-item with caption "File" image "fileIcon" and key "file" to the root-item of the control
Add
Clear()
The Clear() method clears the item's descendants only. The
Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself. The
Visible property specifies whether the item is visible or hidden, while the
Enabled property specifies whether the item is enabled or disabled. The Root.Remove() is equivalent with Root.Clear() as it clears all items of the control.
Example
oItem.Clear(), clears the item's descendants only
oRadialMenu.Root.Clear(), clears all items of the control as it clears the root-item's descendants
Clear
Item(key) → {Item}
The Item() method searches for an item giving its key or plain caption. The key can be defined using the [key] flag within the
Load() method, or by using the
Key property of the item. If no key is provided, the item's plain-caption can be used to request an item. The plain-caption includes no
ex-HTML tags, such as <b>, <fgcolor> and so on. For instance, the caption "<fgcolor red>logo</fgcolor>" has the plain-caption "logo". The Item() method searches for an item with a matching key or plain-caption within the current item's descendants and returns it. The
Root.Item() method searches for an item with a matching key or plain-caption within all items of the control and returns it.
Parameters:
| Name |
Type |
Description |
key |
any
|
The key parameter can be any of the following:
- key {object}, Indicates an object of Item that specifies the item itself
- key {string}, Specifies the item's key or plain-caption
|
Returns:
Returns null or an object of Item type with specified key / caption that descends from the item.
-
Type
-
Item
Example
oItem.Item("logo"), searches for an item with key or plain-caption "logo" within the current item's descendants and returns it
oRadialMenu.Root.Item("logo"), searches for an item with key or plain-caption "logo" within all items of the control and returns it
Item
Load(value) → {Item}
The Load() method loads the item with a string representation. The Load() method is used by the
Root.Load() method to load the control with a string representation. The Load() method can also be used to load an item with a string representation, which allows you to define the item's children and their options in a single statement. The string-representation supports the following flags: [key], [vis]/[hid], [dis], [img], [color], [scap], [simg] and [scolor]. For instance, the string "File[img=fileIcon](New,Open),Exit" defines an item with caption "File", image "fileIcon" and two sub-items with captions "New" and "Open", and another item with caption "Exit". The image "fileIcon" can be added using the exontrol.
HTMLPicture.Add method.
The following statements are equivalent:
oRadialMenu.Root.Load("File[img=fileIcon](New,Open),Exit")
oRadialMenu.Items = "File[img=fileIcon](New,Open),Exit"
Parameters:
| Name |
Type |
Description |
value |
string
|
Indicates a string expression that defines the items of the control from a string-representation.
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][...], ...), ...
where item1, sub-item1, sub-itemn, ... indicate the caption of the item and its sub-items, and flag=value indicates one or more flags that can be applied on the item or sub-item.
The string-representation supports the following flags:
| Flag |
Description |
Sample |
| "[scap]" | Indicates the caption to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubCaption property, which specifies the caption to be displayed on the "sub-items" portion of the control for this item. If the sub-caption is not specified, no caption is displayed for the item on the "sub-items" portion of the control | [scap=<b>Exit] |
| "[key]" | Specifies the item's key, equivalent of Item.Key property, which is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. If the key is missing, the plain caption is used as key. The key is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. | [key=color] |
| "[img]" | Sets the item's image, equivalent of Item.Image property, which specifies the image to be displayed on the item, in the "items" ring. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the image is not specified, no image is displayed for the item | [img=logo] |
| "[color]" | Sets the item's background color (applied on "items" ring), equivalent of Item.Color property, which specifies the background color of the item. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red) | [color=red] |
| "[simg]" | Indicates the image to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubImage property, which specifies the image to be displayed on the "sub-items" portion of the control for this item. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the sub-image is not specified, no image is displayed for the item on the "sub-items" portion of the control | [simg=logo] |
| "[scolor]" | Defines the item's background color on the "sub-items" portion of the control, equivalent of Item.SubColor property, which specifies the background color of the item on the "sub-items" portion of the control. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red) | [scolor=red] |
| "[vis]/[hid]" | Shows or hides the item, equivalent of Item.Visible property, which indicates whether the item is visible or hidden. A hidden item is not shown on the control, but it still exists in the items collection and can be retrieved and shown later | [vis=0] |
| "[dis]" | Enables or disables the item, equivalent of Item.Enabled property, which indicates whether the item is enabled or disabled. A disabled item is shown on the control but appears grayed out and does not respond to user interaction, while an enabled item is fully interactive and responds to user actions such as clicks | [dis=0] |
| "[pos]" | Sets the item's 0-based position, equivalent of Item.Position property, which determines the order of the item among its siblings. The position is a non-negative integer value, where 0 represents the first position. If the position is not specified, the item is added at the end of the items collection | [pos=0] |
|
Returns:
Returns the item itself.
-
Type
-
Item
Example
Load("1,2,3"), adds three child-items.
Load
Remove()
The Remove() method removes the item (including all its descendants). The Remove method removes the item from its parent's children collection, meaning it removes the item from its siblings collection. The
Clear() method clears only the item's descendants, meaning it removes all children of the item and their descendants, but not the item itself. The
Visible property specifies whether the item is visible or hidden, while the
Enabled property specifies whether the item is enabled or disabled. The Root.Remove() is equivalent with Root.Clear() as it clears all items of the control.
Example
oItem.Remove(), removes the item from its parent's children collection
Remove
Save() → {string}
The Save() method returns the string-representation of the item, and all its descendent-items. You can use the Save method to get the string-representation of the items of the control, which can be later loaded using the
Load() method. The Load() method replaces the current item, which means it removes the item, and replaces with a new content. For instance, Load("") removes the element! The
Item.Save() method returns the string-representation of the item and all its descendants, while the Root.Save() method returns the string-representation of all items of the control.
Returns:
Returns the string representation of the item, and all its descendent-items.
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][...], ...), ...
where item1, sub-item1, sub-itemn, ... indicate the caption of the item and its sub-items, and flag=value indicates one or more flags that can be applied on the item or sub-item.
The string-representation supports the following flags:
| Flag |
Description |
Sample |
| "[scap]" | Indicates the caption to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubCaption property, which specifies the caption to be displayed on the "sub-items" portion of the control for this item. If the sub-caption is not specified, no caption is displayed for the item on the "sub-items" portion of the control | [scap=<b>Exit] |
| "[key]" | Specifies the item's key, equivalent of Item.Key property, which is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. If the key is missing, the plain caption is used as key. The key is used to identify the item and retrieve it later (for instance, via RadialMenu.Item(key) method). The key is a string value that should be unique among sibling items. | [key=color] |
| "[img]" | Sets the item's image, equivalent of Item.Image property, which specifies the image to be displayed on the item, in the "items" ring. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the image is not specified, no image is displayed for the item | [img=logo] |
| "[color]" | Sets the item's background color (applied on "items" ring), equivalent of Item.Color property, which specifies the background color of the item. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red) | [color=red] |
| "[simg]" | Indicates the image to be displayed on the "sub-items" portion of the control for this item, equivalent of Item.SubImage property, which specifies the image to be displayed on the "sub-items" portion of the control for this item. The image can be specified as a string that represents the name of an image in the control's image collection, previously added using the exontrol.HTMLPicture.Add method. If the sub-image is not specified, no image is displayed for the item on the "sub-items" portion of the control | [simg=logo] |
| "[scolor]" | Defines the item's background color on the "sub-items" portion of the control, equivalent of Item.SubColor property, which specifies the background color of the item on the "sub-items" portion of the control. The color can be specified as a string that represents a color name (such as "red", "blue", "green", etc.), a hexadecimal color code (such as "#FF0000" for red), or an RGB/RGBA/HSL/HSLA color function (such as "rgb(255,0,0)" for red) | [scolor=red] |
| "[vis]/[hid]" | Shows or hides the item, equivalent of Item.Visible property, which indicates whether the item is visible or hidden. A hidden item is not shown on the control, but it still exists in the items collection and can be retrieved and shown later | [vis=0] |
| "[dis]" | Enables or disables the item, equivalent of Item.Enabled property, which indicates whether the item is enabled or disabled. A disabled item is shown on the control but appears grayed out and does not respond to user interaction, while an enabled item is fully interactive and responds to user actions such as clicks | [dis=0] |
| "[pos]" | Sets the item's 0-based position, equivalent of Item.Position property, which determines the order of the item among its siblings. The position is a non-negative integer value, where 0 represents the first position. If the position is not specified, the item is added at the end of the items collection | [pos=0] |
-
Type
-
string
Example
oRadialMenu.Root.Save(), returns the string-representation of all items of the control as it returns the string-representation of the root-item and all its descendants
Save
forEach(callBack, thisArg)
The forEach() method enumerates recursively the children items (not including the item itself). The
Root property gets the root-item of the item. The
Root.forEach() method enumerates all root-items and their descendants, while the Item.forEach() method enumerates the current item's children and their descendants.
Parameters:
| Name |
Type |
Description |
callBack |
callBack
|
Specifies the function to perform for each child item. The callback supports one parameter as explained:
- item {Item}, specifies the item as an object of Item type
|
thisArg |
any
|
Indicates the value of this keyword during the callback. If not specified, this indicates the current item. |