A Beautiful JavaScript Knob (Circular Switch) UI Component – jQuery Knob
7
May
jQuery Knob is a lightweight jQuery plugin for creating good-looking circular switches (like the "volume controls" in radios).
It works by transforming any given input fields according to the values defined in its attributes and can be drag 'n' dropped to change the value.
We can define the min-max values, default value on initial load, color and put it into "read-only" mode (which is also good for using it as a visualization component).
There are no documents for the plugin but things are very straightforward and checking the source code of the demo is pretty enough to learn its logic.
Requirements: jQuery
Compatibility: All Major Browsers
Website: http://anthonyterrien.com/knob/
Download: https://github.com/aterrien/jQuery-Knob/
Compatibility: All Major Browsers
Website: http://anthonyterrien.com/knob/
Download: https://github.com/aterrien/jQuery-Knob/
- Tags:
Javascript Volume
- Filed under: Charts, Forms, Goodies, MIT License
- 7 Comments
7 Responses for "A Beautiful JavaScript Knob (Circular Switch) UI Component – jQuery Knob"
Hi,
Looks great, is there a way to update the “knob”? I tried using simple jQuery to remove the generated canvas knob, and then re-apply the knob, but it seemed to not work.
I guess a method “.refresh()” would be great, or even a way to bind to the value of the input element containing the visualized number.
But great work!
/Sten
[...] http://www.webresourcesdepot.com Tags: desarro web, indicador javascript, jquery plugin, plugin jquery, programacion [...]
@Sten You can do this:
$(“#knob1″).trigger(“change”);
where knob1 is the id of the .knob input element
This simulates a change event, which redraws the dial even if data-readOnly is set to true. It’s a little hackish, but it gets the job done.
@Caleb Hanson
Thanks a lot !! It helped me !
Great widget!! I’m using it on an interactive art piece.
But here’s a strange thing: With jQuery I can set all the parameters, no problem with this code, except for the readOnly option. It just won’t change.
What am I doing wrong?
$(“#lockCells”).trigger(‘configure’,{
‘thickness’:.6,
‘width’:120,
‘displayPrevious’:true,
‘readOnly’:true,
});
This widget is really nice!!! Unfortunately the textbox doesnt show up wen combined wit jquery mobile.. Any fix for that???
I tried this in my recent project, but is there a way to add % symbol in when displaying the triggered value??