How to add a value suffix in jQuery.knob

问题

I have problem with jQuery.knob I need to add a Sufixx to the value in the knob.

For Example: i need a Sufix $ after the value, i just put in the value field, its displaying, but at that time the knob will not show the status.

it will not show the knob status. (but suffix is displaying).

here is the code:

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

without the suffix it working perfectly, help me to solve this issue.

Jsfiddle link for my issue:

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

in the jsfiddle it work without the $ sign, but not working with $ sign in value.

($ sign may be any value or symbol)

回答1:

Try this in a simple way,

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

There is no need to change the styles and other details.....

Demo: http://jsfiddle.net/renishar/DWvsh/20/

回答2:

Your code actually not work because 51$ is not a valid int number, so it display 0.

Since that the plugin actually not implement any prefix/suffix feature, I built a little hack so in the draw callback it:

get the position of the input element on which knob is applied
build a span and append it after the input, and copied the same styles of the input
move the position of the new element to let it appear as a suffix

Request: https://github.com/aterrien/jQuery-Knob/issues/65

Code:

    '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
    });

Demo: http://jsfiddle.net/IrvinDominin/ngX5p/

回答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/

回答4:

As for version 1.2.8 of knob(current of writing), simply use format function

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

来源：https://stackoverflow.com/questions/21401338/how-to-add-a-value-suffix-in-jquery-knob

标签

php

jquery

jquery-knob