Другой город
Начать проект

Плагин управления количеством JQUERY, CSS. Инструкция и примеры

В этой статье Мы покажем Вам, как сделать блок с числом, которое можно ввести с помощью клавиатуры и регулировать при помощи кнопок “плюс”\“минус”. Этот способ, например, может пригодиться в интернет-магазинах для указания количества единиц покупаемого товара.

Подготовка к работе

Смотреть ДЕМО        Скачать пример

Для начала нам необходимо написать простейшую разметку нашего блока в html документе.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Плагин</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <main>
        <div class="count">
              <span class="minus">—</span> 
              <input type="number" value="1">
              <span class="plus">+</span>
       </div>
    </main>
</body>
</html>

, где

<input type="number" value="1">

поле ввода типа число со значением «1»,

<span class="minus">—</span>
<span class="plus">+</span>

строчные элементы для дальнейшего регулирования числа в поле ввода.

Далее допишем немного стилей, что бы оно красиво выглядело.

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 90px;
    padding: 15px;
    background: #e8f0f6;
    border-radius: 30px;
}
.count input {
    width: 48px;
    border: none;
    border-bottom: 1px #404040 solid;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

, где

input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

нужно для того, что бы убрать стандартные переключатели поля ввода

knopka

 И вот у нас появился красивый блок для ввода числа и его регулирования при помощи кнопок, но чего-то не хватает. Не хватает скрипта, который свяжет наши кнопки с полем ввода и , собственно, скажет – зачем они здесь. В этом нам поможет JavaScript и библиотека JQuery. Для реализации данного шага нашей задачи нам нужно подключить стандартную библиотеку JQuery, в нашем случае это версия 3.3.1. JQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Для начала Вам понадобится сам фреймворк, его вы сможете скачать на официальном сайте JQuery. Затем его нужно подключить рядом с подключением CSS-файла следующим способом:

<script src="/js/jquery-3.3.1.min.js"></script>

Далее перейдём к написанию самого кода при помощи вставки тега «script». Как правило, скрипты вставляют в конце тела сайта или же после селектора, в котором они используются:

<script>
$('.minus').click(function () { // вызов функции при клике на элемент
     var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
     var count = parseInt($input.val()) - 1; // объявление переменной, преобразование значения в число и уменьшение его на 1
     count = count < 1 ? 1 : count; // условие, которое говорит "Если значение переменной меньше 1 то запиываем 1"
     $input.val(count); // присвоение атрибута value переменной count переменной $input
});
$('.plus').click(function () { // вызов функции при клике на элемент
     var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
     $input.val(parseInt($input.val()) + 1); // объявление переменной, преобразование значения в число и увеличение его на 1
});
</script>

, где мы сделали так, что бы значение атрибута «value» элемента «input» увеличивалось при нажатии на плюс и уменьшалось при нажатии на минус, а также поставили ограничение, что бы нельзя было минусовать ниже единицы.

knopka2

Теперь, мы немного усложним задачу и сделаем так, что бы в пассивном состоянии кнопки пропадали и было видно только число, а при фокусировке или наведении на элемент этот блок отображался полностью. Для этого нам нужно дописать стили и немного скрипта с использованием JQ.

И так, для начала нужно дописать стили, что бы они приняли такой вид:

.count {
    display: flex; 
    justify-content: center;
    text-align: center;
    align-items: center;
    max-width: 45px;
    max-height:45px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    padding: 15px;
    margin: auto;
    background: #e8f0f6;
    border-radius: 30px;
    -webkit-transition: max-width 0.5s;
    -moz-transition: max-width 0.5s;
    -o-transition: max-width 0.5s;
    transition: max-width 0.5s;
}
.count:hover,
.count.active {
    max-width: 110px;
    background: #fff;
    border: 1px #c2c2c2 solid;
}
.count:hover input,
.count.active input {
    border-bottom: 1px #404040 solid;
    margin-bottom: -1px;
}
.count input {
    width: 45px;
    border: none;
    background: transparent;
    text-align: center;
    padding: 0;
    margin: 0;
    margin-left: -3px;
}
.count span {
    cursor: pointer;
}
.count .minus{
    font-size: 12px;
    margin-right: 10px;
}
.count .plus{
    margin-left: 10px;
}
input[type='number'] {
    -moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

, где мы добавили box-sizing: border-box; - что бы значение ширины/высоты рассчитывалось учитывая внутренние отступы, overflow: hidden; - что бы блок обрезал элементы, которые выходят за его предел, margin: auto; - что бы выровнять блок по центру и transition: max-width 0.5s; - что бы блок открывался анимировано. Также мы добавили стили для hover-эффекта и эффекта при активном блоке(который будет работать после добавления скрипта, написанного ниже).

knopka3

И так, hover-эффект уже работает, но этого мало, нам ведь ещё нужно, что бы он работал при фокусировке, то есть, когда мы кликаем по элементу, например, что бы ввести вручную. Для этого мы допишем скрипт:

$( "input" ).focus(function() { // Вызов функции, когда выбран этот элемент
      $(this).parent().addClass('active'); // Добавление класса родителю этого элемента
});
$( "input" ).focusout(function() { // Вызов функции, когда фокус пропадает с выбранного элемента
       $(this).parent().removeClass('active'); // Удаление класса у родителя элемента
});

, где мы добавляем класс «active» родительскому элементу при фокусе поля ввода, и удаляем его при потере фокусировки. Элемент получает фокус, когда пользователь кликает по нему. Фокусировка обычно означает: «приготовься к вводу данных на этом элементе», это хороший момент, чтобы инициализовать или загрузить что-нибудь. Момент потери фокуса - это момент, когда пользователь кликает куда-то ещё или нажимает «Tab», чтобы переключиться на следующее поле формы.
В итоге, мы видим просто какое-то число в кружке, но когда мы наводим на него или кликаем, то блок раскрывается, показывая кнопки для его регулировки, а также возможность ввести его вручную с помощью клавиатуры.


Выберите город