README.md

Author: aterrien

README.md

@@ -1,9 +1,20 @@
 jQuery Knob
 =============
 
-- canvas based ; no png or jpg sprites
-- touch, mousewheel, keyboard events implemented
-- downward compatible ; overloads an input element
+- canvas based ; no png or jpg sprites.
+- touch, mousewheel, keyboard events implemented.
+- downward compatible ; overloads an input element.
+
+Example
+-------
+
+    <input type="text" value="75" class="dial">
+
+    <script>
+    $(function() {
+        $(".dial").knob();
+    }
+    </script>
 
 Options
 -------
@@ -12,23 +23,35 @@ Options are provided as attributes 'data-option':
 
     <input type="text" class="dial" data-min="-50" data-max="50">
 
+... or in the "knob()" call :
+
+    $(".dial").knob({
+                    'min':-50
+                    ,'max':50
+                    })
+
 The following options are supported :
 
-* min : min value
-* max : max value
-* cursor : display mode "cursor" | default=gauge
-* thickness : gauge thickness
-* width : dial width
-* displayInput : default=true | false=hide input
-* fgColor : foreground color
-* bgColor : background color
-* ticks : number of ticks | 0=disable
-* tickColor
-* tickLength
-* tickWidth
-* tickColorizeValues : colorize ticks
-* readOnly : disable input and events
-* skin : default | "tron"
+Behaviors :
+* min : min value || default=0.
+* max : max value || default=100.
+* stopper : stop at 0 & 100 on keydown/mousewheel || default=true.
+* readOnly : disable input and events.
+
+UI :
+* cursor : display mode "cursor" | default=gauge.
+* thickness : gauge thickness.
+* width : dial width.
+* displayInput : default=true | false=hide input.
+* displayPrevious : default=false | true=displays the previous value with transparency.
+* fgColor : foreground color.
+* bgColor : background color.
+* ticks : number of ticks | 0=disable.
+* tickColor.
+* tickLength.
+* tickWidth.
+* tickColorizeValues : colorize ticks.
+* skin : default | "tron".
 
 Hooks
 -------
@@ -39,32 +62,26 @@ Hooks
                     });
     </script>
 
-* 'release' : executed on release.
+* 'release' : executed on release
 
-            Parameters :
-            - value : int, current value
-            - input : jQuery element, input element
+    Parameters :
+        value : int, current value
+        input : jQuery element, input element
 
 * 'change' : executed at each change of the value
 
-            Parameters :
-            - value : int, current value
+    Parameters :
+        value : int, current value
 
 * 'draw' : when drawing the canvas
 
-Example 1
--------
-
-    <input type="text" value="75" class="dial">
+    Parameters :
+        angle : computed angle
+        value : current value
+        opt : plugin options
+        context : Canvas context 2d
 
-    <script>
-    $(function() {
-        $(".dial").knob();
-    }
-    </script>
-
-
-Example 2
+Example
 -------
 
     <input type="text" value="75" class="dial">
@@ -76,19 +93,39 @@ Example 2
                                 console.log(e);
                             }
                         }
-                    )
-              .val(79);
+                    );
     </script>
 
 
-Tested on Chrome, Safari, Firefox.
-Not tested on MSIE.
+Dynamically configure
+-------
 
+    <script>
+    $('.dial').trigger('configure',{"min":10, "max":40, "fgColor":"#FF0000", "skin":"tron", "cursor":true})
+    </script>
+
+Supported browser
+-------
+
+Tested on Chrome, Safari, Firefox, IE 9.0.
+
+Revision 1.1.2
+-------
+- removed padding around the wheel in default skin / default thickness = 0.35.
+- 'configure' event.
+- added 'displayPrevious' option.
+- change color cgColor / 'displayPrevious' must be true.
+- escape keycode supported while changing = restore the current value.
+- tab keycode supported.
+- added 'stopper'.
+- bugfix init when 'value' attribute is not defined.
+- JSLint qa.
+- infinite mode demo.
 
 Revision 1.1.1
 -------
-- keyboard/mousewheel control refactoring / acceleration
-- bugfix no keyboard or mousewheel when readonly
-- bugfix min/max can be exceeded
-- hooks / keyboard events
+- keyboard/mousewheel control refactoring / acceleration.
+- bugfix no keyboard or mousewheel when readonly.
+- bugfix min/max can be exceeded.
+- hooks / keyboard events.