如何在 jQuery.knob 中添加值后缀答案

【问题标题】：How to add a value suffix in jQuery.knob如何在 jQuery.knob 中添加值后缀
【发布时间】：2014-01-28 09:15:05
【问题描述】：

我对@987654321@ 有疑问我需要在旋钮的值中添加一个 Sufixx。

例如：我需要一个后缀$的值，我只是把值字段，它的显示，但此时旋钮不会显示状态。

它不会显示旋钮状态。（但显示后缀）。

代码如下：

<input type="text" class="ksta" value="<?php echo stat;?> $" data-width="50" />

如果没有后缀它可以完美运行，请帮我解决这个问题。

我的问题的 Jsfiddle 链接：

http://jsfiddle.net/renishar/DWvsh/19/

在 jsfiddle 中，它可以在没有 $ 符号的情况下工作，但不能使用 $ 登录值。

（$符号可以是任何值或符号）

【问题讨论】：

标签： php jquery jquery-knob

【解决方案1】：

用简单的方法试试这个，

jQuery(document).ready(function($){
        $('.ksta').knob({
            'min':0,
            'max':100,
            'step': 1,
            'displayPrevious': true,
            'readOnly': true,
            'draw' : function () { $(this.i).val(this.cv + '%'); }
        });
    });

样式等细节无需更改.....

演示：http://jsfiddle.net/renishar/DWvsh/20/

【讨论】：

但是这样输入字段的值会被剧透，附见：jsfiddle.net/IrvinDominin/2aZTx和jsfiddle.net/IrvinDominin/2aZTx/1
@Irvin Dominin aka Edward：在这种情况下，值在旋钮内正确对齐，旋钮的 css 没有任何变化......我认为它更好。
@ReNiShAR 随你喜欢（旋钮 css 没有改变......），我不喜欢包含附录的值，但这是你的选择

【解决方案2】：

您的代码实际上不起作用，因为51$ 不是有效的 int 数字，因此它显示为 0。

由于该插件实际上没有实现任何前缀/后缀功能，我构建了一个小技巧，所以在draw 回调它：

获取应用旋钮的输入元素的位置
构建一个跨度并将其附加到输入之后，并复制输入的相同样式
移动新元素的位置，让它显示为后缀

请求：https://github.com/aterrien/jQuery-Knob/issues/65

代码：

    'draw': function () {
        if ($(this.i).siblings(".kb-suffix").length > 0) return
        var pos1 = parseInt($(this.i).css("marginLeft").replace('px', ''));
        var pos2 = parseInt($(this.i).css("marginTop").replace('px', ''));
        var $elem = $("<span>$</span>").attr("style", $(this.i).attr("style")).addClass("kb-suffix");
        $elem.insertAfter(this.i).css({
            marginLeft: (pos1 + 20) + "px",
            marginTop: (pos2 + 3) + "px",
            zIndex: -10
    });

演示：http://jsfiddle.net/IrvinDominin/ngX5p/

【讨论】：

你的代码有问题，..当鼠标滚动或拖动到旋钮的底部时，旋钮的值会改变......
@ReNiShAR 我看到了问题，可能是 zIndex 问题，尝试更新代码
有什么办法，不改变css特性？
@ReNiShAR no 实际上是我发现的唯一方法，元素绝对由插件定位，当我有时间尝试分叉和更新或扩展时

【解决方案3】：

    <input type="text" class="ksta" value="51" data-width="80" data-thickness="0.2"/>


      jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round'
            });
            $('.ksta').each(function(e){
               $(this).val($(this).val()+'$'); 
            });     
        });

http://jsfiddle.net/DWvsh/6/

【讨论】：

试过这个，，，，但这次旋钮也不起作用....请在 jsfiddle 上检查它...
@ReNiShAR 另外，您还需要在 stat 前面保留变量“$”符号。
me 值字段是动态的？
在旋钮内滚动时，符号消失，，，

【解决方案4】：

至于1.2.8版本的旋钮（当前正在编写），只需使用格式化函数

jQuery(document).ready(function($){
            $('.ksta').knob({
                'min':0,
                'max':100,
                'step': 1,
                'readOnly': false,
                'data-linecap': 'round',
                'format': function(v){ return v + ' $';}
            });
        });

【讨论】：