twitter-bootstrap Bootstrap 3 中的数字上下(微调控制)

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22701998/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:23:34  来源:igfitidea点击:

Numeric Up and Down (Spinner Control) in Bootstrap 3

jquerycsstwitter-bootstrapfont-awesome

提问by Leandro

I tried to convert several numeric up and down (numeric spinner) control, but I couldn't. JQuery UI Spinner is not an option since I'm using bootstrap 3, and I couldn't deploy the spinner from fuelx stand alone.

我试图转换几个数字上下(数字微调器)控件,但我不能。JQuery UI Spinner 不是一个选项,因为我使用的是 bootstrap 3,而且我无法单独从 Fuelx 部署微调器。

I found 2 or 3 similar but are them for bootstrap 2.

我发现了 2 或 3 个类似的,但它们是用于引导程序 2 的。

After fighting with CSS, I found some guy here that could it, I make a fiddler with his answer but is stil doesn't work. Images doesn't show.

在与 CSS 斗争之后,我在这里找到了一些可以做到的人,我用他的答案做了一个小提琴手,但仍然不起作用。图片不显示。

I think is some related with my version of font awesome on:

我认为与我的字体版本有关:

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

but I'm not sure. Any hint will be preciated.

但我不确定。任何提示都将受到重视。

Last version of my fiddler: http://jsfiddle.net/Leandro1981/wt8CD/

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

Related questions:

相关问题:

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

转换 Bootstrap 2.3.2 和 jQuery-Spinner 以使用 Bootstrap 3.*

Cross-browser Numeric Spinner / Stepper for Bootstrap

用于 Bootstrap 的跨浏览器数字微调器/步进器

Cross-browser Numeric Spinner / Stepper for Bootstrap

用于 Bootstrap 的跨浏览器数字微调器/步进器

回答by Daniel Antunes Pinto

A better solution for the javascript part, since the one given only supports a single spinner per page.

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

A possible update is to add min, max, scroll and keyboard support.

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

回答by Leandro

Working code: http://jsfiddle.net/Leandro1981/75M6s/3/

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

with an easy jquery plugin

使用简单的 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);

from: http://codepen.io/Thomas-Lebeau/pen/csHqx

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