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 数字增减框
相关推荐
或者只是下载GitHub存储库并包含src/bootstrap-input-spinner.js 。 用法 HTML 在HTML中创建元素。 这些属性与本机input[type="number"]元素兼容。 < input type =" number " value =" 50 " min =" 0 " max =...
bootstrap input 框 清除 小插件、很简单的一个小的js,引入即可。省时省力。
#Bootstrap 输入微调器 使用向上/向下按钮增强用于输入数值的文本输入 安装 HTML 头: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> [removed]...
bootstrap-input-spinner是一款基于bootstrap4和jquery的input输入框数值微调插件。该插件会为输入框添加增加和减少按钮,通过点击相应的按钮,来对输入框中的数值进行微调。
这是一款Bootstrap4数值输入插件。通过该插件可以非常轻松的将input元素转换为数值输入spinner。
Bootstrap File Input 文件上传控件离线文档,完美结合bootstrap,支持ajax异步回调。
本压缩保内的所有文件均为必须文件,采用输入框和多选框两种方式。足以应对项目应用,应用非常简单。其中重要的data-role属性,在某些情况下不能使用,可以改为data_role。我在C# MVC5中遇到了此问题,顺便分享下。
文件上传插件Bootstrap File Input 的参考手册
bootstrap后台管理系统模版UI框架
bootstrap-select下拉选择搜索框,可以多选和单选,用法非常简单,样式美观,项目中经常会使用到,特别选项过多的时候,欢迎大家下载使用
基于bootstrap-table的穿梭框 两个table穿梭
bootstrap-tagsinput.zip,bootstrap框架可以使用的tag标签输入框效果插件。
基于Bootstrap3的响应式后台框架,已经中文化,复合国内使用习惯。
简单的bootstrap网页复选框单选框的例子。
一套中文管理系统前端HTML模板,通用的中文后台模板框架页面,基bootstrap框架实现,可以开发任何类型的管理软件或者网站后台。
Bootstrap响应式模态登录框插件,jQuery基于Bootstrap制作的一款响应式模态登录框插件,点击遮罩弹出登录窗口代码。
主要介绍了Bootstrap实现input控件失去焦点时验证的相关资料,非常不错,需要的朋友可以参考下,需要的朋友可以参考下
精美的bootstrap效果(1个adminlte框架,3个bootstrap框架);Bootstrap的前端框架,很好用的响应式前端框架!
bootstrap-select插件,jquery实现的下拉选择。
基于Bootstrap3的后台admin框架