v 0.9.5

Вступление #

Кастомизация поля "выбор количества", можно использовать по умолчанию класс .js-quantity-selector.

Установка #

Пример разметки и инициализации поля.

    <input class="js-quantity-selector" type="number" min="0" max="100" step="25">

    BasicQuantitySelector.init('.my-quantity-selector');
    BasicQuantitySelector.init(document.querySelector('.my-quantity-selector'));
    BasicQuantitySelector.init(document.querySelectorAll('.my-quantity-selector'));

    // или

    BasicQuantitySelector.init(); // по умолчанию инициaлизирует элементы с классом .js-quantity-selector

Так же можно заранее инициализировать с необходимыми параметрами:

	BasicQuantitySelector.init(document.querySelector('.my-quantity-selector'), {
		'decInner': 'Minus',
		'incInner': 'Plus',
		'addClass': ['quantity-selector-A', 'quantity-selector-B']
	});

Конфигурация #

Настройки, которые указываются при помощи обычных атрибутов.

Название Тип Описание
min number Минимальное число для выбора.
max number Максимальное число для выбора.
step number Шаговый интервал для изменения значения, принимает так же числа с плавающей запятой.

data-selector-options #

В значение указываются параметры для гибкой настройки кастомизированного "выбор количества".

	<input
		class="js-quantity-selector"
		data-selector-options='{
			"decInner": "Minus",
			"incInner": "Plus",
			"addClass": ["quantity-selector-A", "quantity-selector-B"]
		}'
		type="number"
		min="0"
		max="100"
		step="25"
	>

Параметры:

Название Тип Описание
decInner string Контент триггера "уменьшения"(decrement).
incInner string Контент триггера "увеличения"(increment).
addClass string/object Дополнительные классы для род.обёртки(.quantity-selector).

Методы #

inputValue() #

Добавить новое значение в селектор.

	BasicQuantitySelector.value({
		'selector': document.querySelector('.my-quantity-selector'),
		'value':    100
	});

где в конфигурациях указывается:

Название Тип Описание
selector string/object Селектор, которому необходимо добавить значение(по умолчанию js-quantity-selector).
value number Принимает значение в виде числа и которое необходимо добавить в селектор.

inputClear() #

Очистить селектор от значения.

	BasicQuantitySelector.clear(document.querySelector('.my-quantity-selector')); // так же принимает строковое значение

Прослушивание событий #

Можно прослушать события элемента и получить необходимые параметры.

quantitySelector change #

Срабатывает при изменение значения поля.

Параметры:

Название Тип Описание
event.detail.element object Элемент, на котором сработало событие.
event.detail.value number Эначение элемента.
event.detail.step number Шаговый интервал для изменения значения.
event.detail.min number Минимальное число для выбора.
event.detail.max number Максимальное число для выбора. 
    document.querySelector('.my-quantity-selector').addEventListener('quantitySelector change', function() {

        console.log(event.detail); // параметры

    }, false);