Question

是否可以在jQuery spinner（jquery.ui.spinner）中添加后缀。例如：10.02％。

我尝试跟随jquery.ui.spinner [在选项部分]，但它对我不起作用。

$("#spinner").spinner({
    step: 0.01,
    numberformat: "n",
    suffix: "%",
});

提前感谢帮助。

感谢。

Answer 1

遇到了同样的问题。

使用jQuery UI的小部件工厂非常简单：

$.widget( "ui.pcntspinner", $.ui.spinner, {
    _format: function(value) { return value + '%'; },

    _parse: function(value) { return parseFloat(value); }
});

$("#spinner").pcntspinner({ 
    min: 0,
    max: 100,
    step: .01 });

演示：http://jsfiddle.net/aAHuT/

如果要使用整数，则必须调整“_parse”以使用parseInt()：

_parse: function(value) { return parseInt(value); }

Time Spinner的jQuery UI示例对于提出此解决方案非常有帮助。

Answer 2

应该可以，因为根据您链接到的页面上的文档：

后缀（字符串）

数字后面的字符后缀。常用于百分号。默认为''。

如果它不起作用，反而发生了什么？

Answer 3

Demo似乎对我有用。

Answer 4

我会考虑添加一个显示带后缀的文本的附加输入，而微调器只包含数字。这是处理发布数据的便捷方式。

$( ".spinner" ).spinner({ 
    min: 1,
    max: 999,
    spin: function() {
        $(this).siblings('.spinner-text').val($(this).val()+' items');
    },
    stop: function() {
        $(this).siblings('.spinner-text').val($(this).val()+' items');
    }
 }).parent().append('<input class="spinner-text">');

http://jsfiddle.net/6t9bS/3/

Answer 5

在我看来，最好的解决方案是使用CSS：

.percentspinner .ui-spinner:before {
    content: "%";
    width: 40px;
    padding-top: 5px;
    position: absolute;
    top: 0;
    right: 0;
}

使用以下HTML：

<div class="percentspinner"><input id="spinner" type="text" value="10.02" /></div>

和JavaScript：

 $("#spinner").spinner({step: 0.01});

JSFiddle

这是解释这个想法的最简单的实现，我建议使用text-align和padding-right来实现所需的灵活性。

我尝试过/考虑了很多方法，但在那之后我就提出了这个想法。从我的角度来看，它具有最重要的好处，如：字符“％”不影响提交的内容，用户仍然可以编辑值，但他不需要思考“如果我删除字符怎么办？”，易于实现。 ..

如何在JQuery Spinner中添加后缀文本

5 个答案: