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
Numeric Up and Down (Spinner Control) in Bootstrap 3
提问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
回答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);

