Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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 |  |