|
allowValueChangeOnClick
|
boolean
|
true
|
Sets or gets the allowValueChangeOnClick property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,allowValueChangeOnClick:true, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
allowValueChangeOnDrag
|
boolean
|
true
|
Sets or gets the allowValueChangeOnDrag property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,allowValueChangeOnDrag:true, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
allowValueChangeOnMouseWheel
|
boolean
|
true
|
Sets or gets the allowValueChangeOnMouseWheel property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,allowValueChangeOnMouseWheel:true, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
changing
|
function
|
null
|
Sets or gets the changing property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, changing:"changing", theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
dragEndAngle
|
number
|
0
|
Sets or gets the dragEndAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,dragEndAngle:420, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
dragStartAngle
|
number
|
360
|
Sets or gets the dragStartAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,dragStartAngle:120, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels,disabled:true, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
dial
|
object
|
null
|
Sets or gets the dial property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, dial:"dial", theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
endAngle
|
number
|
360
|
Sets or gets the endAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
height
|
number
|
400
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light",height:400 } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
labels
|
object
|
null
|
Sets or gets the labels property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
marks
|
object
|
null
|
Sets or gets the marks property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
min
|
number
|
0
|
Sets or gets the min property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
max
|
number
|
100
|
Sets or gets the max property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
progressBar
|
object
|
null
|
Sets or gets the progressBar property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
pointer
|
object
|
null
|
Sets or gets the pointer property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
pointerGrabAction
|
string
|
"normal"
|
Sets or gets the pointerGrabAction property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light", pointerGrabAction:"normal" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
rotation
|
string
|
"clockwise"
|
Sets or gets the rotation property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "counterclockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
startAngle
|
number
|
0
|
Sets or gets the startAngle property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
spinner
|
object
|
null
|
Sets or gets the spinner property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light", spinner:"spinner" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
style
|
object
|
null
|
Sets or gets the style property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light", style:'{ stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } }' } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
step
|
number
|
1
|
Sets or gets the step property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light",step:10 } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
snapToStep
|
boolean
|
true
|
Sets or gets the snapToStep property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:false, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
value
|
number
|
0
|
Sets or gets the value property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
width
|
number
|
400
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light",width:500 } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxKnob.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { value:60,min:0,max:100,startAngle:120,endAngle:480,snapToStep:true, rotation: "clockwise", pointer:pointer, progressBar:progressBar, marks:marks, labels:labels, theme:"light" } window.onload = function() { document.querySelector( "jqx-knob").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { } window.onload = function() { document.querySelector( "jqx-knob").destroy(); } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
string |
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Knob Custom Element</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" /> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../styles/demos.css" type="text/css" /> <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../jqwidgets/jqxknob.js"></script> <script> var labels = { offset: '88%', step: 10, visible: true } var marks = { colorRemaining: { color: '#373636', border: '#373636' }, colorProgress: { color: '#373636', border: '#373636' }, type: 'line', offset: '71%', thickness: 1, size: '6%', majorSize: '9%', majorInterval: 10, minorInterval: 2 } var progressBar = { size: '70%', offset: '0%', background: { stroke: '#373636', strokeWidth: 1, fill: { color: '#a7a7a7', gradientType: "linear", gradientStops: [[0, 1], [50, 0.5], [100, 1]] } } } var pointer = { type: 'circle', style: { fill: { color: '#a4a3a3', gradientType: "linear", gradientStops: [[0, 0.5], [50, 0.6], [100, 1]] }, stroke: '#333' }, size: '10%', offset: '50%' } JQXElements.settings[ "knobSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-knob").val(); } </script></head><body> <jqx-knob settings="knobSettings"></jqx-knob>
|
