Jquery Knob Display Number Change
I'm using JQuery Knob to make some cool graphs and it's working perfectly. But I have one problem: I want to make the display number between the graph have a '%' symbol concatenate
Solution 1:
If you take a quick look at the github repo you'll see that there's a draw hook that's called everytime the canvas is drawn. If you implement that hook you should be able to add whatever you wish to the input. Here's a short example of the functionality you're looking for (to try it: http://jsfiddle.net/eAQA2/ ) and for future reference:
<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery-1.8.2.min.js"></script><scriptsrc="https://raw.github.com/aterrien/jQuery-Knob/master/js/jquery.knob.js"></script><script>
$(function() {
$(".dial").knob({
'draw' : function () {
$(this.i).val(this.cv + '%')
}
})
})
</script></head><body><inputtype="text"class="dial"data-min="0"data-max="100"></body></html>
Solution 2:
As of version 1.2.7 there is now a format hook for performing tasks like this:
$(".dial").knob({
'format' : function (value) {
return value + '%';
}
});
Solution 3:
I managed to achieve this with animation too:
My solutions does this by adding the percentage each time the value gets increased:
$(function() {
$('.dial_overall').each(function () {
var $this = $(this);
var myVal = $this.attr("value");
$this.knob({
});
$({
value: 0
}).animate({
value: myVal
}, {
duration: 1600,
easing: 'swing',
step: function () {
$this.val(Math.ceil(this.value)).trigger('change');
$('.dial_overall').val($('.dial_overall').val() + '%');
}
})
});
});
Post a Comment for "Jquery Knob Display Number Change"