Question

我试图转换几个数字上下（数字微调）控件，但我不能。 JQuery UI Spinner不是一个选项，因为我使用bootstrap 3，而且我无法从fuelx独立部署微调器。

我发现2或3个相似，但它们是用于引导2。

在与CSS战斗之后，我在这里发现了一些可以做到的人，我用他的答案做了一个小提琴手但是stil不能工作。图像无法显示。

我认为与我的字体版本有些相关：

<a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-sort-down"></i>

但我不确定。任何提示都会被预先确定。

我的小提琴手的最新版本： http://jsfiddle.net/Leandro1981/wt8CD/

相关问题：

Convert Bootstrap 2.3.2 & jQuery-Spinner to work with Bootstrap 3.*

Cross-browser Numeric Spinner / Stepper for Bootstrap

Answer 1

javascript部分的更好的解决方案，因为给定的只支持每页一个微调器。

$('.spinner .btn:first-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) + 1);
});

$('.spinner .btn:last-of-type').on('click', function() {
    var spinner = $(this).parent().parent().find('input');
    spinner.val(parseInt(spinner.val(), 10) - 1);
});

可能的更新是添加最小，最大，滚动和键盘支持。

Answer 2

工作代码：http://jsfiddle.net/Leandro1981/75M6s/3/

使用简单的jquery插件

   (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);

自： http://codepen.io/Thomas-Lebeau/pen/csHqx

Bootstrap 3中的数字上下（旋转控制）

2 个答案: