Разделы

Создание и оформление кнопок плюс и минус для поля

Информация о материале
Категория: Админ
Просмотров: 890

Небольшой скрипт на jQuery, который при нажатии на соотвествующую кнопку, прибавляет и отнимает единичку в текстовом поле.

Скрипт работает таким образом, что в текстовое поле input можно вводить только цифры. Если введено некорректное значение или оно отсутствует, то в поле вставляется единица. Если введено значение больше максимального, то в поле ставится максимально возможное.

    // Убавляем кол-во по клику
    $('.quantity_inner .bt_minus').click(function() {
    let $input = $(this).parent().find('.quantity');
    let count = parseInt($input.val()) - 1;
    count = count < 1 ? 1 : count;
    $input.val(count);
});
// Прибавляем кол-во по клику
$('.quantity_inner .bt_plus').click(function() {
let $input = $(this).parent().find('.quantity');
let count = parseInt($input.val()) + 1;
count = count > parseInt($input.data('max-count')) ? parseInt($input.data('max-count')) : count;
$input.val(parseInt(count));
}); 
// Убираем все лишнее и невозможное при изменении поля
$('.quantity_inner .quantity').bind("change keyup input click", function() {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9]/g, '');
}
if (this.value == "") {
this.value = 1;
}
if (this.value > parseInt($(this).data('max-count'))) {
this.value = parseInt($(this).data('max-count'));
}
});

Во всех примерах используется jQuery приведенный выше

Пример
html
css
    <div class="quantity_inner">
    <button class="bt_minus">
    <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
    <input type="text" value="1" size="2" class="quantity" data-max-count="20" />
    <button class="bt_plus">
    <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
</div>

.quantity_inner * {
box-sizing: border-box; 
}   
.quantity_inner {
display: flex;
justify-content: center;
}   
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
color: #BFE2FF;
height: 40px;
width: 40px;
padding: 0;
margin: 10px 2px;
border-radius: 10px;
border: 4px solid #BFE2FF;
background: #337AB7;
cursor: pointer;
outline: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.2);
}
.quantity_inner .quantity {
width: 50px;
text-align: center;
font-size: 22px;
color: #FFF;
font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
stroke: #BFE2FF;
stroke-width: 4;
transition: 0.5s;
margin: 4px;
}   
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #FFF;
}

Пример
html
css
    <div class="quantity_inner">
    <button class="bt_minus">
    <svg viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
    <input type="text" value="1" size="2" class="quantity" data-max-count="20" />
    <button class="bt_plus">
    <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
    </div>


    .quantity_inner * {
    box-sizing: border-box;
}
.quantity_inner {
display: inline-flex;
border-radius: 26px;
border: 4px solid #337AB7;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
height: 40px;
width: 40px;
padding: 0;
border: 0;
margin: 0;
background: transparent;
cursor: pointer;
outline: 0;
}
.quantity_inner .quantity {
width: 50px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #000;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
stroke: #337AB7;
stroke-width: 4;
transition: 0.5s;
margin: 10px;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #000;
}

Пример
html
css
    <div class="quantity_inner">
    <button class="bt_minus">
    <svg viewBox="0 0 24 24" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
    <input type="text" value="1" size="2" class="quantity" data-max-count="20" />
    <button class="bt_plus">
    <svg viewBox="0 0 24 24" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
    </button>
    <button class="bt_buy">
    <svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
    </button>
    </div>


.quantity_inner * {
box-sizing: border-box;
}
.quantity_inner {
display: inline-flex;
border-radius: 26px;
border: 4px solid #337AB7;
position: relative;
background: #FFF;
z-index: 1;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .bt_buy,
.quantity_inner .quantity {
height: 40px;
width: 40px;
padding: 0;
border: 0;
margin: 0;
background: #FFF;
cursor: pointer;
outline: 0;
border-radius: 26px;
}
.quantity_inner .bt_buy {
background: #337AB7;
width: 90px;
height: 48px;
position: absolute;
right: -70px;
top: -4px;
z-index: -1;
border-radius: 0 26px 26px 0;
border: 4px solid #337AB7;
}
.quantity_inner .quantity {
width: 60px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #000;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg,
.quantity_inner .bt_buy svg {
stroke: #337AB7;
stroke-width: 4;
transition: 0.5s;
margin: 10px;
fill: none;
height: 20px;
width: 20px;
}
.quantity_inner .bt_buy svg {
stroke: #BFE2FF;
position: relative;
left: 6px;
}
.quantity_inner .bt_buy:hover svg {
stroke: #FFF;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #000;
}

Пример
html
css
    <div class="quantity_inner">
    <input type="text" value="1" size="2" class="quantity" data-max-count="20" />
    <button class="bt_plus">
    <svg viewBox="0 0 24 24"><polyline points="18 15 12 9 6 15"></polyline></svg>
    </button>
    <button class="bt_minus">
    <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"></polyline></svg>
    </button>
    <button class="bt_buy">
    <svg viewBox="0 0 24 24"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>
    </button>   
    </div>


.quantity_inner * {
box-sizing: border-box;
}
.quantity_inner {
display: inline-flex;
border: 6px solid #BFE2FF;
position: relative;
border-radius: 50% 0;
height: 100px;
width: 120px;
background: #FFF;
margin-top: 30px;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus,
.quantity_inner .quantity {
height: 40px;
width: 40px;
padding: 0;
border: 0;
margin: 0;
background: transparent;
cursor: pointer;
outline: 0;
position: absolute;
}
.quantity_inner .bt_minus,
.quantity_inner .bt_plus {
height: 40px;
width: 40px;
right: 6px;
top: 0;
}
.quantity_inner .bt_minus {
top: 28px;
}
.quantity_inner .bt_buy {
position: absolute;
background: #337AB7;
padding: 0;
border: 6px solid #BFE2FF;
top: -30px;
left: -20px;
border-radius: 50%;
height: 70px;
width: 70px;
outline: 0;
transition: 0.5s;
}
.quantity_inner .bt_buy:hover {
cursor: pointer;
border: 6px solid #337AB7;
}
.quantity_inner .bt_buy:hover svg {
stroke: #FFF;
}
.quantity_inner .quantity {
width: 60px;
bottom: 6px;
left: 6px;
text-align: center;
font-size: 42px;
font-weight: bold;
color: #000;
margin-right: 30px;
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}
.quantity_inner .bt_minus svg,
.quantity_inner .bt_plus svg {
stroke: #337AB7;
stroke-width: 2;
transition: 0.5s;
fill: none;
}
.quantity_inner .bt_buy svg {
stroke: #BFE2FF;
stroke-width: 3;
transition: 0.5s;
fill: none;
width: 26px;
height: 26БзЮБ/зЮpx;
}
.quantity_inner .bt_minus:hover svg,
.quantity_inner .bt_plus:hover svg {
stroke: #000;
}

QR-код

Разделы

© 2023. Лайфхаки для админа и не только
Наверх