1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
|
jQuery Knob
=============
- canvas based ; no png or jpg sprites.
- touch, mouse and mousewheel, keyboard events implemented.
- downward compatible ; overloads an input element.
Example
-------
```html
<input type="text" value="75" class="dial">
<script>
$(function() {
$(".dial").knob();
});
</script>
```
Options
-------
Options are provided as attributes 'data-option':
```html
<input type="text" class="dial" data-min="-50" data-max="50">
```
... or in the "knob()" call :
```javascript
$(".dial").knob({
'min':-50,
'max':50
});
```
The following options are supported :
Behaviors :
* min : min value | default=0.
* max : max value | default=100.
* step : step size | default=1.
* angleOffset : starting angle in degrees | default=0.
* angleArc : arc size in degrees | default=360.
* stopper : stop at min & max on keydown/mousewheel | default=true.
* readOnly : disable input and events | default=false.
* rotation : direction of progression | default=clockwise.
UI :
* cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.
* thickness : gauge thickness.
* lineCap : gauge stroke endings. | default=butt, round=rounded line endings
* width : dial width.
* height : dial height.
* displayInput : default=true | false=hide input.
* displayPrevious : default=false | true=displays the previous value with transparency.
* fgColor : foreground color.
* inputColor : input value (number) color.
* font : font family.
* fontWeight : font weight.
* bgColor : background color.
Hooks
-------
```html
<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
Context :
- this.g : canvas context 2D (see Canvas documentation)
- this.$ : jQuery wrapped element
- this.o : options
- this.i : input
- ... console.log(this);
* 'cancel' : triggered on [esc] keydown
* 'format' : allows to format output (add unit %, ms ...)
The scope (this) of each hook function is the current Knob instance (refer to the demo code).
Example
-------
```html
<input type="text" value="75" class="dial">
<script>
$(".dial").knob({
'change' : function (v) { console.log(v); }
});
</script>
```
Dynamically configure
-------
```html
<script>
$('.dial').trigger(
'configure',
{
"min":10,
"max":40,
"fgColor":"#FF0000",
"skin":"tron",
"cursor":true
}
);
</script>
```
Set the value
-------
```html
<script>
$('.dial')
.val(27)
.trigger('change');
</script>
```
Supported browser
-------
Tested on Chrome, Safari, Firefox, IE>=8.0 (IE8.0 with excanvas).
|
