All geek questions in one place

Changing the jQuery Knob display number

I use jQuery Knob to make cool graphics, and it works great. But I have one problem: I want the display number between the graph to be associated with the symbol "%". but I just can't get it to work. Changing input through jquery will not do this, and I tried to read the libraries in the code, but no luck. Has anyone else had this problem before?

+6
source share
3 answers

If you quickly browse through the github repository, you will see that there is a draw hook drawn that gets called every time the canvas is drawn. If you are implementing this hook, you should be able to add whatever you want. Here is a brief example of the functionality you are looking for (to try: http://jsfiddle.net/eAQA2/ ) and for future reference:

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="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> <input type="text" class="dial" data-min="0" data-max="100"> </body> </html>​
+30
source

Starting with version 1.2.7, there is now a format hook for performing such tasks:

 $(".dial").knob({ 'format' : function (value) { return value + '%'; } });
+5
source

I also managed to achieve this using animation:

My solutions do this by adding a percentage each time the value increases:

 $(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() + '%'); } }) }); });
+2
source

Source: https://habr.com/ru/post/926082/

More articles:


All Articles