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);
下载:Input-Number-Spinner-with-jQuery-Bootstrap-Spinner
<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(''); }); });
转自:Bootstrap 3 input spinner 数字增减框