jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
137 lines (124 loc) • 5.16 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Knob MultipleKnobs</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 multiple Custom Element Knobs." />
<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>
<style type="text/css">
#knobContainer {
position: relative;
}
#knob2 {
position: absolute ;
top: 120px;
left: 60px;
}
#knob3 {
position: absolute ;
top: 100px;
left: 60px;
}
</style>
<script>
var startValue1, startValue2, startValue3;
startValue1 = startValue2 = startValue3 = 60;
JQXElements.settings['KnobSettings'] = {
value: startValue1,
min: 0,
max: 100,
width: 400,
height:400,
startAngle: 180,
endAngle: 540,
snapToStep: true,
pointerGrabAction: 'progressBar',
rotation: 'clockwise',
style: { fill: '#FFFFFF' },
marks: {
drawAboveProgressBar: true,
colorRemaining: 'white',
colorProgress: 'white',
style: 'line',
offset: '78%',
thickness: 3,
size: '18%',
minorInterval: 5
},
progressBar: {
style: { fill: '#407ec3', stroke: '#407ec3' },
size: '18%',
offset: '78%',
background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
},
pointer: { type: 'line', visible: false, style: { fill: '#407ec3' }, size: '18%', offset: '78%', thickness: 0 }
};
window.onload = function () {
var startValue1, startValue2, startValue3;
startValue1 = startValue2 = startValue3 = 60;
var knob2 = document.createElement('jqx-knob');
knob2.id = 'knob2';
var knob3 = document.createElement('jqx-knob');
knob3.id = 'knob3';
var knob = document.getElementById('knobContainer');
knob2.settings = {
value: startValue2,
min: 0,
max: 100,
startAngle: 190,
width: 300,
height: 300,
endAngle: 350,
snapToStep: true,
pointerGrabAction: 'progressBar',
rotation: 'clockwise',
style: { fill: 'transparent' },
progressBar: {
style: { fill: '#ef6100', stroke: '#ef6100' },
size: '18%',
offset: '78%',
background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
},
pointer: { type: 'line', visible: false, style: { fill: '#33AADD' }, size: '18%', offset: '78%', thickness: 0 }
};
document.body.appendChild(knob2);
knob3.settings = {
value: startValue3,
min: 0,
max: 100,
startAngle: 10,
width: 300,
height: 300,
endAngle: 170,
snapToStep: true,
pointerGrabAction: 'progressBar',
rotation: 'clockwise',
style: { fill: 'transparent' },
progressBar: {
style: { fill: '#18a25e', stroke: '#18a25e' },
size: '18%',
offset: '78%',
background: { fill: '#cfd0d4', stroke: '#cfd0d4' }
},
pointer: { type: 'line', visible: false, style: { fill: '#00a4e1' }, size: '18%', offset: '78%', thickness: 0 }
};
document.body.appendChild(knob3);
}
</script>
</head>
<body>
<div class="example-description">
Multiple Custom element Knob Widgets.
</div>
<jqx-knob settings="KnobSettings" id="knobContainer"></jqx-knob>
</body>
</html>