Bootstrap 3 input spinner 数字增减框

Selection_008

HTML

<div class="container">
<div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div>  
  <div class="input-group spinner">
    <input type="text" class="form-control" value="42">
    <div class="input-group-btn-vertical">
      <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
      <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
    </div>
  </div>
</div>

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

 

 

Selection_006

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

 

Selection_007HTML

<div class="container">
    <div class="row">
		<h2>Quantity Control</h2>
        
           <div class="item col-xs-6 col-lg-6">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group form-group-options">
                            <div id="1" class="input-group input-group-option quantity-wrapper">
                            
                                <span  class="input-group-addon input-group-addon-remove quantity-remove btn">
                                    <span class="glyphicon glyphicon-minus"></span>
                                </span>
                                
                                <input  id="1inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">

                                <span class="input-group-addon input-group-addon-remove quantity-add btn">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </span>
                                
                            </div>
                            
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="button" class="btn btn-danger quantity-delete">
                            <span class="glyphicon glyphicon-remove"></span>Entfernen
                        </button>
                    </div>
                </div><!--/Row-->
            </div><!--/Item-->   

           <div class="item col-xs-6 col-lg-6">
                <div class="row">
                    <div class="col-md-10">
                        <div class="form-group form-group-options">
                            <div id="2" class="input-group input-group-option quantity-wrapper">
                            
                                <span  class="input-group-addon input-group-addon-remove quantity-remove btn">
                                    <span class="glyphicon glyphicon-minus"></span>
                                </span>
                                
                                <input  id="2inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">

                                <span class="input-group-addon input-group-addon-remove quantity-add btn">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </span>
                                
                            </div>
                            
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger quantity-delete">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                </div><!--/Row-->
            </div><!--/Item-->      
   

           <div class="item col-xs-6 col-lg-6">
                <div class="row">
                    <div class="col-md-10">
                        <div class="form-group form-group-options">
                            <div id="3" class="input-group input-group-option quantity-wrapper">
                            
                                <span  class="input-group-addon input-group-addon-remove quantity-remove btn">
                                    <span class="glyphicon glyphicon-minus"></span>
                                </span>
                                
                                <input  id="3inp" type="text" value="6" name="option[]" class="form-control quantity-count" placeholder="1">

                                <span class="input-group-addon input-group-addon-remove quantity-add btn">
                                    <span class="glyphicon glyphicon-plus"></span>
                                </span>
                                
                            </div>
                            
                        </div>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger quantity-delete">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </div>
                </div><!--/Row-->
            </div><!--/Item-->            

        
	</div>
</div>

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 响应式上传图片,时间拾取器和表单认证 Bootstrap 3 Fileinput, Bootstrap 3 Date/Time Picker – Datepicker, Bootstrap 3 Validator

PHP: 用readonly取代disabled来获取input值 submit a disabled input in a form could not get value

jQuery 多结果自动完成搜索 Tokeninput Autocomplete Text Entry

Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar

Bootstrap 3: 图标转换事件 Change icons when toggle

Bootstrap 3 : 实现5栏设计 5 columns layout with Twitter Bootstrap

 

 

本文:Bootstrap 3 input spinner 数字增减框

Loading

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.