Skip to content
Experimental JavaScript jQuery library of UI controls ; dial (was jQuery Knob), XY pad, bars
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js IIFE had disappeared / thanks @eliotj Aug 14, 2012
README.md
index.html

README.md

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

<input type="text" value="75" class="dial">

<script>
$(function() {
    $(".dial").dial();
}
</script>

Options

Options are provided as attributes 'data-option':

<input type="text" class="dial" data-min="-50" data-max="50">

... 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

<script>
$(".dial").knob({
                    'release' : function (v) { /*make something*/ }
                });
</script>
  • '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

<input type="text" value="75" class="dial">

<script>
$(".dial").dial({
                'change':function(e){
                        console.log(e);
                    }
                });
</script>

Dynamically configure

<script>
$('.dial').trigger('configure',{"fgColor":"#FF0000", "cursor":true})
</script>

Set the value

<script>
$('input')
    .val(27)
    .trigger('change');
</script>

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

You can’t perform that action at this time.