MiscellaneousOptions class (Rollist)

MiscellaneousOptions()

new MiscellaneousOptions()

The MiscellaneousOptions object defines the control's default miscellaneous options, hold by misc option of the Rollist.Options

For instance, the "hAlign" option:

misc: { hAlign: 1 }
changes the miscellaneous' hAlign option of the control to specified value
MiscellaneousOptions

Members

(static) gradualOpacity :string

The gradualOpacity field defines a 'from-to' pair representing a gradual opacity transition, where the 'from' value is applied near the center (at the selectPos position), and the 'to' value is applied to the surrounding area. The gradualOpacityTransition field defines the transition effect applied by the gradualOpacity option.
Type:
  • string
Example
null {null} or "" {string}, no effect (by default)
 "1 - 0.25" {string}, results in an opacity transition from 1 (fully opaque) at the center (selectPos) to 0.75 (slightly transparent) toward the edges
 0.5 {number}, semi-transparent for all
gradualOpacity

(static) gradualOpacityTranstion :string|array

The gradualOpacityTransition field defines the transition effect applied by the gradualOpacity option. It accepts one of the following values:
  • "linear" {string}, applies a constant-speed (linear) transition
  • "ease" {string}, applies a smooth transition that starts slowly, speeds up, then slows down
  • "ease-in" {string}, applies a transition that starts slowly and then accelerates
  • "ease-out" {string}, applies a transition that starts quickly and then decelerates
  • "ease-in-out" {string}, applies a transition that starts and ends slowly, with a faster middle phase
  • "ease-in-out-expo" {string}, applies a more dramatic ease-in-out transition with exponential acceleration and deceleration
  • "swipe" {string}, applies a custom swipe-like transition using a bezier curve
      Alternatively, a custom bezier curve can be specified using an array of four values:
      [P1.x, P1.y, P2.x, P2.y]
      This defines the two control points P1 and P2 for the cubic bezier curve used during the transition. The x-values of both P1 and P2 must be between 0 and 1, as required for valid CSS timing functions. You can use the exontrol.Bezier control to effortlessly visualize or define various transition types.
Type:
  • string | array
Example
undefined {undefined}, null {null} or "ease" {string}, defined the default transtion to "ease"
 "ease-in" {string}, applies a transition that starts slowly and then accelerates
 [0,1,1,0] {array}, creates a custom-transition
gradualOpacityTranstion

(static) hAlign :number

The hAlign field specifies the horizontal alignment of roll items along the top edge of the control, as a positive value.
  • A value of 0 aligns the items near the top-left corner
  • A value of 1 aligns them near the top-right corner
  • A value of 0.5 places them at the top-center
  • Values greater than 1 align the items beyond the top-right corner
.
Type:
  • number
Example
null {null} or 0.25 {number}, the roll-items go to the top-center of the control
 1 {number}, the roll-items go to the top-right corner of the control
hAlign

(static) selectPos :number

The selectPos field defines the vertical ratio for where the selected item is displayed, ranging from -1 (top) to 1 (bottom), with 0 indicating the center.
  • A value between 0 and -1 positions the selected item progressively closer to the top of the control
  • A value of 0 centers the selected item within the control
  • A value between 0 and 1 positions the selected item progressively closer to the bottom of the control
.
Type:
  • number
Example
null {null} or 0 {number}, centers the selected item
 -1 {number}, always displays the selected item at the top of the control
selectPos

(static) tagName :string

The tagName field defines the type of HTML items to create within the control. The item's className property specifies an additional class name to apply to the HTML element that hosts the item.
Type:
  • string
Example
null {null} or "pre" {string}, specifies that items are hosted in <pre> HTML elements by default
 "div" {string}, indicates that items are hosted in <div> HTML elements
tagName

(static) vAlign :number

The vAlign field specifies a positive value that determines the vertical position of the top edge of the rectangle.
  • A value of 0 keeps the top edge at its initial position
  • A value of 1 shifts the top edge downward by the height of the rectangle
  • A value of 2 shifts it downward by twice the rectangle's height
  • Higher values continue shifting it further down accordingly
.
Type:
  • number
Example
null {null} or 0 {number}, keeps the top edge at its initial position
 1 {number}, shifts the top edge downward by the height of the rectangle
vAlign