Adatum
Фев
18
2015
jQuery /

Javascript input с плюсом и минусом

Скрипт при нажатии кнопок + или — увеличивалось/уменьшалось соответственно на 3 либо другое кратное число заданное в параметре input value=»3″.


Пример:


-

+ 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <style>
  .btn {
width: 103px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
color: #FFF;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
background-image: -webkit-linear-gradient(top,#428bca 0,#2d6ca2 100%);
background-image: linear-gradient(to bottom,#428bca 0,#2d6ca2 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
background-repeat: repeat-x;
border-color: #2b669a;
}
.form-control {
width: 100px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
  </style>
  <script>
jQuery(document).ready(function($) {
        $('.q-minus').click(function () {
            var $input = $(this).parent().find('input');
            var val = +$input[0].defaultValue;
            var count = parseInt($input.val()) - val;
            count = count < val ? val : count;
            $input.val(count);
            $input.change();
            return false;
        });
        $('.q-plus').click(function () {
            var $input = $(this).parent().find('input');
            var val = +$input[0].defaultValue;
            $input.val(parseInt($input.val()) + val);
            $input.change();
            return false;
        });
    });
  </script>
</head>

<body>
  <div class="opt-quontity" style="white-space:nowrap;">>
    <span class="q-minus btn">-</span>
    <input class="form-controls" type="text" value="3">
    <span class="q-plus btn">+</span>
</div>
</body>
Метки: ,

Похожие статьи

Оставить комментарий