Skip to content

Form plugin

Adds methods to a widget and validation for widget fields.

Attributes for managing fields

  • c-type = field || numberfield filters input characters. For numberfield, the getValues() method returns only digits.
  • c-name = <string> is the field name.
  • c-validator = phone || email || required is an optional attribute. You can specify several validators separated by spaces.
  • c-length = <number> is an optional attribute that enables validation by value length.
  • c-mask = <string> is an optional attribute that adds a mask in which user-entered characters replace the _ placeholders.

Widget methods

  • getValues() = {<c-name>: <value>, ...} returns field values.
  • getErrors() = {<c-name>: <c-validator>, ...} || null returns information about fields that did not pass validation, or null.

Usage example

HTML

<input
    c-mask="+7 (___) ___-__-__"
    c-name="phone"
    c-type="numberfield"
    c-validator="required phone">

JavaScript

widget.getErrors(); // {phone: 'required'}
widget.getValues(); // {phone: '78000000000'}

Center plugin

Centers the widget horizontally and/or vertically.

Attributes for managing the plugin

  • c-center = x || y || xy
  • c-center-height = <number> is an optional attribute. When aligning a widget, the plugin uses the larger of the actual widget height and c-center-height. This is useful when a hidden widget reports an incorrect height.

Usage example

HTML

<div
    c-center="xy"
    c-center-height="420">
</div>

Draggable plugin

Allows moving the widget around the page.

Attributes for managing the plugin

  • c-draggable = x || y || xy
  • c-draggable-hpadding = <number> is an optional horizontal padding that the widget must not cross.
  • c-draggable-vpadding = <number> is an optional vertical padding that the widget must not cross.
  • c-dragger = "true" is added to elements that can be dragged to change the widget position.

Widget events

  • dragend = (widget, {left, right, top, bottom})

Usage example

HTML

<div
    c-draggable="xy"
    c-draggable-hpadding="40"
    c-draggable-vpadding="40">
    <div c-dragger="true"></div>
</div>

JavaScript

widget.on('dragend', function (widget, position) {
    /* ... */
});

Resizable plugin

Allows changing the widget height.

Attributes for managing the plugin

  • c-resizer = "true" is added to elements that can be dragged to resize the widget.
  • c-resizer-vpadding = <number> is an optional vertical padding that the widget must not cross.

Widget events

  • resizeend = (widget, height)

Usage example

HTML

<div
    c-resizer="true"
    c-resizer-vpadding="40">
</div>

JavaScript

widget.on('resizeend', function (widget, height) {
    /* ... */
});

Slimscroll plugin

Adds a styled scrollbar.

Attributes for managing the plugin

  • c-slim-scroll = "true"

Usage example

HTML

<div
    c-slim-scroll="true">
</div>