Question

我遇到jQuery.knob的问题我需要在旋钮中的值中添加 Sufixx 。

例如：我需要一个Sufix $ 后面的值，我只是放入值字段，显示它，但那时旋钮不会显示状态。

the screen shot for the issue

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

这是代码：

<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回调中构建了一个小黑客：

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

请求：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版（写入电流），只需使用格式化功能

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

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

4 个答案: