{"id":7652,"date":"2015-09-23T21:17:54","date_gmt":"2015-09-23T21:17:54","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/09\/23\/aterrien-jquery-knob\/"},"modified":"2015-09-23T21:17:54","modified_gmt":"2015-09-23T21:17:54","slug":"aterrien-jquery-knob","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/09\/23\/aterrien-jquery-knob\/","title":{"rendered":"aterrien\/jQuery-Knob"},"content":{"rendered":"<ul>\n<li>canvas based ; no png or jpg sprites.<\/li>\n<li>touch, mouse and mousewheel, keyboard events implemented.<\/li>\n<li>downward compatible ; overloads an input element.<\/li>\n<\/ul>\n<pre><code>\n\n\n    $(function() {\n        $(\".dial\").knob();\n    });\n\n<\/code><\/pre>\n<p>Options are provided as attributes \u2018data-option\u2019:<\/p>\n<pre><code>\n<\/code><\/pre>\n<p>\u2026 or in the \u201cknob()\u201d call :<\/p>\n<pre><code>$(\".dial\").knob({\n    'min':-50,\n    'max':50\n});\n<\/code><\/pre>\n<p>The following options are supported :<\/p>\n<p>Behaviors :<\/p>\n<ul>\n<li>min : min value | default=0.<\/li>\n<li>max : max value | default=100.<\/li>\n<li>step : step size | default=1.<\/li>\n<li>angleOffset : starting angle in degrees | default=0.<\/li>\n<li>angleArc : arc size in degrees | default=360.<\/li>\n<li>stopper : stop at min &amp; max on keydown\/mousewheel | default=true.<\/li>\n<li>readOnly : disable input and events | default=false.<\/li>\n<li>rotation : direction of progression | default=clockwise.<\/li>\n<\/ul>\n<p>UI :<\/p>\n<ul>\n<li>cursor : display mode \u201ccursor\u201d, cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value \u201ctrue\u201d | default=gauge.<\/li>\n<li>thickness : gauge thickness.<\/li>\n<li>lineCap : gauge stroke endings. | default=butt, round=rounded line endings<\/li>\n<li>width : dial width.<\/li>\n<li>displayInput : default=true | false=hide input.<\/li>\n<li>displayPrevious : default=false | true=displays the previous value with transparency.<\/li>\n<li>fgColor : foreground color.<\/li>\n<li>inputColor : input value (number) color.<\/li>\n<li>font : font family.<\/li>\n<li>fontWeight : font weight.<\/li>\n<li>bgColor : background color.<\/li>\n<\/ul>\n<h2>Hooks<\/h2>\n<pre><code>\n    $(\".dial\").knob({\n        'release' : function (v) { \/*make something*\/ }\n    });\n\n<\/code><\/pre>\n<ul>\n<li>\n<p>\u2018release\u2019 : executed on release<\/p>\n<p>Parameters :<\/p>\n<ul>\n<li>value : int, current value<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u2018change\u2019 : executed at each change of the value<\/p>\n<p>Parameters :<\/p>\n<ul>\n<li>value : int, current value<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u2018draw\u2019 : when drawing the canvas<\/p>\n<p>Context :<\/p>\n<ul>\n<li>this.g : canvas context 2D (see Canvas documentation)<\/li>\n<li>this.$ : jQuery wrapped element<\/li>\n<li>this.o : options<\/li>\n<li>this.i : input<\/li>\n<li>\u2026 console.log(this);<\/li>\n<\/ul>\n<\/li>\n<li>\n<p>\u2018cancel\u2019 : triggered on [esc] keydown<\/p>\n<\/li>\n<li>\n<p>\u2018format\u2019 : allows to format output (add unit %, ms \u2026)<\/p>\n<\/li>\n<\/ul>\n<p>The scope (this) of each hook function is the current Knob instance (refer to the demo code).<\/p>\n<h2>Example<\/h2>\n<pre><code>\n\n\n    $(\".dial\").knob({\n        'change' : function (v) { console.log(v); }\n    });\n\n<\/code><\/pre>\n<h2>Dynamically configure<\/h2>\n<pre><code>\n    $('.dial').trigger(\n        'configure',\n        {\n            \"min\":10,\n            \"max\":40,\n            \"fgColor\":\"#FF0000\",\n            \"skin\":\"tron\",\n            \"cursor\":true\n        }\n    );\n\n<\/code><\/pre>\n<h2>Set the value<\/h2>\n<pre><code>\n    $('.dial')\n        .val(27)\n        .trigger('change');\n\n<\/code><\/pre>\n<h2>Supported browser<\/h2>\n<p>Tested on Chrome, Safari, Firefox, IE&gt;=8.0 (IE8.0 with excanvas).<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/raw.github.com\/aterrien\/jQuery-Knob\/master\/secretplan.jpg\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>canvas based ; no png or jpg sprites. touch, mouse and mousewheel, keyboard events implemented. downward compatible ; overloads an input element. $(function() { $(&#8220;.dial&#8221;).knob(); }); Options are provided as attributes \u2018data-option\u2019: \u2026 or in the \u201cknob()\u201d call : $(&#8220;.dial&#8221;).knob({ &#8216;min&#8217;:-50, &#8216;max&#8217;:50 }); The following options are supported : Behaviors : min : min value [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7652","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7652"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7652\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}