INPUT Spinner для min и max / Элементы / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 318

Количество символов:

Посмотрели: 2504 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/ESxNDQ

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, поле, input, Ввод, сниппет, Bootstrap, html, бутстрап

Поделился: IZOTOP

Добавлено: 2015-12-13 в 01:25

Метка: 1582098147

⇄ ⇅

.input-group-btn-vertical {
 position: relative;
 white-space: nowrap;
 width: 2%;
 vertical-align: middle;
 display: table-cell;
}

.input-group-btn-vertical > .btn {
 display: block;
 float: none;
 width: 100%;
 max-width: 100%;
 padding: 8px;
 margin-left: -1px;
 position: relative;
 border-radius: 0;
}

.input-group-btn-vertical > .btn:first-child {
 border-top-right-radius: 4px;
}

.input-group-btn-vertical > .btn:last-child {
 margin-top: -2px;
 border-bottom-right-radius: 4px;
}

.input-group-btn-vertical i {
 position: absolute;
 top: 0;
 left: 4px;
}
</style>

</div></div>

$('.spinner .btn:first-of-type').on('click', function() {
 var btn = $(this);
 var input = btn.closest('.spinner').find('input');
 if (input.attr('max') == undefined || parseInt(input.val()) < parseInt(input.attr('max'))) { 
 input.val(parseInt(input.val(), 10) + 1);
 } else {
 btn.next("disabled", true);
 }
 });
 $('.spinner .btn:last-of-type').on('click', function() {
 var btn = $(this);
 var input = btn.closest('.spinner').find('input');
 if (input.attr('min') == undefined || parseInt(input.val()) > parseInt(input.attr('min'))) { 
 input.val(parseInt(input.val(), 10) - 1);
 } else {
 btn.prev("disabled", true);
 }
 });

})
</script>

BootstrapTema

INPUT Spinner для min и max

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0