How to add value suffix in jQuery.knob

Question

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

For example: I need Sufix $ after the value, I just insert its display in the value field, but at this time the handle does not display the status.

it will not show the status of the regulator. (but suffix is ​​displayed).

here is the code:

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

without the suffix that it works great, help me solve this problem.

Jsfiddle link for my problem:

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

in jsfiddle it works without the $ sign, but does not work with the value of the $ sign.

Sign

( $ can be any value or character)

Answer 1

Try it 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 + '%'); } }); }); 

No need to change styles and other details .....

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

Answer 2

Your code actually doesn't work, because 51$ not a valid int number, so it displays 0.

Since the plugin does not actually implement any prefix / suffix function, I created a small hack, so in the draw callback it is:

• get the position of the input element that the handle is pressed on
• build a range and add it after input and copy the same input styles
• move the position of the new element so that it appears as a suffix

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

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

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

As for version 1.2.8 pen (write current), just use the format function

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