Class: Options

RadialMenu.Options()

new Options()

The RadialMenu.Options type defines additional options of the Gauge.Options type.

Every option of the RadialMenu.Options and Gauge.Options types has associated a property of the control. For instance, the option:

cursors {string}, defines the mouse cursor to display when pointing over different parts of the control
is associated with the property:
Cursors {string}, defines the mouse cursor to display when pointing over different parts of the control
which means that the following statements are equivalent:
oRadialMenu.Options = {cursors: "pointer(anchor)"}
oRadialMenu.SetOptions({cursors: "pointer(anchor)"})
oRadialMenu.Cursors = "pointer(anchor)"
oRadialMenu.SetCursors("pointer(anchor)")
where oRadialMenu is an object of RadialMenu type

Members

(static) allowToggleExpand :boolean

The allowToggleExpand field allows expanding/collapsing the root of the radial-menu
Type:
  • boolean
Example
false {boolean}, specifies that the user can't expand or collapse the control while the "parent" portion of the control is clicked
  true {boolean}, specifies that the control is expanded or collapsed once the user clicks the "parent" portion of the control

(static) browseItem :any

The browseItem field indicates the item being browsed (only visible items can be browsed)
Type:
  • any
Example
"al" {string}, specifies that the item with the key "al" should be browsed.

(static) circular :boolean

The circular field specifies whether the radial-menu is shown as circular instead of elliptical.
Type:
  • boolean
Example
false {boolean}, specifies an elliptical radial-menu.
  true {boolean}, specifies an circular radial-menu.

(static) collapseLayers :string

The collapseLayers field specifies the list of layers to be shown while the control is collapsed (separated by comma) The collapseLayers field has effect only if the control shows as collapsed (expanded property is false)
Type:
  • string
Example
null {null}, specifies that the collapseLayers is ignored, so the default value is used instead
 "" {string}, indicates than no layes is shown when the control is collapsed
 "parent,items" {string}, indicates that the control shows the "parent" adnd "items" layers/sections when the control is collapsed

(static) displayAngle :number

The displayAngle field specifies the angle (degree) to display the items around the radial menu.
Type:
  • number
Example
0 {number}, defines a 0-degree display angle
 90 {number}, defines a 90-degree display angle
 270 {number}, defines a 270-degree (-90) display angle

(static) displayItems :DisplayItemsType

The displayItems field customizes the item's content (caption, image or arrow) to be displayed on the "items" portion of the control, as an object of {arrow, arrowColor, arrowSize, image, caption, content, imageAlign, imageSize, radial} type
Type:

(static) displayParent :DisplayParentType

The displayParent field customizes the item's content (caption, image) to be displayed on the "parent" portion of the control, as an object of {imageAlign, imageSize, visible} type
Type:

(static) displaySubItems :DisplayItemsType

The displaySubItems field customizes the item's content (caption, image or arrow) to be displayed on the "sub-items" portion of the control, as an object of {arrow, arrowColor, arrowSize, image, caption, content, imageAlign, imageSize, radial} type
Type:

(static) expanded :boolean

The expanded field specifies whether the control shows as expanded or collapsed
Type:
  • boolean
Example
false {boolean}, collapses the control.
  true {boolean}, expands the control.

(static) highlightAny :boolean

The highlightAny field indicates whether any pie of the radial-menu is highlighted once the cursor hovers it, or just the pies that host items.
Type:
  • boolean
Example
false {boolean}, specifies that only items are highlighted
 true {boolean}, indicates that any pie gets highlighted once the cursor hovers it

(static) items :string

The items field defines the items of the radial-menu 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])"
The string-representation supports the following flags:
  • [key] {string}, specifies the item's key (Key/GetKey()/SetKey(value) methods of Item). If missing, the item's plain-caption (caption with no HTML tags) is considered as item's key. You can get an item giving its key using Root.Item(key) method. For instance, [key=color], change the item's key to "color"
  • [vis]/[hid] {number}, shows or hides the item (Visible/GetVisible()/SetVisible(value) methods of Item). For instance, [vis=0] or [hid], hides the item, while [vis=1] shows the item
  • [dis] {number}, enables or disables the item (Enabled/GetEnabled()/SetEnabled(value) methods of Item). For instance, [dis=0] or [dis], disables the item, while [dis=1] enables the item
  • [pos] {number}, changes the item's position (0-based) (Position/GetPosition()/SetPosition(value) methods of Item). For instance, [pos=0] indicates that the item should be displayed first
  • [img] {string}, assigns a image/picture to the item (Image/GetImage()/SetImage(value) methods of Item). For instance, [img=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [simg] flag to define the item's image to be displayed on the "sub-items" portion of the control.
  • [color] {string}, specifies the item's background color (Color/GetColor()/SetColor(value) methods of Item). For instance, [color=red] or [color=rgba(255,0,0,1)] shows the item's background color in red. The [color] flag is applied for "items" portion of the control. You can use the [scolor] flag to define the item's background color for "sub-items" portion of the control.
  • [scap] {string}, specifies the item's caption to be displayed by "sub-items" portion only (SubCaption/GetSubCaption()/SetSubCaption(value) methods of Item). For instance, [scap=<b>Exit] displays Exit in bold.
  • [simg] {string}, specifies the item's image to be shown under "sub-items" section of the control (SubImage/GetSubImage()/SetSubImage(value) methods of Item). For instance, [simg=logo] assigns the "logo" picture to the item. The image can be added using the exontrol.HTMLPicture.Add() method. You can use the [img] flag to define the item's image to be displayed on the "items" portion of the control.
  • [scolor] {string}, specifies the item's background color to be displayed by "sub-items" portion only (SubColor/GetSubColor()/SetSubColor(value) methods of Item). For instance, [scolor=red] or [scolor=rgba(255,0,0,1)] shows the item's background color in red. The [scolor] flag is applied for "sub-items" portion of the control. You can use the [color] flag to define the item's background color for "items" portion of the control.
Type:
  • string
Example
"" {string}, clears the items collection
 "A(A1,A2,A3),B(B1,B2(B2.1,B2.2),B3)" {string}, defines the item "A" with three child-items "A1", "A2" and "A2", and item "B" with child-items "B1", "B2", and "B3", also defines the "B2.1" and "B2.2" as children of item "B2"
 "A[img=logo][hid],B[dis]" {string}, defines the item "A" hidden and with the image "logo" and item "B" as disabled.

(static) minVisibleCount :number

The minVisibleCount field specifies the minimum number of items being visible on the radial menu. The number should be between 0 and 360.
Type:
  • number
Example
4 {number}, specifies that 4 is the minimum number of items being visible on the radial menu
 8 {number}, specifies that 8 is the minimum number of items being visible on the radial menu

(static) parentSize :string

The parentSize field defines the expression / value to determine the size of the "parent" portion of the control. The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Type:
  • string
Example
null {null}, indicates that parentSize field is ignored, and so the default value is used
 "24" {string}, specifies that the size of "parent" portion of the control is always 24-pixels
 "value/2" {string}, indicates that the size of "parent" portion is half of the control's radius

(static) shapes :string

The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. The format of shapes 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.RadialMenu object (while it starts with a lowercase letter, such as subitems which refers to exontrol.Shapes.RadialMenu.subitems 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:
  • "subitems" , defines the visual appearance for background/sub-items portion of the control.
  • "items" , defines the visual appearance for items portion of the control.
  • "parent" , defines the visual appearance for parent portion of the control.
Type:
  • string
Example
"red(parent)", "#FF0000(parent)", "rgb(255,0,0)(parent)", "rgba(255,0,0,1)(parent)" {string}, shows the parent on a red-square
 '{"fillColor":"red","primitive":"Circle"}(parent)' {string}, , shows the parent on a red-circle
 "dfsubitems(subitems),dfitems(items),dfparent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.dfsubitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.dfitems object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.dfparent object defines the visual appearance of "parent" portion of the control
 "subitems(subitems),items(items),parent(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.subitems object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.items object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.parent object defines the visual appearance of "parent" portion of the control
 "xxx(subitems),yyy(items),zzz(parent)" {string}, specifies that the exontrol.Shapes.RadialMenu.xxx object defines the visual appearance of "subitems" portion of the control, exontrol.Shapes.RadialMenu.yyy object defines the visual appearance of "items" portion of the control and exontrol.Shapes.RadialMenu.zzz object defines the visual appearance of "parent" portion of the control

(static) subItemsSize :string

The subItemsSize field defines the expression / value to determine the size of the "subitems" portion of the control. The expression supports the following keywords:
"value", indicates the radius in pixels, of the radial menu.
Type:
  • string
Example
null {null}, indicates that subItemsSize field is ignored, and so the default value is used
 "24" {string}, specifies that the size of "subitems" portion of the control is always 24-pixels
 "value/2" {string}, indicates that the size of "subitems" portion is half of the control's radius

(static) sweepOnSelect :boolean

The sweepOnSelect field specifies whether browsed-items are arranged around the selected radial-item
Type:
  • boolean
Example
false {boolean}, specifies that the browsed-items are not arranged around the selected radial-item
 true {boolean}, specifies that the browsed-items are arranged around the selected radial-item