Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/artlebedev/expromptum

Expromptum js library
https://github.com/artlebedev/expromptum

Last synced: 7 days ago
JSON representation

Expromptum js library

Host: GitHub
URL: https://github.com/artlebedev/expromptum
Owner: artlebedev
Created: 2014-03-11T15:51:00.000Z (over 10 years ago)
Default Branch: master
Last Pushed: 2024-02-13T13:34:28.000Z (9 months ago)
Last Synced: 2024-03-14T17:13:23.988Z (8 months ago)
Language: JavaScript
Size: 1.1 MB
Stars: 101
Watchers: 21
Forks: 21
Open Issues: 6
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Expromptum

- [Коротко](#summary)
- [Инициализация](#init)
- [Контролы](#controls)
- [Зависимости](#dependencies)
- [Повторения](#repeats)
- [Концепция](#common)
- [Режим диагностики](#debug)

Expromptum — библиотека JavaScript, предназначенная для расширения функциональности работы элементов в HTML.

Использует библиотеку [jQuery](http://jquery.com/) для работы с элементами (версии 1.8.0 и выше).

Чтобы использовать библиотеку надо подключить ее к странице содержащей соответствующий HTML и выполнить [инициализацию](#init).

###### Пример

```html

.field {position: relative;}
.show_on_blured_and_invalid {display: none;}
.blured.invalid .show_on_blured_and_invalid {display: block; position: absolute; left: 0; bottom: -3em;}

...

Enter a valid email address.

...

expromptum();

```

* * *

## Коротко

### [Локализация](#locale)

*По умолчанию на русском языке. Используется в контролах: `number`, `datemonth`, `date`, `datetime`, `date.picker`, `datemonth.picker`, `datetime.picker`. Также считывается `xml:lang` у ``, либо у любого элемента формы. В библиотеке кроме русского есть `en-GB`. Можно добавить свою. Если локализация не задана у контрола, будет проверяться вверх по дереву, вплоть до `html`.*

```html

```

*Инициализация своей локализации*

```html

```

```js
var es_locate = {
abbr: 'es',
prev_month: 'Anterior',
current_month: 'Corriente',
next_month: 'Siguiente',
yesterday: 'Ayer',
today: 'Hoy',
tomorrow: 'mañana',
now: 'Ahora',
close_popup: 'cerca'
}
xP.locale.add(
'es' /*id*/,
es_locate, /*объект локали*/
'en-GB' /*default_id - откуда брать недостающие параметры*/
);

/* добавление производится до инициализации формы */
expromptum();
```

### [Контролы](#controls)

*Тип контрола определяется CSS-селектором или значением свойства `type` в атрибуте `data-xp`. Для остальных свойств контрола указаны противоположные или отличные от используемых по умолчанию значения.*

Форма

```html

```

Группа полей, листы

```html

```

Сворачиваемая панель

```html
Panel 1

```

Лист

```html

Sheet 1

Sheet 2

```

HTML

```html

```

*Без указания зависимости [computed](#dependencies.computed), в этом контроле мало смысла.*

#### Кнопки

Кнопка

```html

Button

Button
```

Кнопка отправки

```html

```

#### Поля для ввода

Строковое поле

```html

```

Текстовое поле

```html

```

Скрытое поле

```html

```

Файловое поле

```html

```

Поле для пароля

```html

```

Поле для числа

```html

```

Поле для года и месяца

```html

```

Поле для даты

```html

```

Поле для даты и времени

```html

```

Поле для эл. почты

```html

```

Поле для телефона

```html

```

#### Календарь

Поле для года и месяца с календарем

```html

```

Поле для даты с календарем

```html

```

Поле для даты и времени с календарем

```html

```

#### Выбор значений

Выпадающий список

```html
...
```

Комбобокс

```html

...
```

Группа переключателей

```html

```

Выпадающий список из переключателей

```html

Item 1

Item 2

```

### [Зависимости](#dependencies)

*Для получения значений контролов в выражениях используются CSS-селекторы по атрибутам (например, `[name=some]`) и `[this]` для данного контрола.*

Управление атрибутом класса

```html

```

Вычисляемое значение

```html

```

Доступность

```html

```

Доступность при полном заполнении

```html

```

Обязательность заполнения

```html

```

Соответствие выражению

```html

```

### [Повторения](#repeats)

```html

...
+
−

```

* * *

## Инициализация

Возвращает [список](#list) expromptum контролов.

`expromptum()`
- Проинициализируются все элементы с атрибутом `data-xp` или подходящие под CSS-селекторы по умолчанию, заданные в контролах.

`expromptum(selector[, expromptum object | jQuery object])`
- Проинициализируются все элементы подходящие под CSS-селектор в первом параметре. Если передан и второй параметр, то селектор будет применен в контексте его элемента.

`expromptum(element | elements array | jQuery object)`
- Проинициализируются элементы переданные в качестве параметра.

* * *

## Список объектов

Возвращает массив объектов с дополнительными методами, позволяющими добавлять в него только уникальные экземпляры объектов.

`new expromptum.list(array)`

#### Методы

`.append(object)`
- Проверяет нет ли переданного объекта в массиве и если нет, добавляет его в конец. Возвращает список объектов.

`.remove(object)`
- Ищет переданный объект в массиве и если находит, удаляет его оттуда. Возвращает список объектов.

`.each(function())`
- Выполняет переданную функцию для каждого объекта в списке. Если функция вернет значение `false`, то перебор объектов завершится. Возвращает список объектов.

`.first([function()])`
- Возвращает первый объект в списке или значение `null`, если список пустой. Может выполнить переданную функцию для первого объекта.

`.last([function()])`
- Возвращает последний объект в списке или значение `null`, если список пустой. Может выполнить переданную функцию для последнего объекта.

`.eq(index[, function()])`
- Возвращает объект с переданным индексом в списке или значение `null`, если такового нет. Может выполнить переданную функцию для найденного объекта.

* * *

## Абстрактный класс

Используется в качестве базового класса для всех остальных.

Класс `expromptum.base`

#### Методы

`.init(params)`
- Конструктор объекта.

`.destroy([function()[, remove]])`
- Деструктор объекта. При передачи в параметре функции, добавляет ее в список. При передаче значения `true` во втором параметре, удаляет функцию из списка. При вызове метода без параметров — выполняет функции в списке. Возвращает объект.

`.change([function()[, remove]])`
- Обработчик изменения значения объекта. При передачи в параметре функции, добавляет ее в список. При передаче значения `true` во втором параметре, удаляет функцию из списка. При вызове метода без параметров — выполняет функции в списке. Возвращает объект.

`.param(name[, value])`
- Чтение и запись свойств объекта. Возвращает значение указанного свойства.

* * *

## Контролы

При инициализации контрола тип определяется по значению параметра `type` в атрибуте `data-xp` или по селектору типа.

###### Пример 1

```html

```

###### Пример 2

```html

```

### Создание нового контрола

###### Пример 1

Поле с проверкой на соответствие выражению.

```js
xP.controls.register({name: 'zip', base: '_field', prototype: {
element_selector: '.zip input, input.zip',
valid: /^\d{6}$/,
allow_chars_pattern: /^\d+$/
}});
```

###### Пример 2

Слайдер для числового значения с использованием виджета [Slider](http://jqueryui.com/slider/).

```js
xP.controls.register({name: 'slider_number', base: 'number', prototype: {
element_selector: '.slider input',

init: function(params){
xP.controls.slider_number.base.init.apply(this, arguments);

var that = this;

var slider = this._param(
'slider',
$('

')
.appendTo(this.$element.parent())
.slider({
min: params.min,
max: params.max,
value: this.val(),
slide: function(event, ui){
that.val(ui.value);
}
})
);

this.change(function(){
slider.slider('value', this.val());
});
},

destroy: function(handler, remove){
if(!arguments.length){
this._param('slider').destroy();
}

return xP.controls.slider_number.base.destroy.apply(
this, arguments
);
},

param: function(name, value){
switch(name){
case 'min':
case 'max':
case 'step':
this._param('slider').slider('option', name, value);

break;
};

return xP.controls.slider_number.base.param.apply(
this, arguments
);
},

disable: function(disabled){
disabled = !arguments.length || disabled;

if(this.disabled !== disabled){
this._param('slider').slider(
disabled ? 'disable' : 'enable'
);
}

return xP.controls.slider_number.base.disable.apply(
this, arguments
);
}
}});
```

###### Пример 3

Слайдер для набора значений с использованием виджета [Slider](http://jqueryui.com/slider/).

```js
xP.controls.register({name: 'slider_select', base: 'select', prototype: {
element_selector: '.slider select',

init: function(params){
xP.controls.slider_select.base.init.apply(this, arguments);

var that = this;

var slider = this._param(
'slider',
$('

')
.insertAfter(this.$element)
.slider({
min: 0,
max: this.$element[0].options.length - 1,
value: this.$element[0].selectedIndex,
slide: function(event, ui){
that.$element[0].selectedIndex = ui.value;
}
})
);

this.change(function(){
slider.slider('value', this.$element[0].selectedIndex);
});
},

destroy: function(handler, remove){
if(!arguments.length){
this._param('slider').destroy();
}

return xP.controls.slider_select.base.destroy.apply(
this, arguments
);
},

param: function(name, value){
switch(name){
case 'min':
case 'max':
case 'step':
this._param('slider').slider('option', name, value);

break;
};

return xP.controls.slider_select.base.param.apply(
this, arguments
);
},

disable: function(disabled){
disabled = !arguments.length || disabled;

if(this.disabled !== disabled){
this._param('slider').slider(
disabled ? 'disable' : 'enable'
);
}

return xP.controls.slider_select.base.disable.apply(
this, arguments
);
}
}});
```

###### Пример 4

Поле с редактированием через [Реформатор](http://www.artlebedev.ru/tools/reformator/).

```js
xP.controls.register({name: 'wysiwyg', base: 'string', prototype: {
element_selector: '.wysiwyg textarea',

init: function(params){
xP.controls.wysiwyg.base.init.apply(this, arguments);
this._param('reformator', reformator.append(this.$element[0], {bar: true}));
},

destroy: function(handler, remove){
if(!arguments.length){
this._param('reformator').destroy();
}

return xP.controls.wysiwyg.base.destroy.apply(this, arguments);
}
}});
```

* * *

### Абстрактный контрол

- Тип `_item`
- Базовый тип [`xP.base`](#base)

Используется в качестве базового класса для классов контролов.

#### Свойства

`.$element`
- jQuery-объект, указывающий на основной элемент контрола.

`.$container`
- jQuery-объект, указывающий на элемент, найденный по CSS-селектору из свойства `container_selector` или на основной элемент.

`.disabled`
- Логическое значение `true` или `false`, в зависимости от доступности контрола.

`.container_selector`
- CSS-селектор по которому находится элемент контейнер.

`.container_disabled_class = 'disabled'`
- Имя CSS-класса, назначаемое элементу контейнеру в зависимости от доступности контрола.

`.autofocus`
- Логическое значение `true` или `false`, по которому определяется необходимость перехода фокуса на данный контрол при инициализации.

#### Методы

`.remove()`
- Удаляет контрол, в том числе, и все его элементы из DOM-дерева.

`.parent()`
- Возвращает родительский контрол.

`.root()`
- Возвращает корневой контрол.

`.val([value])`
- Чтение и запись значения контрола.

`.disable([disabled])`
- Определяет доступность контрола. Возвращает данный контрол.

* * *

### HTML

- Тип `html`
- Базовый тип [`_item`](#controls._item)
- Селектор элемента `.xp_html`

Используется для вывода в HTML значений других контролов через зависимость [`computed`](#dependencies.computed).

###### Пример

```html

+
-
*
/

```

* * *

### Абстрактный родитель

- Тип `_parent`
- Базовый тип [`_item`](#controls._item)
- Селектор элемента `.xp`

Используется в качестве базового класса для всех контролов, которые могут выступать родителем для других.

#### Методы

`.children()`
- Возвращает список контролов, находящихся внутри данного.

`.val([object | objects array])`
- Позволяет принимать в качестве значения объект или массив объектов. Значения свойств объекта будут устанавливаться в качестве значений для одноименных контролов, находящихся внутри данного.

`.focus()`
- Устанавливает фокус. Возвращает данный контрол.

* * *

### Форма

- Тип `form`
- Базовый тип [`_parent`](#controls._parent)
- Селектор элемента `form`

#### Свойства

`.completed_on_required = true`
- Логическое значение `true` или `false`, по которому определяется считается ли форма готовой для отправки при незаполненных обязательных контролах.

`.completed_on_valid_required = true`
- Логическое значение `true` или `false`, по которому определяется считается ли форма готовой для отправки при неправильно заполненных обязательных контролах.

`.completed_on_valid = false`
- Логическое значение `true` или `false`, по которому определяется считается ли форма готовой для отправки при неправильно заполненных контролах.

`.completed_on_changed = false`
- Логическое значение `true` или `false`, по которому определяется считается ли форма готовой для отправки если не менялось значение хотя бы одного из контролов.

`.locked = false`
- Логическое значение `true` или `false`, по которому определяется возможность отправки формы. Можно использовать для калькуляторов или форм работающих через ajax.

#### Методы

`.submit([function()[, remove]])`
- Обработчик события отправки формы.
1. При передачи в параметре функции, добавляет ее в список. При передаче значения `true` во втором параметре, удаляет функцию из списка. Возвращает контрол.
2. При вызове метода без параметров — выполняет функции в списке. Возвращает логическое значение `true` или `false`.

`.uncompleted()`
- Проверяет готовность формы. Если готова, возвращает `null`. Иначе — строку в которой указана причина (`required`, `invalid_required`, `invalid`, `unchanged`).
Получить [список](#list) конфликтных контролов, можно через метод `._param('зависимость')`.

###### Пример

```html

Name

Message

(function(){
expromptum();

var uncompleted = $('#uncompleted');

expromptum('form').first().change(function(){
var html = '';

this._param('required')
.append(this._param('invalid'))
.each(function(){
html += (html ? ', ': '') + this.$label.text();
});

uncompleted.html((html ? 'Fill fields: ' : '') + html);
});
})();

```

* * *

### Группа полей, листы

- Тип `fields`
- Базовый тип [`_parent`](#controls._parent)
- Селектор элемента `fieldset, .fields, .sheets`

#### Свойства

`.name`
- Имя группы полей. Необходимо для получения и присвоения значений при использовании повторений у данного контрола.

`.$label`
- jQuery-объект, указывающий на элемент с атрибутом `for` равным `id` основного элемента данного контрола.

#### Методы

`.count()`
- Возвращает количество находящихся внутри данного контролов с непустыми значениями.

* * *

### Лист

- Тип `sheet`
- Базовый тип [`fields`](#controls.fields)
- Селектор элемента `.sheet`

#### Свойства

`.$label`
- jQuery-объект, указывающий на элемент с атрибутом `for` равным `id` основного элемента данного контрола.

`.selected_class = 'selected'`
- Имя CSS-класса, назначаемое элементам отмеченного контрола (контейнеру и подписи).

`.unselected_class = 'unselected'`
- Имя CSS-класса, назначаемое элементам не отмеченных контролов (контейнерам и подписям).

#### Методы

`.select([select])`
- Отмечает контрол. Возвращает данный контрол.

`.show([complete])`
- Отмечает контрол и выполняет после этого переданную функцию. Возвращает данный контрол.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#sheet)

* * *

### Сворачиваемая панель

- Тип `foldable`
- Базовый тип [`fields`](#controls.fields)
- Селектор элемента `.foldable`

#### Свойства

`.duration = 200`
- Продолжительность сворачивания (разворачивания) контрола в миллисекундах.

`.folded_class = 'folded'`
- Имя CSS-класса, назначаемое элементам свернутого контрола (контейнеру и подписи).

`.unfolded_class = 'unfolded'`
- Имя CSS-класса, назначаемое элементам не свернутого контрола (контейнеру и подписи).

#### Методы

`.fold([fold, complete])`
- Сворачивает или разворачивает (в случае `fold = false`) контрол и выполняет после этого функцию переданную в параметре `complete`. Возвращает данный контрол.

`.show([complete])`
- Отмечает контрол и выполняет после этого переданную функцию. Возвращает данный контрол.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#foldable)

* * *

### Абстрактное поле

- Тип `_field`
- Базовый тип [`_parent`](#controls._parent)
- Селектор элемента `input`
Селектор контейнера `.field`

#### Свойства

`.$label`
- jQuery-объект, указывающий на элемент с атрибутом `for` равным `id` основного элемента данного контрола.

`.allow_chars_pattern`
- RegExp, содержащий разрешенные для ввода с клавиатуры символы.

`.container_blured_class = 'blured'`
- Имя CSS-класса, назначаемое элементу контейнера после того, как произойдет событие `blur` у основного элемента данного контрола.

#### Методы

`.val([value])`
- Чтение и запись значения контрола.

* * *

### Строковое поле

- Тип `string`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `input[type=text], input:not([type])`

* * *

### Текстовое поле

- Тип `text`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `textarea`

* * *

### Скрытое поле

- Тип `hidden`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `input[type=hidden]`

* * *

### Файловое поле

- Тип `file`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `input[type=file]`

* * *

### Кнопка

- Тип `button`
- Базовый тип [`_parent`](#controls._parent)
- Селектор элемента `input[type=button], button, .button`

#### Методы

`.click([function()[, remove]])`
- Обработчик нажатия кнопки. При передачи в параметре функции, добавляет ее в список. При передаче значения `true` во втором параметре, удаляет функцию из списка. При вызове метода без параметров — выполняет функции в списке. Возвращает контрол.

* * *

### Кнопка отправки

- Тип `submit`
- Базовый тип [`_item`](#controls._item)
- Селектор элемента `input[type=submit], button[type=submit]`

* * *

### Выпадающий список

- Тип `select`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `select`

#### Свойства

`.hide_disabled_option = true`
- Определяет видимость недоступных элементов. При значении `false` нужный результат будет только в тех браузерах, которые это поддерживают.

`enable_by = 'value'`
- Определяет по какому свойству option определять доступность.

#### Методы

`.disable([disabled[, values]])`
- Определяет доступность контрола. Второй параметр может содержать одно или массив значений к которым нужно применить первый параметр. Возвращает данный контрол.

`.append(values)`
- Добавляет пункты выбора. Параметр может содержать одно или массив значений. Каждое из значений может быть: строкой, массивом (вида: `[значение для подписи, значение для value]`) или объектом (вида: `{value: значение для value, label: значение для подписи}`). Возвращает данный контрол.

`.remove()`
- Удаляет все пункты выбора. Возвращает данный контрол.

`.text()`
- Возращает текстовое значение выбранного option.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#select)

* * *

### Группа переключателей

- Тип `options`
- Базовый тип [`fields`](#controls.fields)
- Селектор элемента `.options`

Группирующий контрол, применяемый для назначения зависимостей на группу переключателей или включателей.

* * *

### Выпадающий список из переключателей

- Тип `selectus`
- Базовый тип [`options`](#controls.options)
- Селектор элемента `.selectus`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#selectus)

* * *

### Абстрактный переключатель

- Тип `_option`
- Базовый тип [`_field`](#controls._field)
Селектор контейнера `.option`

Используется в качестве базового класса для контролов переключателей и включателей.

#### Свойства

`.container_selector = '.option'`
- CSS-селектор по которому находится элемент контейнер.

`.selected = null`
- Логическое значение `true` или `false`, по которому определяется отмечен данный контрол или нет.

`.container_initial_selected_class = 'initial_selected'`
- Имя CSS-класса, назначаемое элементу контейнеру если данный контрол был отмечен на момент инициализации.

`.container_selected_class = 'selected'`
- Имя CSS-класса, назначаемое элементу контейнеру если данный контрол отмечен.

#### Методы

`.select([selected])`
- Определяет отмечен контрол или нет.

`.append(values)`
- Добавляет пункты выбора. Параметр может содержать одно или массив значений. Каждое из значений может быть: строкой, массивом (вида: `[значение для value, значение для подписи]`) или объектом (вида: `{value: значение для value, label: значение для подписи}`). Возвращает список добавленных контролов.

* * *

### Переключатель

- Тип `radio`
- Базовый тип [`_option`](#controls._option)
- Селектор элемента `input[type=radio]`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#radio)

* * *

### Включатель

- Тип `checkbox`
- Базовый тип [`_option`](#controls._option)
- Селектор элемента `input[type=checkbox]`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#radio)

* * *

### Поле для эл. почты

- Тип `email`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `.email input, input.email`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#email)

* * *

### Поле для телефона

- Тип `phone`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `.phone input, input.phone`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#phone)

* * *

### Поле для года и месяца с календарем

- Тип `date_picker`
- Базовый тип [`date`](#controls.date)
- Селектор элемента `input.datemonth.picker, .datemonth.picker input`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#picker_datemonth)

* * *

### Поле для даты с календарем

- Тип `date_picker`
- Базовый тип [`date`](#controls.date)
- Селектор элемента `input.date.picker, .date.picker input`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#picker_date)

* * *

### Поле для даты и времени с календарем

- Тип `date_picker`
- Базовый тип [`date`](#controls.date)
- Селектор элемента `input.datetime.picker, .datetime.picker input`

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#datetime_picker)

* * *

### Абстрактное поле со скрытым полем

- Тип `_secret`
- Базовый тип [`_field`](#controls._field)

Используется в качестве базового класса для всех контролов, внешний вид которых требует создания альтернативных элементов для ввода данных.

#### Свойства

`.$secret`
- jQuery-объект, указывающий на на основной элемент контрола, который трансформирован в скрытый.

* * *

### Поле для пароля

- Тип `password`
- Базовый тип [`_secret`](#controls._field-со-скрытым-полем)
- Селектор элемента `input[type=password]`

Позволяет управлять видимостью введенных символов в поле для ввода пароля.

#### Свойства

`.container_view_class = 'alt'`
- Имя CSS-класса, назначаемое элементу контейнеру после нажатия на дополнительно созданный элемент управления.

`.control_button_view_class = 'control_button_password_view'`
- Имя CSS-класса, назначаемое элементу управления после нажатия на него.

`.control_button_view_html = ''`
- HTML-код для создания элемента управления видом контрола.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#password)

* * *

### Поле для числа

- Тип `number`
- Базовый тип [`_secret`](#controls._field-со-скрытым-полем)
- Селектор элемента `input.number, .number input`

Позволяет вводить только числа и управлять значением с помощью стрелок на клавиатуре или созданных дополнительно элементов управления.

#### Свойства

`.step = 1`
- Шаг, на который будет меняться значение контрола.

`.min = 1 - Number.MAX_VALUE`
- Минимальное значение контрола.

`.def = 0`
- Значение по умолчанию, используемое в методах `inc` и `dec` при пустом `value`.

`.max = Number.MAX_VALUE - 1`
- Максимальное значение контрола.

`.element_wrap_html = ''`
- HTML-код обертки для созданного дополнительно элемента, через который будет осуществляться ввод данных пользователем.

`.control_button_dec_html = ''`
- HTML-код кнопки увеличения значения контрола.

`.control_button_inc_html = ''`
- HTML-код кнопки уменьшения значения контрола.

#### Методы

`.inc()`
- Увеличивает значения контрола. Возвращает данный контрол.

`.dec()`
- Уменьшает значения контрола. Возвращает данный контрол.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#number)

* * *

### Поле для года и месяца

- Тип `datemonth`
- Базовый тип [`_field`](#controls._field)
- Селектор элемента `input.datemonth, .datemonth input`

#### Методы

`.date([date])`
- Чтение и запись даты в качестве значения контрола.

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#datemonth)

* * *

### Поле для даты

- Тип `date`
- Базовый тип [`datemonth`](#controls.datemonth)
- Селектор элемента `input.date, .date input`

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#date)

* * *

### Поле для даты и времени

- Тип `datetime`
- Базовый тип [`date`](#controls.date)
- Селектор элемента `input.datetime, .datetime input`

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#datetime)

* * *

### Комбобокс

- Тип `combobox`
- Базовый тип [`string`](#controls.string)
- Селектор элемента `.combobox input, input.combobox, input[list]`

Ввод данных с возможность выбора значений из выпадающего списка.

#### Свойства

`.search_from_start = true`
- Логическое значение true или false, по которому определяется каким образом фильтровать данные в списке — при совпадении с началом строки или в любом ее фрагменте.

`.case_sensitive = false`
- Логическое значение true или false, по которому определяется каким образом фильтровать данные в списке — с учетом регистра или без.

`.[list](#controls._combolist)`
- Контрол, указывающий на список значений.

[Демо](http://www.artlebedev.ru/tools/expromptum/controls/#combobox)

* * *

### Список для комбобокса

- Тип `_combolist`
- Базовый тип [`select`](#controls.select)

Вспомогательный контрол для комбобокса.

#### Методы

`.show()`
- Показывает список. Возвращает данный контрол.

`.hide()`
- Скрывает список. Возвращает данный контрол.

* * *

## Зависимости

### Абстрактная зависимость

- Тип `_item`
- Базовый тип [`expromptum.base`](#base)

Используется в качестве базового класса для всех зависисмостей.

#### Свойства

`.to='[this]'`
- Свойство, указывающее на контрол к которому применяется зависисмость.

* * *

### Управление атрибутом класса

- Тип `classed`
- Базовый тип [`_item`](#dependencies._item)

#### Свойства

`.on`
- Логическое выражение, в случае выполнения которого, элементу контейнеру контрола указанного в свойстве `to`, будет назначено имя CSS-класса из свойства `do`.

`.do`
- Имя CSS-класса.

###### Пример 1

```html

```

###### Пример 2

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#classed)

* * *

### Вычисляемое значение

- Тип `computed`
- Базовый тип [`_item`](#dependencies._item)

#### Свойства

`.on`
- Выражение, результат которого будет присвоен в качестве значения (через метод `.val(значение)`) контролу, указанному в свойстве `to`.

`.do`
- Имя свойства. Если указано значение, то результат выражения будет присвоен свойству (через метод `.param(свойство, значение)`) контрола, указанного в свойстве `to`.

###### Пример 1

```html

+
-
*
/

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#computed)

* * *

### Доступность

- Тип `enabled`
- Базовый тип [`_item`](#dependencies._item)

#### Свойства

`.on`
- Логическое выражение, в случае **не**выполнения которого, контрол, указанный в свойстве `to`, будет недоступен для работы (`disabled`).

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#enabled)

* * *

### Доступность при полном заполнении

- Тип `enabled_on_completed`
- Базовый тип [`_item`](#dependencies._item)

В зависимости от выполнения условий на обязательность и правильность заполнения формы, делает контрол доступным или недоступным для работы (`disabled`).

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#enabled_on_completed)

* * *

### Абстрактная зависимость на полное заполнение

- Тип `_rooted`
- Базовый тип [`_item`](#dependencies._item)

Используется в качестве базового класса для остальных зависисмостей, которые могут быть задействованы в условиях полного заполнения формы.

* * *

### Обязательность заполнения

- Тип `required`
- Базовый тип [`_rooted`](#dependencies._rooted)

#### Свойства

`.on`
- Логическое значение true. Или логическое выражение, в случае выполнения которого, контрол указанный в свойстве `to`, становится обязательным для заполнения.

`.container_required_class = 'required'`
- Имя CSS-класса, назначаемое элементу контейнеру контрола, в случае, если он не заполнен.

`.container_unrequired_class = 'unrequired'`
- Имя CSS-класса, назначаемое элементу контейнеру контрола, в случае, если он заполнен.

###### Пример 1

```html

```

###### Пример 2

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#required)

* * *

### Соответствие выражению

- Тип `valid`
- Базовый тип [`_rooted`](#dependencies._rooted)

#### Свойства

`.on`
- Логическое выражение, от результата работы которого зависит считается ли данный контрол правильно заполненным.

`.container_valid_class = 'valid'`
- Имя CSS-класса, назначаемое элементу контейнеру контрола, в случае, если выражение в свойстве `on` возвращает `true`.

`.container_invalid_class = 'invalid'`
- Имя CSS-класса, назначаемое элементу контейнеру контрола, в случае, если выражение в свойстве `on` возвращает `false`.

###### Пример

```html

```

[Демо](http://www.artlebedev.ru/tools/expromptum/dependencies/#valid)

* * *

### Изменение

- Тип `changed`
- Базовый тип [`_rooted`](#dependencies._rooted)

Данная зависимость назначается всем контролам при инициализации.

#### Свойства

`.container_changed_class = 'changed'`
- Имя CSS-класса, назначаемое элементу контейнеру контрола, в случае, если его значение было изменено.

* * *

## Повторения

#### Свойства

`.max = 300`
- Максимальное число повторений, по достижении которого, перестает быть доступным контрол добавления.

`.min = 1`
- Минимальное число повторений, по достижении которого, перестает быть доступным контрол удаления.

`.reset`
- Логическое значение true сбрасывает значения добавляемых контролов. Для каждого из контролов можно задавать свое соответствующее значение в свойстве `reset_on_repeat`.

`.template`
- Логическое значение true определяет данный контрол в качестве шаблона для добавляемых контролов.

###### Пример 1
```html

−

```

[Демо](http://www.artlebedev.ru/tools/expromptum/repeats/)

* * *

## Концепция работы с библиотекой

Все значения свойств у основных объектов библиотеки (контролов, зависимостей и повторений) устанавливаются через параметры при инициализации или через вызов метода `.param('имя', значение)`. Получение значений возможно и через прямое обращение к свойству.

Большинство методов основных объектов библиотеки возвращают сам объект.

Методы и свойства названия которых начинаются с символа подчеркивания, предназначены только для использования внутри библиотеки. Если же есть необходимости обратится к таким свойствам, это следует делать через вызов метода `._param('имя', значение)`.

Названия свойств, значениями которых являются jQuery-объекты, начинаются с символа доллара.

* * *

## Режим диагностики

Для диагностики работы в адресной строке можно передать параметр `xP=значение`. При этом в консоль браузера будут выводится все обнаруженные ошибки и соответствующие значению сообщения:
`controls` — инициализация контролов;
`submit` — отправка формы;
`dependencies` — инициализация и обработка всех зависимостей;
`classed`, `enabled`, `enabled_on_completed`, `required`, `valid`, `changed` — обработка зависимостей данного типа;
`repeats` — инициализация повторений.

* * *