首页 > 代码库 > jquery+bootstrap使用数字增减按钮
jquery+bootstrap使用数字增减按钮
<div class="container"><div class="page-header"><h1>Bootstrap 3 input-spinner</h1></div> <label for="sign_times" class="hr-label col-md-6"><span class="required">*</span><span class="hr-span">签订次数</span> </label> <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>
.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;}
(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);
jquery+bootstrap使用数字增减按钮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。