jqwidgets-framework

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../../../Styles/jqx.apireference.css" type="text/css" /> <script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../../../scripts/documentation.js"></script> <title>jqxKnob API Reference</title> <script type="text/javascript"> $(document).ready(function () { $(".documentation-option-type-click").click(function (event) { $(event.target).parents('tr').next().find(".property-content").toggle(); }); }); </script> </head> <body> <div id="properties"> <h2 class="documentation-top-header">Properties</h2> <table class="documentation-table"> <tr> <th>Name </th> <th>Type </th> <th>Default </th> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span2'>allowValueChangeOnClick</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the jqxKnob's value can be changed on click. </p> <h4>Code examples</h4> <p> Set the <code>allowValueChangeOnClick</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnClick: false });</code></pre> <p> Get the <code>allowValueChangeOnClick</code> property. </p> <pre><code>var allowValueChangeOnClick = $('#jqxKnob').jqxKnob('allowValueChangeOnClick');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnClick is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span21'>allowValueChangeOnDrag</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the jqxKnob's value can be changed by dragging the pointer. </p> <h4>Code examples</h4> <p> Set the <code>allowValueChangeOnDrag</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnDrag: false });</code></pre> <p> Get the <code>allowValueChangeOnDrag</code> property. </p> <pre><code>var allowValueChangeOnDrag = $('#jqxKnob').jqxKnob('allowValueChangeOnDrag');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnDrag is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span22'>allowValueChangeOnMouseWheel</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the jqxKnob's value can be changed on mouse wheel. </p> <h4>Code examples</h4> <p> Set the <code>allowValueChangeOnMouseWheel</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({allowValueChangeOnMouseWheel: false });</code></pre> <p> Get the <code>allowValueChangeOnMouseWheel</code> property. </p> <pre><code>var allowValueChangeOnMouseWheel = $('#jqxKnob').jqxKnob('allowValueChangeOnMouseWheel');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-allowvaluechangeonclick-property">allowValueChangeOnMouseWheel is set to false</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span3'>changing</span> </td> <td> <span>Function</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets a function called when the user drags the pointer. The function is called before the pointer is moved and the passed arguments are 2 - oldValue and newValue. If the function returns false, the value will not be changed. </p> <h4>Code examples</h4> <p> Set the <code>changing</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({changing: function(oldValue, newValue){} });</code></pre> <p> Get the <code>changing</code> property. </p> <pre><code>var changing = $('#jqxKnob').jqxKnob('changing');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-changing-property">changing is set to function</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span1'>dragEndAngle</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's angle where dragging the pointer will end. </p> <h4>Code examples</h4> <p> Set the <code>dragEndAngle</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({dragEndAngle: 420 });</code></pre> <p> Get the <code>dragEndAngle</code> property. </p> <pre><code>var dragEndAngle = $('#jqxKnob').jqxKnob('dragEndAngle');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragEndAngle is set to 420</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span4'>dragStartAngle</span> </td> <td> <span>Number</span> </td> <td>360 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's degrees where dragging the pointer can start. </p> <h4>Code examples</h4> <p> Set the <code>dragStartAngle</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({dragStartAngle: 120 });</code></pre> <p> Get the <code>dragStartAngle</code> property. </p> <pre><code>var dragStartAngle = $('#jqxKnob').jqxKnob('dragStartAngle');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">dragStartAngle is set to 120</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span5'>disabled</span> </td> <td> <span>Boolean</span> </td> <td>false </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets whether the Knob is disabled. </p> <h4>Code examples</h4> <p> Set the <code>disabled</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({disabled: true });</code></pre> <p> Get the <code>disabled</code> property. </p> <pre><code>var disabled = $('#jqxKnob').jqxKnob('disabled');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-disabled-state">disabled is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span6'>dial</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's dial. <ul> <li>innerRadius - specifies the inner Radius of the dial.</li> <li>outerRadius - specifies the outer Radius of the dial.</li> <li>style - specifies the style of the dial. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li> <li>startAngle - dial's start angle(optional).</li> <li>endAngle - dial's end angle(optional).</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>dial</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({dial: 360 });</code></pre> <p> Get the <code>dial</code> property. </p> <pre><code>var dial = $('#jqxKnob').jqxKnob('dial');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">dial is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span7'>endAngle</span> </td> <td> <span>Number</span> </td> <td>360 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's degrees offset for the 360 location. </p> <h4>Code examples</h4> <p> Set the <code>endAngle</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({endAngle: 360 });</code></pre> <p> Get the <code>endAngle</code> property. </p> <pre><code>var endAngle = $('#jqxKnob').jqxKnob('endAngle');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">endAngle is set to 420</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span8'>height</span> </td> <td> <span>Number</span> </td> <td>400 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's height. </p> <h4>Code examples</h4> <p> Set the <code>height</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({height: 360 });</code></pre> <p> Get the <code>height</code> property. </p> <pre><code>var height = $('#jqxKnob').jqxKnob('height');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">height is set to 400</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span9'>labels</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's labels. <ul> <li>rotate - specifies if labels should be vertical or rotated with the appropriate angle.</li> <li>offset - specifies the labels offset.</li> <li>visible - determines the labels visibility.</li> <li>step - sets the labels step.</li> <li>formatFunction - function which can be used to format the labels. <br /> Example: <pre><code> formatFunction: function (label) { if (label == 0) return "Min"; if (label == 100) return "Max"; return label; } </code></pre> </li> <li>style - specifies the style of the labels. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>labels</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({labels: { offset: '88%', step: 5, visible: true, formatFunction: function (label) { if (label == 0) return "Min"; if (label == 100) return "Max"; return label; } }); </code></pre> <p> Get the <code>labels</code> property. </p> <pre><code>var labels = $('#jqxKnob').jqxKnob('labels');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">labels is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span10'>marks</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's marks. <ul> <li>colorProgress - hex color string.</li> <li>colorRemaining - hex color string.</li> <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li> <li>minorInterval - minor ticks interval.</li> <li>majorInterval - major ticks interval.</li> <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li> <li>offset - specifies the labels offset.</li> <li>size - specifies radius in case of circular lines, or length in case of lines.</li> <li>type - "circle" or "line".</li> <li>thickness - specifies thickness in case of lines.</li> <li>visible - determines the labels visibility.</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>marks</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({marks: { colorRemaining: { color: 'grey', border: 'grey' }, colorProgress: { color: '#a2da39', border: '#a2da39' }, type: 'line', offset: '71%', thickness: 3, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 });</code></pre> <p> Get the <code>marks</code> property. </p> <pre><code>var marks = $('#jqxKnob').jqxKnob('marks');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">marks is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span16'>min</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's min property. </p> <h4>Code examples</h4> <p> Set the <code>min</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({min: 0});</code></pre> <p> Get the <code>min</code> property. </p> <pre><code>var min = $('#jqxKnob').jqxKnob('min');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">min is set to 0</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span17'>max</span> </td> <td> <span>Number</span> </td> <td>100 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's max property. </p> <h4>Code examples</h4> <p> Set the <code>max</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({max: 100});</code></pre> <p> Get the <code>max</code> property. </p> <pre><code>var max = $('#jqxKnob').jqxKnob('max');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">max is set to 100</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span19'>progressBar</span> </td> <td> <span>Object/Array of Objects</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's progressBar property. <ul> <li>offset - specifies the progress bar's offset.</li> <li>style - specifies the style of the progressBar. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width, style.opacity - opacity values from 0 to 1</li> <li>background - specifies the background style of the progressBar. background.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), background.strokeWidth - border width, background.opacity - opacity values from 0 to 1</li> <li>size - specifies the progress bar's size.</li> <li>ranges - array which specify the progress bar's ranges. object.startValue - range start value. range.endValue - range end value. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), object.stroke - border color(hex string), object.strokeWidth - border width, object.opacity - opacity values from 0 to 1</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>progressBar</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({ progressBar: { style: { fill: '#a2da39', stroke: 'grey' }, size: '9%', offset: '60%', background: { fill: 'grey', stroke: 'grey' } } }); </code></pre> <p> Get the <code>progressBar</code> property. </p> <pre><code>var progressBar = $('#jqxKnob').jqxKnob('progressBar');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">progressBar is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span20'>pointer</span> </td> <td> <span>Object/Array of Objects</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's pointer property. <ul> <li>type - specifies the pointer's type - "circle", "line", "arrow".</li> <li>style - specifies the style of the pointer. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li> <li>size - specifies the pointer's size.</li> <li>thickness - specifies the pointer's thickness.</li> <li>visible - specifies whether the pointer is visible.</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>pointer</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({pointer: { type: 'arrow', style: { fill: '#a2da39', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }} ); </code></pre> <p> Get the <code>pointer</code> property. </p> <pre><code>var pointer = $('#jqxKnob').jqxKnob('pointer');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointer is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span23'>pointerGrabAction</span> </td> <td> <span>String</span> </td> <td>"normal" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's pointerGrabAction property("normal", "progressBar", "pointer"). </p> <h4>Code examples</h4> <p> Set the <code>pointerGrabAction</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob( {pointerGrabAction: "pointer"} ); </code></pre> <p> Get the <code>pointerGrabAction</code> property. </p> <pre><code>var pointerGrabAction = $('#jqxKnob').jqxKnob('pointerGrabAction');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dial-property">pointerGrabAction is set to "normal"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span24'>rotation</span> </td> <td> <span>String</span> </td> <td>"clockwise" </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's rotation("clockwise" or "counterclockwise"). </p> <h4>Code examples</h4> <p> Set the <code>rotation</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob( {rotation: "counterclockwise"} ); </code></pre> <p> Get the <code>rotation</code> property. </p> <pre><code>var rotation = $('#jqxKnob').jqxKnob('rotation');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-rotation-property">rotation is set to "counterclockwise"</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span25'>startAngle</span> </td> <td> <span>Number</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's degrees offset for the 0 location. </p> <h4>Code examples</h4> <p> Set the <code>startAngle</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({startAngle: 120 });</code></pre> <p> Get the <code>startAngle</code> property. </p> <pre><code>var startAngle = $('#jqxKnob').jqxKnob('startAngle');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">startAngle is set to 120</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span26'>spinner</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets Knob's spinner. <ul> <li>innerRadius - specifies the inner Radius of the spinner.</li> <li>outerRadius - specifies the outer Radius of the spinner.</li> <li>style - specifies the style of the spinner. style.fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]]), style.stroke - border color(hex string), style.strokeWidth - border width.</li> <li>marks - <ul> <li>rotate - sets whether spinner marks rotate with pointer.</li> <li>colorProgress - hex color string.</li> <li>colorRemaining - hex color string.</li> <li>drawAboveProgressBar - draws the marks with z-index higher than the progress bar.</li> <li>minorInterval - minor ticks interval.</li> <li>majorInterval - major ticks interval.</li> <li>majorSize - major tick's size. Specifies radius in case of circular lines, or length in case of lines.</li> <li>offset - specifies the labels offset.</li> <li>size - specifies radius in case of circular lines, or length in case of lines.</li> <li>type - "circle" or "line".</li> <li>thickness - specifies thickness in case of lines.</li> <li>visible - determines the labels visibility.</li> </ul> </li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>spinner</code> property. </p> <pre><code> $('#jqxKnob').jqxKnob({spinner: { style: { fill: { color: '#00a4e1', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] }, stroke: '#00a4e1' }, innerRadius: '45%', // specifies the inner Radius of the dial outerRadius: '60%', // specifies the outer Radius of the dial marks: { colorRemaining: '#fff', colorProgress: '#fff', type: 'line', offset: '46%', thickness: 2, size: '14%', majorSize: '14%', majorInterval: 10, minorInterval: 10 } });</code></pre> <p> Get the <code>spinner</code> property. </p> <pre><code>var spinner = $('#jqxKnob').jqxKnob('spinner');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">spinner is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span28'>style</span> </td> <td> <span>Object</span> </td> <td>null </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's background style. <ul> <li>fill - fill color(hex string) or object(object.color(hex color), object.gradientType(linear, linearHorizontal or radial), gradientStops(Array like [[0, 1], [50, 0.5], [100, 1]])</li> <li>stroke - border color(hex string).</li> <li>strokeWidth - border width.</li> </ul> </p> <h4>Code examples</h4> <p> Set the <code>style</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } } });</code></pre> <p> Get the <code>style</code> property. </p> <pre><code>var style = $('#jqxKnob').jqxKnob('style');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">style is set to custom object</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span11'>step</span> </td> <td> <span>Number</span> </td> <td>1 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's step property. Specifies the increase/decrease step. </p> <h4>Code examples</h4> <p> Set the <code>step</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({step: 2});</code></pre> <p> Get the <code>step</code> property. </p> <pre><code>var step = $('#jqxKnob').jqxKnob('step');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-step-property">step is set to 10</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span29'>snapToStep</span> </td> <td> <span>Boolean</span> </td> <td>true </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's snapToStep property. Specifies whether setting the knob value will snap to the closest step true/false. </p> <h4>Code examples</h4> <p> Set the <code>snapToStep</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({snapToStep: true});</code></pre> <p> Get the <code>snapToStep</code> property. </p> <pre><code>var snapToStep = $('#jqxKnob').jqxKnob('snapToStep');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-dragstartangle-and-dragendangle-property">snapToStep is set to true</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span30'>value</span> </td> <td> <span>Number/Array of Numbers</span> </td> <td>0 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's value. </p> <h4>Code examples</h4> <p> Set the <code>value</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({value: 23});</code></pre> <p> Get the <code>value</code> property. </p> <pre><code>var value = $('#jqxKnob').jqxKnob('value');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-spinner-property">value is set to 60</a> </div> </div> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span31'>width</span> </td> <td> <span>Number</span> </td> <td>400 </td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Sets or gets the Knob's width. </p> <h4>Code examples</h4> <p> Set the <code>width</code> property. </p> <pre><code>$('#jqxKnob').jqxKnob({width: 400});</code></pre> <p> Get the <code>width</code> property. </p> <pre><code>var width = $('#jqxKnob').jqxKnob('width');</code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-width-and-height-properties">width is set to 400</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Events</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span27'>change</span> </td> <td> <span>Event</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> This event is triggered when the value is changed. </p> <h4>Code examples</h4> <p> Bind to the <code>change</code> event by type: jqxKnob. </p> <pre><code>$('#jqxKnob').on('change', function (event) {var args = event.args; var value = args.value; var changeSource = args.changeSource; // "pointerMove", "increment", "decrement", "val", "propertyChange" }); </code></pre> <div style="padding-bottom: 5px;"> <em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-change-event">Bind to the change event by type: jqxKnob.</a> </div> </div> </td> </tr> <tr> <td colspan='3' style='width: 100%'> <h2 class="documentation-top-header">Methods</h2> </td> </tr> <tr> <td class="documentation-option-type-click"> <span id='Span68'>destroy</span> </td> <td> <span>Method</span> </td> <td></td> </tr> <tr> <td colspan='3' style='width: 100%'> <div class="documentation-option-description property-content" style="display: none;"> <p> Destroys the widget. </p>