Простой и удобный спиннер с возможностью арифметических операций.
Пока доступны операции, только с целыми числами.
Для работы спиннера необходим jQuery!
Стиль:
<style>
.touchspin > div{display: inline-block}
</style>
HTML код:
<figure class="touchspin">
<div class="btn dec trigger" data-action="dec"><</div>
<input class="value" value="0" />
<div class="btn inc trigger" data-action="inc">></div>
</figure>
Дополнительные триггеры: <div class="btn trigger" data-action="plus" data-n="6">+6</div> — сложение <div class="btn trigger" data-action="minus" data-n="6">-6</div> — вычитание <div class="btn trigger" data-action="mul" data-n="6">*6</div> — умножение <div class="btn trigger" data-action="div" data-n="6">/6</div> — деление <div class="btn trigger" data-action="percent" data-n="6">%6</div> — проценты
Скрипт JS:
<script>
//Обработка тачспина
$('.touchspin .trigger').on('click', function(){
var ts = $(this).closest('.touchspin');
var trigger = $(this);
var input = ts.find('.value');
var action = trigger.data('action');
var val = parseInt(input.val());
var min = parseInt(input.data('min'));
var max = parseInt(input.data('max'));
var n = parseInt(trigger.data('n'));
switch(action){
case 'inc' : {
val++;
break;
};
case 'dec' : {
val--;
break;
}
case 'plus' : {
val = val+n;
break;
}
case 'minus' : {
val = val-n;
break;
}
case 'mul' : {
val = (val * n);
break;
}
case 'div' : {
val = (val / n);
break;
}
case 'percent' : {
val = ((val / 100) * n);
break;
}
default: val++;
}
val = (val < min) ? min : val;
val = (val > max) ? max : val;
input.val(val);
});
</script>