jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
102 lines (94 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Knob MultipleCirclePointers</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" />
<meta name="description" content="This is an example of Custom Element Knob with two pointers." />
<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 type="text/javascript" src="../../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['KnobSettings'] =
{
value: [60, 80],
min: 0,
max: 100,
startAngle: 150,
endAngle: 510,
snapToStep: true,
rotation: 'clockwise',
style: { fill: '#ebeced' },
marks: {
colorRemaining: '#333',
colorProgress: '#66707e',
style: 'line',
offset: '71%',
thickness: 1,
size: '6%',
majorSize: '9%',
majorInterval: 10,
minorInterval: 2
},
labels: {
offset: '88%',
step: 10
},
changing: (oldValues, newValues) => {
var range = newValues[1] - newValues[0];
if (range < 10)
return false;
if (range > 90)
return false;
},
progressBar: {
style: [{ fill: '#66707e', stroke: '#66707e', strokeWidth: 0 },
{ fill: '#66707e', stroke: '#66707e', strokeWidth: 0 }],
size: '9%',
offset: '58%',
background: { fill: '#a2da39', stroke: '#a2da39', strokeWidth: 0 }
},
spinner: {
style: { fill: '#66707e', stroke: '#66707e' },
innerRadius: '0%', // specifies the inner Radius of the dial
outerRadius: '58%', // specifies the outer Radius of the dial
marks: {
colorRemaining: '#a2da39',
colorProgress: '#a2da39',
type: 'circle',
offset: '55%',
thickness: 3,
size: '1%',
majorSize: '1%',
majorInterval: 10,
minorInterval: 10
}
},
pointer: [{ type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 },
{ type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 }]
};
window.onload = function() {
var myKnob = document.querySelector('jqx-knob');
var myLog = document.querySelector('#change');
myKnob.addEventListener('change', function(event) {
myLog.innerHTML = 'Values: ' + event.args.value;
});
};
</script>
</head>
<body>
<div class="example-description">
Custom element Knob with 2 pointers. The minimum range in the sample is 10, the maximum is 90.
</div>
<jqx-knob settings='KnobSettings'>
</jqx-knob>
<br /><br />
<div id="change"></div>
</body>
</html>