| 提交 | 用户 | 时间 | ||
| 58d006 | 1 | jQuery Knob |
| A | 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 | ||
| 44 | UI : | |
| 45 | * 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. | |
| 46 | * thickness : gauge thickness. | |
| 47 | * lineCap : gauge stroke endings. | default=butt, round=rounded line endings | |
| 48 | * width : dial width. | |
| 49 | * displayInput : default=true | false=hide input. | |
| 50 | * displayPrevious : default=false | true=displays the previous value with transparency. | |
| 51 | * fgColor : foreground color. | |
| 52 | * inputColor : input value (number) color. | |
| 53 | * font : font family. | |
| 54 | * fontWeight : font weight. | |
| 55 | * bgColor : background color. | |
| 56 | ||
| 57 | Hooks | |
| 58 | ------- | |
| 59 | ||
| 60 | <script> | |
| 61 | $(".dial").knob({ | |
| 62 | 'release' : function (v) { /*make something*/ } | |
| 63 | }); | |
| 64 | </script> | |
| 65 | ||
| 66 | * 'release' : executed on release | |
| 67 | ||
| 68 | Parameters : | |
| 69 | + value : int, current value | |
| 70 | ||
| 71 | * 'change' : executed at each change of the value | |
| 72 | ||
| 73 | Parameters : | |
| 74 | + value : int, current value | |
| 75 | ||
| 76 | * 'draw' : when drawing the canvas | |
| 77 | ||
| 78 | Context : | |
| 79 | - this.g : canvas context 2D (see Canvas documentation) | |
| 80 | - this.$ : jQuery wrapped element | |
| 81 | - this.o : options | |
| 82 | - this.i : input | |
| 83 | - ... console.log(this); | |
| 84 | ||
| 85 | * 'cancel' : triggered on [esc] keydown | |
| 86 | ||
| 87 | * 'error' : called if the browser doesn't support canvases and the plugin didn't initialize as a result | |
| 88 | ||
| 89 | The scope (this) of each hook function is the current Knob instance (refer to the demo code). | |
| 90 | ||
| 91 | Example | |
| 92 | ------- | |
| 93 | ||
| 94 | <input type="text" value="75" class="dial"> | |
| 95 | ||
| 96 | <script> | |
| 97 | $(".dial").knob({ | |
| 98 | 'change' : function (v) { console.log(v); } | |
| 99 | }); | |
| 100 | </script> | |
| 101 | ||
| 102 | ||
| 103 | Dynamically configure | |
| 104 | ------- | |
| 105 | ||
| 106 | <script> | |
| 107 | $('.dial') | |
| 108 | .trigger( | |
| 109 | 'configure', | |
| 110 | { | |
| 111 | "min":10, | |
| 112 | "max":40, | |
| 113 | "fgColor":"#FF0000", | |
| 114 | "skin":"tron", | |
| 115 | "cursor":true | |
| 116 | } | |
| 117 | ); | |
| 118 | </script> | |
| 119 | ||
| 120 | Set the value | |
| 121 | ------- | |
| 122 | ||
| 123 | <script> | |
| 124 | $('.dial') | |
| 125 | .val(27) | |
| 126 | .trigger('change'); | |
| 127 | </script> | |
| 128 | ||
| 129 | Supported browser | |
| 130 | ------- | |
| 131 | ||
| 132 | Tested on Chrome, Safari, Firefox, IE 9.0. | |
| 133 | ||
| 134 | MIT License | |
| 135 | ------- | |
| 136 | ||
| 137 | Copyright (C) 2013 Anthony Terrien | |
| 138 | ||
| 139 | Permission is hereby granted, free of charge, to any person obtaining a copy of | |
| 140 | this software and associated documentation files (the "Software"), to deal in | |
| 141 | the Software without restriction, including without limitation the rights to | |
| 142 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | |
| 143 | the Software, and to permit persons to whom the Software is furnished to do so, | |
| 144 | subject to the following conditions: | |
| 145 | ||
| 146 | The above copyright notice and this permission notice shall be included in all | |
| 147 | copies or substantial portions of the Software. | |
| 148 | ||
| 149 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |
| 150 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS | |
| 151 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | |
| 152 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER | |
| 153 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN | |
| 154 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | |
