Skip to content

Commit

Permalink
README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
aterrien committed May 22, 2012
1 parent cad36a5 commit de7b83d
Showing 1 changed file with 81 additions and 44 deletions.
125 changes: 81 additions & 44 deletions 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
-------
Expand All @@ -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
-------
Expand All @@ -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">
Expand All @@ -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.