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

【问题标题】：How to add Suffix text in JQuery Spinner如何在 JQuery Spinner 中添加后缀文本
【发布时间】：2011-07-19 14:17:55
【问题描述】：

是否可以在 jQuery spinner (jquery.ui.spinner) 中添加后缀。例如：10.02%。

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

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

提前感谢帮助。

谢谢。

【问题讨论】：

对不起。应该是是否可以将后缀添加到 JQuery 微调器（jquery.ui.spinner）中。例如：10.02%。

标签： jquery plugins

【解决方案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 示例对提出此解决方案非常有帮助。

【讨论】：

【解决方案2】：

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

后缀（字符串）

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

如果它不起作用，会发生什么？

【讨论】：

当我运行 html 页面时，我看不到旋转小部件内的后缀符号。 - 谢谢！
嗯。您是否有任何理由使用 fork 而不是该项目的主分支：github.com/btburnett3/jquery.ui.spinner？我建议你试试主分支，看看它是否有什么不同。

【解决方案3】：

Demo 似乎对我有用。

【讨论】：

能否请您发布，您是如何实现的，或者请指导我到底哪里错了。谢谢！
超链接已经在我的回答中，作为单词Demojsfiddle.net/yaQSP
非常感谢！但我使用的是 JQuery UI 附带的“jquery.ui.spinner”（它在“jquery-ui-1.9m3\demos\spinner\decimal.html”文件夹中）而不是 Brant Burnett 提供的 js (github.com/btburnett3/jquery.ui.spinner/blob/master/…) .您能否建议如何使用 JQuery 提供的库修复它。我感谢您的帮助。谢谢！
官方的 jQuery UI spinner 还在active development 中，目前不支持任何形式的suffix 选项。更糟糕的是，0.01 的步骤也会导致舍入错误。在 jQuery 1.9 最终版本之前，我真的会坚持使用其他微调器。更好的是，在jQuery UI forum 中提出这个问题，请求这些功能或分叉代码并为 jQuery UI 团队自己实现它们:-)

【解决方案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/

【讨论】：

【解决方案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 来实现所需的灵活性。

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

【讨论】：