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

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

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

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

这是代码：

<input type="text" class="ksta" value=" $" data-width="50" /> 

没有后缀它完美地工作，帮我解决这个问题。

我的问题的Jsfiddle链接：

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

在jsfiddle中，它没有$符号，但没有使用$ sign值。

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

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。

既然插件实际上没有实现任何前缀/后缀function，我在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 = $("$").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

   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版（写入电流），只需使用格式化function

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