Class WScroll

A wave Scrollbar used to scroll the specific content and provides four controls to navigate the content, such as Home/Previous/Next/End, and also supports the mousewheel control.

Hierarchy (view full)

Constructors

Properties

$oid: number = 0

The object ID. Each object has its own unique $oid. It is mainly used for debugging purpose.

Trick: you can test if a JavaScript object is a ZK object by examining this property, such as `if (o.$oid) alert('o is a ZK object');`

Notice: zk.Class extends from zk.Object (so a class also has $oid)

anchor: HTMLElement
control: HTMLElement
drag: Draggable
edrag: HTMLElement
edragBody: ChildNode
eend: HTMLElement
epos: HTMLElement
node: HTMLElement

The opts of this scrollbar controls.

startPosition

int startPosition

Specifies the start position according to the scrolling area, like offset top for the vertical scrolling and offset left for the horizental scrolling.

startStep

int startStep

Specifies the start step for the scrolling.

Note: it cannot be negative.

endStep

int endStep

Specifies how many steps for the scrolling.

Note: it cannot be negative.

viewport

int viewport

Specifies how many steps will show in the viewport.

Note: it cannot be negative.

viewportSize

int viewportSize

Specifies how many pixels for the viewport size, like offsetHeight for vertical scrolling and offsetWidth for horizental scrolling.

Note: it cannot be negative.

orient

String orient

Specifies either 'vertical' or 'horizontal' to indicate that it can be scrolled only in the vertical or horizontal direction.

Default Value

'horizontal'

<h4>anchor</h4>
DOMElement anchor
<p>Specifies the anchor that indicates the scrollbar will be its child node.

Default Value

the parent node of the control.

<h4>syncSize</h4>
boolean syncSize
<p>Specifies whether to sync the scrolling area size at initial phase.

Default Value

true.

onScrollY

```ts void onScrollY(int step); ```

Specifies the callback function for the vertical scrolling, when user changes the vertical scrolling step.

onScrollX

```ts void onScrollX(int step); ```

Specifies the callback function for the horizental scrolling, when user changes the horizental scrolling step.

offset

int offset

Specifies the offset for the scrolling step to shift when the callback functions (onScrollX and onScrollY) are invoked. For example, if the offset is 2, then the steps in the onScrollX/Y event will start at 2.

Default Value

0

uid: string
widget: Widget<HTMLElement> & {
    _cols?: number;
}

Type declaration

  • Optional _cols?: number
zcls: string
$oid: any
easing: ((x, t, b, c, d) => number) = easing

Sets the easing animation function for the scrolling effects. For more details, please refer to jquery's easing plugin. http://gsgd.co.uk/sandbox/jquery/easing/

Type declaration

    • (x, t, b, c, d): number
    • Sets the easing animation function for the scrolling effects. For more details, please refer to jquery's easing plugin. http://gsgd.co.uk/sandbox/jquery/easing/

      Parameters

      • x: number
      • t: number
      • b: number
      • c: number
      • d: number

      Returns number

Accessors

  • get $class(): typeof ZKObject
  • The class that this object belongs to.

    Returns typeof ZKObject

Methods

  • The constructor.

    Parameters

    • Optional props: Record<string, unknown> | (() => void)

    Returns void

    Default Value

    it does nothing so the subclass needs not to copy back
    (also harmless to call back).

    See

    afterInit

    Deprecated

    as of 10.0 released. Using ES6 constructor instead.

  • Determines if this object is an instance of the class represented by the specified Class parameter. Example:

    if (obj.$instanceof(zul.wgt.Label, zul.wgt.Image)) {
    }

    Parameters

    • Rest ...klass: any[]

      the Class object to be checked. Any number of arguments can be specified.

    Returns boolean

    true if this object is an instance of the class

  • Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

    Example: ```ts multiply: function (n) { return this.$super('multiply', n + 2); } ```

    Type Parameters

    • M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

    • F extends any

    Parameters

    • mtd: M

      the method name to invoke

    • Rest ...args: Parameters<F>

      any number of arguments

    Returns ReturnType<F>

    the object being returned by the method of the superclass.

  • Invokes a method defined in the superclass with any number of arguments. It is like Function's call() that takes any number of arguments.

    It is similar to ZKObject.$super, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

    Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function (n) { return this.$super(foo.MyClass, 'multiply', n + 2); } ```

    Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

    Type Parameters

    • M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

    • F extends any

    Parameters

    • klass: typeof ZKObject

      the class that invokes this method.

    • mtd: M

      the method name to invoke

    • Rest ...args: Parameters<F>

      any number of arguments

    Returns ReturnType<F>

    the object being returned by the method of the superclass.

    See

    zk.Object.$supers

    Since

    5.0.2

  • Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

    Example: ```ts multiply: function () { return this.$supers('multiply', arguments); } ```

    Type Parameters

    • M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

    • F extends any

    Parameters

    • name: M

      the method name to invoke

    • args: Parameters<F>

      an array of arguments. In most case, you just pass arguments (the built-in variable).

    Returns ReturnType<F>

    the object being returned by the method of the superclass.

  • Invokes a method defined in the superclass with an array of arguments. It is like Function's apply() that takes an array of arguments.

    It is similar to zk.Object.$supers, but this method works even if the superclass calls back the same member method. In short, it is tedious but safer.

    Example: ```ts foo.MyClass = zk.$extends(foo.MySuper, { multiply: function () { return this.$supers(foo.MyClass, 'multiply', arguments); } ```

    Notice that the class specified in the first argument is not the super class having the method. Rather, it is the class that invokes this method.

    Type Parameters

    • M extends "anchor" | "$init" | "$supers" | "_$ais" | "_$supers" | "_$proxies" | "_$super" | "_importantEvts" | "afterCreated_" | "afterInit" | "$class" | "get$Class" | "$oid" | "$instanceof" | "$super" | "proxy" | "opts" | "_scale" | "_isVer" | "control" | "node" | "destroy" | "redraw" | "widget" | "syncSize" | "_gap" | "uid" | "zcls" | "edrag" | "edragBody" | "epos" | "eend" | "drag" | "_listenMouseEvent" | "_unlistenMouseEvent" | "_mouseOver" | "_mouseOut" | "_mouseUp" | "_mouseDown" | "_mousewheelY" | "_mousewheelX" | "_initDragdrop" | "_syncButtonStatus"

    • F extends any

    Parameters

    • klass: typeof ZKObject

      the class that invokes this method.

    • name: M

      the method name to invoke

    • args: Parameters<F>

      an array of arguments. In most case, you just pass arguments (the built-in variable).

    Returns ReturnType<F>

    the object being returned by the method of the superclass.

    See

    zk.Object.$super

    Since

    5.0.2

  • Specifies a function that shall be called after the object is initialized, i.e., after zk.Object.$init is called. This method can be called only during the execution of zk.Object.$init.

    It is an advance feature that is used to allow a base class to do something that needs to wait for all deriving classes have been initialized.

    Invocation Sequence:

    • The most derived class's $init (subclass)
    • The based class's $init (if the derived class's $init invokes this.$supers('$init', arguments))
    • The first function, if any, be added with afterInit, then the second (in the same order that afterInit was called)...

    Parameters

    • func: CallableFunction

      the function to register for execution later

    Returns void

    See

    zk.Object.$init

    Deprecated

    as of 10.0 released. Using afterCreated_ instead.

  • Returns void

  • Type Parameters

    Returns T

    the class of the subsclass which extends from zk.Class.

    Since

    10.0.0

  • Proxies a member function such that it can be called with this object in a context that this object is not available. It sounds a bit strange at beginning but useful when passing a member of an object that will be executed as a global function.

    Example: Let us say if you want a member function to be called periodically, you can do as follows. ```ts setInterval(wgt.proxy(wgt.doIt), 1000); //assume doIt is a member function of wgt ```

    With proxy, when doIt is called, this references to wgt. On the other hand, the following won't work since this doesn't reference to wgt, when doIt is called. ```ts setInterval(wgt.doIt, 1000); //WRONG! doIt will not be called with wgt ```

    Notice that this method caches the result so that it will return the same proxied function, if you pass the same function again.

    Type Parameters

    • A extends unknown[]

    • R

    Parameters

    • func: ((...args) => R)

      a method member of this object

        • (...args): R
        • Parameters

          • Rest ...args: A

          Returns R

    Returns ((...args) => R)

    a function that can be called as a global function (that actually have this referencing to this object).

      • (...args): R
      • Parameters

        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0, ...args) => R)
        • (arg0, ...args): R
        • Parameters

          • arg0: A0
          • Rest ...args: A

          Returns R

    Returns ((arg0, ...args) => R)

      • (arg0, ...args): R
      • Parameters

        • arg0: A0
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0, arg1, ...args) => R)
        • (arg0, arg1, ...args): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • Rest ...args: A

          Returns R

    Returns ((arg0, arg1, ...args) => R)

      • (arg0, arg1, ...args): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A2

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0, arg1, arg2, ...args) => R)
        • (arg0, arg1, arg2, ...args): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • arg2: A2
          • Rest ...args: A

          Returns R

    Returns ((arg0, arg1, arg2, ...args) => R)

      • (arg0, arg1, arg2, ...args): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • arg2: A2
        • Rest ...args: A

        Returns R

  • Type Parameters

    • A0

    • A1

    • A2

    • A3

    • A extends unknown[]

    • R

    Parameters

    • func: ((arg0, arg1, arg2, arg3, ...args) => R)
        • (arg0, arg1, arg2, arg3, ...args): R
        • Parameters

          • arg0: A0
          • arg1: A1
          • arg2: A2
          • arg3: A3
          • Rest ...args: A

          Returns R

    Returns ((arg0, arg1, arg2, arg3, ...args) => R)

      • (arg0, arg1, arg2, arg3, ...args): R
      • Parameters

        • arg0: A0
        • arg1: A1
        • arg2: A2
        • arg3: A3
        • Rest ...args: A

        Returns R

  • Parameters

    • p: HTMLElement

    Returns void

  • Syncs the scrolling area and control bar size.

    Parameters

    • Optional opts: Record<string, unknown>

      the opts can override the initail opts data for resizing.

    Returns void

  • Determines if the class by this Class object is either the same as, or is a superclass of, the class represented by the specified Class parameter. Example:

    if (klass1.isAssignableFrom(klass2)) {
    }

    Parameters

    • cls: typeof ZKObject

      the Class object to be checked, such as zk.Widget.

    Returns boolean

    true if assignable

  • Determines if the specified Object is assignment-compatible with this Class. This method is equivalent to [[zk.Object#$instanceof]. Example:

    if (klass.isInstance(obj)) {
    }

    Type Parameters

    Parameters

    • this: T
    • o: unknown

      the object to check

    Returns o is InstanceType<T>

    true if the object is an instance