php - 如何在 jQuery.knob 中添加值后缀

Question

我对jQuery.knob有疑问， 我需要在旋钮的值中添加一个Sufixx 。

例如：我需要在值后面加一个后缀$，我只是在值字段中输入，它显示，但此时旋钮不会显示状态。

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

这是代码：

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

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

我的问题的 Jsfiddle 链接：

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

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

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

Answer 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/

Answer 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/

Answer 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/

Answer 4

至于 1.2.8 版本的旋钮(current of writing)，只需使用 format 函数

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