Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
21627 kshitij.so 1 
jQuery Knob
2 
=============
3 
 
4 
- canvas based ; no png or jpg sprites.
5 
- touch, mouse and mousewheel, keyboard events implemented.
6 
- downward compatible ; overloads an input element.
7 
 
8 
Example
9 
-------
10 
 
11 
    <input type="text" value="75" class="dial">
12 
 
13 
    <script>
14 
    $(function() {
15 
        $(".dial").knob();
16 
    }
17 
    </script>
18 
 
19 
Options
20 
-------
21 
 
22 
Options are provided as attributes 'data-option':
23 
 
24 
    <input type="text" class="dial" data-min="-50" data-max="50">
25 
 
26 
... or in the "knob()" call :
27 
 
28 
    $(".dial").knob({
29 
                    'min':-50
30 
                    ,'max':50
31 
                    })
32 
 
33 
The following options are supported :
34 
 
35 
Behaviors :
36 
* min : min value | default=0.
37 
* max : max value | default=100.
38 
* angleOffset : starting angle in degrees | default=0.
39 
* angleArc : arc size in degrees | default=360.
40 
* stopper : stop at min & max on keydown/mousewheel | default=true.
41 
* readOnly : disable input and events | default=false.
42 
 
43 
UI :
44 
* cursor : display mode "cursor" | default=gauge.
45 
* thickness : gauge thickness.
46 
* width : dial width.
47 
* displayInput : default=true | false=hide input.
48 
* displayPrevious : default=false | true=displays the previous value with transparency.
49 
* fgColor : foreground color.
50 
* bgColor : background color.
51 
 
52 
Hooks
53 
-------
54 
 
55 
    <script>
56 
    $(".dial").knob({
57 
                        'release' : function (v) { /*make something*/ }
58 
                    });
59 
    </script>
60 
 
61 
* 'release' : executed on release
62 
 
63 
    Parameters :
64 
    + value : int, current value
65 
 
66 
* 'change' : executed at each change of the value
67 
 
68 
    Parameters :
69 
    + value : int, current value
70 
 
71 
* 'draw' : when drawing the canvas
72 
 
73 
    Context :
74 
    - this.g : canvas context 2D (see Canvas documentation)
75 
    - this.$ : jQuery wrapped element
76 
    - this.o : options
77 
    - this.i : input
78 
    - ... console.log(this);
79 
 
80 
* 'cancel' : triggered on [esc] keydown
81 
 
82 
The scope (this) of each hook function is the current Knob instance (refer to the demo code).
83 
 
84 
Example
85 
-------
86 
 
87 
    <input type="text" value="75" class="dial">
88 
 
89 
    <script>
90 
    $(".dial").knob({
91 
                     'change' : function (v) { console.log(v); }
92 
                    });
93 
    </script>
94 
 
95 
 
96 
Dynamically configure
97 
-------
98 
 
99 
    <script>
100 
    $('.dial')
101 
        .trigger(
102 
            'configure',
103 
            {
104 
            "min":10,
105 
            "max":40,
106 
            "fgColor":"#FF0000",
107 
            "skin":"tron",
108 
            "cursor":true
109 
            }
110 
        );
111 
    </script>
112 
 
113 
Set the value
114 
-------
115 
 
116 
    <script>
117 
    $('.dial')
118 
        .val(27)
119 
        .trigger('change');
120 
    </script>
121 
 
122 
Supported browser
123 
-------
124 
 
125 
Tested on Chrome, Safari, Firefox, IE 9.0.