| 776 |
lars |
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 |
* step : step size | default=1.
|
|
|
39 |
* angleOffset : starting angle in degrees | default=0.
|
|
|
40 |
* angleArc : arc size in degrees | default=360.
|
|
|
41 |
* stopper : stop at min & max on keydown/mousewheel | default=true.
|
|
|
42 |
* readOnly : disable input and events | default=false.
|
|
|
43 |
* rotation : direction of progression | default=clockwise.
|
|
|
44 |
|
|
|
45 |
UI :
|
|
|
46 |
* 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.
|
|
|
47 |
* thickness : gauge thickness.
|
|
|
48 |
* lineCap : gauge stroke endings. | default=butt, round=rounded line endings
|
|
|
49 |
* width : dial width.
|
|
|
50 |
* displayInput : default=true | false=hide input.
|
|
|
51 |
* displayPrevious : default=false | true=displays the previous value with transparency.
|
|
|
52 |
* fgColor : foreground color.
|
|
|
53 |
* inputColor : input value (number) color.
|
|
|
54 |
* font : font family.
|
|
|
55 |
* fontWeight : font weight.
|
|
|
56 |
* bgColor : background color.
|
|
|
57 |
|
|
|
58 |
Hooks
|
|
|
59 |
-------
|
|
|
60 |
|
|
|
61 |
<script>
|
|
|
62 |
$(".dial").knob({
|
|
|
63 |
'release' : function (v) { /*make something*/ }
|
|
|
64 |
});
|
|
|
65 |
</script>
|
|
|
66 |
|
|
|
67 |
* 'release' : executed on release
|
|
|
68 |
|
|
|
69 |
Parameters :
|
|
|
70 |
+ value : int, current value
|
|
|
71 |
|
|
|
72 |
* 'change' : executed at each change of the value
|
|
|
73 |
|
|
|
74 |
Parameters :
|
|
|
75 |
+ value : int, current value
|
|
|
76 |
|
|
|
77 |
* 'draw' : when drawing the canvas
|
|
|
78 |
|
|
|
79 |
Context :
|
|
|
80 |
- this.g : canvas context 2D (see Canvas documentation)
|
|
|
81 |
- this.$ : jQuery wrapped element
|
|
|
82 |
- this.o : options
|
|
|
83 |
- this.i : input
|
|
|
84 |
- ... console.log(this);
|
|
|
85 |
|
|
|
86 |
* 'cancel' : triggered on [esc] keydown
|
|
|
87 |
|
|
|
88 |
* 'format' : allows to format output (add unit %, ms ...)
|
|
|
89 |
|
|
|
90 |
The scope (this) of each hook function is the current Knob instance (refer to the demo code).
|
|
|
91 |
|
|
|
92 |
Example
|
|
|
93 |
-------
|
|
|
94 |
|
|
|
95 |
<input type="text" value="75" class="dial">
|
|
|
96 |
|
|
|
97 |
<script>
|
|
|
98 |
$(".dial").knob({
|
|
|
99 |
'change' : function (v) { console.log(v); }
|
|
|
100 |
});
|
|
|
101 |
</script>
|
|
|
102 |
|
|
|
103 |
|
|
|
104 |
Dynamically configure
|
|
|
105 |
-------
|
|
|
106 |
|
|
|
107 |
<script>
|
|
|
108 |
$('.dial')
|
|
|
109 |
.trigger(
|
|
|
110 |
'configure',
|
|
|
111 |
{
|
|
|
112 |
"min":10,
|
|
|
113 |
"max":40,
|
|
|
114 |
"fgColor":"#FF0000",
|
|
|
115 |
"skin":"tron",
|
|
|
116 |
"cursor":true
|
|
|
117 |
}
|
|
|
118 |
);
|
|
|
119 |
</script>
|
|
|
120 |
|
|
|
121 |
Set the value
|
|
|
122 |
-------
|
|
|
123 |
|
|
|
124 |
<script>
|
|
|
125 |
$('.dial')
|
|
|
126 |
.val(27)
|
|
|
127 |
.trigger('change');
|
|
|
128 |
</script>
|
|
|
129 |
|
|
|
130 |
Supported browser
|
|
|
131 |
-------
|
|
|
132 |
|
|
|
133 |
Tested on Chrome, Safari, Firefox, IE>=8.0 (IE8.0 with excanvas).
|
|
|
134 |
|
|
|
135 |
|