Plugin form

Adds methods and widget fields validation to the widget.

Field management attributes

• c-type = field || numberfield (filters the input characters, the getValues ​​method for this field only returns numbers);
• c-name = - field name;
• c-validator = phone || email || required - Optional attribute. Multiple validators can be specified divided by a space;
• c-length = - Optional attribute. Includes validation by the length of the value;
• c-mask = - Optional attribute. Adds a mask where input characters are masked by _

Widget methods

• getValues() = {: , ...} - returns field values;
• getErrors() - {: , ...} || null - returns information about fields that failed 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'}

Plugin center

Center the widget horizontally / vertically.

Plugin management attributes

• c-center = x || y || xy;
• c-center-height = - Optional attribute. When aligning a widget, you need to take the maximum - the actual height of the widget or c-center-height (necessary if the hidden widget has an incorrect height).

Usage example

html

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

Plugin draggable

Allows you to move a widget around the page.

Plugin management attributes

• c-draggable = x || y || xy;
• c-draggable-hpadding = - Optional attribute. Horizontal padding. The widget should not cross it;
• c-draggable-vpadding = - Optional attribute. Vertical padding. The widget should not cross it;
• c-dragger = "true" - Is added to drag-and-drop items to change their location on the page.

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) {
    /* ** */
});

Plugin resizable

Allows you to change the height of a widget.

Plugin management attributes

• c-resizer = "true"- It is added to elements which you can use to drag the widget to resize;
• c-resizer-vpadding = <number> - Optional attribute. Optional attribute. Vertical padding. The widget should not cross it.

Widget events

• resizeend = (widget, height)

Usage example

html

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

javascript

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

Plugin slimscroll

Adds a stylized scroll.

Plugin management attributes

• c-slim-scroll = "true"

Usage example

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