Счетчик цифр
HTML
<div class="clear"></div>
<div class="podbor">
<input type="text" value="1"/>
<span class="plus">+</span>
<span class="minus">-</span>
</div>
<div class="clear"></div>
<hr>
<div class="clear"></div>
<div class="podbor">
<input type="text" value="1"/>
<span class="plus">+</span>
<span class="minus">-</span>
</div>
CSS
.podbor{position: relative;}
.podbor>input{
padding: 2px 2px 1px 4px;
font-size:30px;
width: 70px;
height: 35px;
float: left;
border: 1px solid #666;
border-radius: 4px 0 0 4px;
}
.podbor>span{
display: block;
font-size: 18px;
position:absolute;
left: 58px;
margin: 0;
padding: 2px;
line-height:14px;
width: 14px;
border: 1px solid #666;
background-color: #E4E4E4;
text-align: center;
cursor: pointer;
}
.podbor>.plus{border-bottom: none; height: 16px;}
.podbor>.minus{top: 20px; height: 14px;}
.podbor>span:hover{background-color: #999;}
.clear{clear: both;}
JavaScript
// Author: Vlasenko Fedor, [email protected]
(function($){
$('div.podbor').on('click', 'span', function () {
var inp = $('input' , this.parentNode),
val = +inp.val()||0;
inp.val(val += this.className == 'minus' ? val > 0 ? -1: 0: 1);
});
}(jQuery));