Skip to content
Browse files

README.md

  • Loading branch information...
1 parent cad36a5 commit de7b83dddabae9af860a9f542141c9ea79e13c15 @aterrien committed May 22, 2012
Showing with 81 additions and 44 deletions.
  1. +81 −44 README.md
View
125 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.

0 comments on commit de7b83d

Please sign in to comment.
Something went wrong with that request. Please try again.