Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aterrien/jQuery-Kontrol
Experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars
https://github.com/aterrien/jQuery-Kontrol
Last synced: 18 days ago
JSON representation
Experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars
- Host: GitHub
- URL: https://github.com/aterrien/jQuery-Kontrol
- Owner: aterrien
- Created: 2012-06-26T20:02:57.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2016-10-13T03:50:11.000Z (about 8 years ago)
- Last Synced: 2024-07-31T22:45:01.869Z (3 months ago)
- Language: JavaScript
- Homepage: http://anthonyterrien.com/kontrol/
- Size: 167 KB
- Stars: 238
- Watchers: 28
- Forks: 56
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
jQuery Kontrol
=============
Library of UI controls ; dial (was 'knob'), XY pad, bars control ...
- canvas based ; no png or jpg sprites.
- touch, mousewheel, keyboard events implemented.
- downward compatible ; overloads inputs.
Demo : http://anthonyterrien.com/kontrol/
Controls
-------
- Dial (was 'Knob') : $('#id').dial()
- XY : $('#id').xy()
- Bars : $('#id').bars()
Example
-------
$(function() {
$(".dial").dial();
}
Options
-------
Options are provided as attributes 'data-option':
... or in the plugin method call :
$(".dial").dial({
'min':-50
,'max':50
})
The following options are supported on controls :
Behaviors :
* min : min value || default=0.
* max : max value || default=100.
* stopper : stop at 0 & 100 on keydown/mousewheel || default=true.
* readOnly : disable input and events.
* flatMouse : the dial responds to up-down mouse movement instead of radial mouse movement.
* noScroll : disable the mouse wheel for the dial.
UI :
* cursor : display mode "cursor" | default=gauge.
* thickness : gauge thickness.
* width : dial width.
* displayInput : default=true | false=hide input.
* displayPrevious : default=false | true=displays the previous value with transparency.
* fgColor : foreground color.
* bgColor : background color.
Hooks
-------
$(".dial").knob({
'release' : function (v) { /*make something*/ }
});
* 'release' : executed on release
Parameters :
+ value : int, current value
* 'change' : executed at each change of the value
Parameters :
+ value : int, current value
* 'draw' : when drawing the canvas
* 'cancel' : on [esc] keydown
* 'start' : executed on mousedown or touchStart
The scope (this) of each hook function is an instance of Kontrol component.
Example
-------
$(".dial").dial({
'change':function(e){
console.log(e);
}
});
Dynamically configure
-------
$('.dial').trigger('configure',{"fgColor":"#FF0000", "cursor":true})
Set the value
-------
$('input')
.val(27)
.trigger('change');
Make your own component
-------
$(function () {
/**
*
* Kontrol core
*
*/
// Component logic
k.NewComponent = function () {
// extends Kontrol Object
k.o.call(this);
/**
*
* your code
*
*/
};
// jQuery plugin
$.fn.newcomponent = function (o) {
return this.each(
function () {
var k = new k.NewComponent();
k.o = o;
k.$ = $(this);
k.run();
}
).parent();
};
});
Supported browsers
-------
Chrome / Safari / Firefox / IE 9.0