jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
1,092 lines • 53.8 kB
HTML
<!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>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>None</em></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>None</em>
</div>
<h4>Code examples</h4>
<p>
Invoke the <code>destroy</code> method.
</p>
<pre><code>$('#jqxKnob').jqxKnob('destroy'); </code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-destroy-method">destroys the jqxKnob</a>
</div>
</div>
</td>
</tr>
<tr>
<td class="documentation-option-type-click">
<span id='Span12'>val</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>
Sets or gets the value.
</p>
<div class="methodArgs">
<table class="arguments">
<tbody>
<tr>
<th>Parameter</th>
<th>Type</th>
<th>Description</th>
</tr>
<tr>
<td><em>value</em></td>
<td>String</td>
<td></td>
</tr>
</tbody>
</table>
<strong>Return Value</strong><br />
<em>String</em>
</div>
<h4>Code examples</h4>
<p>
Get the <code>value</code>:
</p>
<pre><code>var value = $('#jqxKnob').jqxKnob('val'); or var value = $('#jqxKnob').val();</code></pre>
<p>
Set the <code>value</code>:
</p>
<pre><code>$('#jqxKnob').jqxKnob('val', 50); or $('#jqxKnob').val(50);</code></pre>
<div style="padding-bottom: 5px;">
<em>Try it:</em> <a target="_blank" href="https://www.jqwidgets.com/jseditor/?key=jqxknob-val-method">sets the jqxKnob value</a>
</div>
</div>
</td>
</tr>
</table>
<br />
</div>
</body>
</html>