plus minus input
Простой скрипт на jQuery для реализации кнопок мпюса и минуса рядом с инпутом и проверкой значения, чтоб было не меньше 1.
HTML
<div class="opt-quontity">
<span class="quont-minus btn">-</span>
<input type="text" value="1">
<span class="quont-plus btn">+</span>
</div> <!-- .opt-quontity -->
CSS
.btn {
line-height: 32px;
float: left;
margin: 0 0px;
cursor: pointer;
background: #3498db;
color: #ecf0f1;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 0 15px;
display: inline-block;
text-decoration: none;
border-bottom: solid 3px #2980b9;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.btn:hover {
background: #e74c3c;
border-bottom-color: #c0392b;
}
input {
float: left;
padding: 0 10px;
width: 50px;
text-align: center;
vertical-align: middle;
height: 32px;
line-height: 32px;
border: solid 1px #95a5a6;
display: inline-block;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
input:focus {
border-color: #2980b9;
color:#2c3e50;
outline: none;
-webkit-box-shadow: inset 0 -2px 0 #2980b9;
-moz-box-shadow: inset 0 -2px 0 #2980b9;
box-shadow: inset 0 -2px 0 #2980b9;
}
JavaScript
$('.quont-minus').click(function () {
var $input = $(this).parent().find('input');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.quont-plus').click(function () {
var $input = $(this).parent().find('input');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});