Бортовой журнал PHP кодера
BOX-COUNTER

$('input').icnt(); - превратит все input в четчик
$('input').icnt({min:3,max:100}); - на счётчиках будет лимит
Скачать архив с исходным кодом


Javascript

(function($){
  jQuery.fn.icnt = function(settings){
    var defaultSettings = {
      min    : 1,
      max    : 10,
    }
 
    settings = $.extend(defaultSettings,settings);
    
    return this.each(function(){
 
      var elem = $(this);
      elem.addClass('jq-icnt-inpt');
      var nw = $('<div class="jq-icnt"><span class="jq-icnt-up"></span><span class="jq-icnt-dw"></span></div>');
      elem.after(nw);
      $(nw).prepend(elem);
      $(nw).find('span.jq-icnt-up').click(function(){
        var v = $(this).prev();
        var mv = parseInt(v.val());
        if(mv<settings.max) {
          v.val((mv+1));
          v.change();
        }
      });
      $(nw).find('span.jq-icnt-dw').click(function(){
        var v = $(this).prev().prev();
        var mv = parseInt(v.val());
        if(mv>settings.min) {
          v.val((mv-1));
          v.change();
        }
      });
    });
    
  }
  
}) (jQuery);

CSS


.jq-icnt-inpt {   
	width:18px;   border:solid 1px gray;
} 
.jq-icnt {   
	display:inline-block;   position: relative;
} 
.jq-icnt-dw, .jq-icnt-up {   
	width:10px;
	height:10px;
	display:inline-block; 
	background: url("/_design/_img/ui-icons_256x240.png") no-repeat scroll -2px -2px transparent;
	cursor:pointer;   position: absolute;
} 
.jq-icnt-up {
	top:0; 
}
.jq-icnt-up:hover {
	background-position: -2px -18px;
} 
.jq-icnt-dw {   
	background-position: -67px -5px;
	bottom:0;
} 
.jq-icnt-dw:hover {
	background-position: -67px -21px;
}