Bootstrap 3 input spinner 数字增减框

HTML

Bootstrap 3 input-spinner
  
  

    
    

      
      
    
  

 

CSS

.spinner {
  width: 100px;
}
.spinner input {
  text-align: right;
}
.input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}
.input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px;
  margin-left: -1px;
  position: relative;
  border-radius: 0;
}
.input-group-btn-vertical > .btn:first-child {
  border-top-right-radius: 4px;
}
.input-group-btn-vertical > .btn:last-child {
  margin-top: -2px;
  border-bottom-right-radius: 4px;
}
.input-group-btn-vertical i{
  position: absolute;
  top: 0;
  left: 4px;
}

 

JS

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

 

DEMO

 

 

下载：Input-Number-Spinner-with-jQuery-Bootstrap-Spinner

HTML

    

		
Quantity Control
        
           

                

                    

                        

                            

                            
                                
                                    
                                
                                
                                

                                
                                    
                                
                                
                            
                            
                        
                    
                    

                        
                            Entfernen
                        
                    
                

            
   

           

                

                    

                        

                            

                            
                                
                                    
                                
                                
                                

                                
                                    
                                
                                
                            
                            
                        
                    
                    

                        
                            
                        
                    
                

            
      
   

           

                

                    

                        

                            

                            
                                
                                    
                                
                                
                                

                                
                                    
                                
                                
                            
                            
                        
                    
                    

                        
                            
                        
                    
                

            
            

        
	

 

CSS

.quantity-remove, .quantity-add {
    cursor: pointer;
}
.quantity-add.glyphicon, .quantity-remove.glyphicon {
    display: block;
    cursor: pointer;
}

 

JS

$(document).ready(function(){

    //Add
    $(".quantity-add").click(function(e){
        //Vars
        var count = 1;
        var newcount = 0;
        
        //Wert holen + Rechnen
        var elemID = $(this).parent().attr("id");
        var countField = $("#"+elemID+'inp');
        var count = $("#"+elemID+'inp').val();
        var newcount = parseInt(count) + 1;
        
        //Neuen Wert setzen
        $("#"+elemID+'inp').val(newcount);
    });

    //Remove
    $(".quantity-remove").click(function(e){
        //Vars
        var count = 1;
        var newcount = 0;
        
        //Wert holen + Rechnen
        var elemID = $(this).parent().attr("id");
        var countField = $("#"+elemID+'inp');
        var count = $("#"+elemID+'inp').val();
        var newcount = parseInt(count) - 1;
        
        //Neuen Wert setzen
        $("#"+elemID+'inp').val(newcount);
        
    });


    //Delete
    $(".quantity-delete").click(function(e){
        //Vars
        var count = 1;
        var newcount = 0;
        
        //Wert holen + Rechnen
        var elemID = $(this).parent().attr("id");
        var countField = $("#"+elemID+'inp');
        var count = $("#"+elemID+'inp').val();
        var newcount = parseInt(count) - 1;
        
        //Neuen Wert setzen
        //$('.item').html('');
        
       var row = $( ".row" );
        $(event.target).closest(row).html('');
    });

    
});

 

DEMO

 

转自：Bootstrap 3 input spinner 数字增减框