Плагин form

Добавляет методы виджету и валидацию для полей виджета.

Атрибуты для управления полями

• c-type = field || numberfield (фильтрует вводимые символы, метод getValues для этого поля возвращает только цифры);
• c-name = - название поля;
• c-validator = phone || email || required - необязательный атрибут - может быть задано несколько валидаторов через пробел;
• c-length = - необязательный атрибут - включает валидацию по длине значения;
• c-mask = - необязательный атрибут - добавляет маску, где вводимые символы маскируются символом _

Методы виджета

• getValues() = {: , ...} - возвращает значения полей;
• getErrors() - {: , ...} || null - возвращает информацию о полях, которые не прошли валидацию, либо null.

Пример использования

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

Центрирует виджет по горизонтали/вертикали.

Атрибуты для управления плагином

• c-center = x || y || xy;
• c-center-height = - необязательный атрибут - при выравнивании виджета берется максимум - фактическая высота виджета или c-center-height (нужно в случае, если скрытый виджет имеет некорректную высоту).

Пример использования

html

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

Плагин draggable

Позволяет перемещать виджет по странице.

Атрибуты для управления плагином

• c-draggable = x || y || xy;
• c-draggable-hpadding = - необязательный атрибут - отступ по горизонтали, за который виджет не должен заступать;
• c-draggable-vpadding = - необязательный атрибут - отступ по вертикали, за который виджет не должен заступать;
• c-dragger = "true" - добавляется элементам, за которые можно тянуть, для изменения местоположения на странице.

События виджета

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

Пример использования

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

Позволяет изменять высоту виджета.

Атрибуты для управления плагином

• c-resizer = "true"- добавляется элементам, за которые можно тянуть виджет для изменения размера;
• c-resizer-vpadding = <number> - необязательный атрибут - отступ по вертикали, за который виджет не должен заступать.

События виджета

• resizeend = (widget, height)

Пример использования

html

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

javascript

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

Плагин slimscroll

Добавляет стилизованный скролл.

Атрибуты для управления плагином

• c-slim-scroll = "true"

Пример использования

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