jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
88 lines (84 loc) • 4.88 kB
HTML
<html lang="en">
<head>
<title id="Description">Integration of jqxGauge with Knockout</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/json2.js"></script>
<script type="text/javascript" src="../../../scripts/knockout-3.0.0.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgauge.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var viewModel = function (value) {
this.value = ko.observable(value);
this.min = ko.observable(0);
this.max = ko.observable(100);
this.disabled = ko.observable(false);
};
ko.applyBindings(new viewModel(60));
});
</script>
</head>
<body class='default'>
<div>
<div style="float: left;" id="gaugeContainer" data-bind="jqxGauge: {ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 5 },
{ startValue: 25, endValue: 50, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
{ startValue: 50, endValue: 85, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
{ startValue: 85, endValue: 100, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
ticksMinor: { interval: 5, size: '5%' },
ticksMajor: { interval: 10, size: '9%' },
value: value,
min: min,
max: max,
disabled: disabled,
colorScheme: 'scheme05',
animationDuration: 1200}">
</div>
<div data-bind="jqxLinearGauge: {orientation: 'vertical', width: 110, height: 350,
ticksMajor: { size: '10%', interval: 10 },
ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
max: max,
min: min,
value: value,
disabled: disabled,
pointer: { size: '5%' },
colorScheme: 'scheme05',
labels: {
interval: 20, formatValue: function (value, position) {
if (position === 'far') {
value = (9 / 5) * value + 32;
if (value === -76) {
return '°F';
}
return value + '°';
}
if (value === -60) {
return '°C';
}
return value + '°';
}
},
ranges: [
{ startValue: 10, endValue: 30, style: { fill: '#FFF157', stroke: '#FFF157' } },
{ startValue: 30, endValue: 65, style: { fill: '#FFA200', stroke: '#FFA200' } },
{ startValue: 65, endValue: 100, style: { fill: '#FF4800', stroke: '#FF4800' } }],
animationDuration: 1500}"
style="margin-left: 50px; float: left;" id="linearGauge">
</div>
</div>
<div data-bind="jqxSlider: {min: min, max: max, value: value, disabled: disabled, width: 300, height: 25, showTicks: false, mode: 'fixed'}"></div>
<div data-bind="jqxCheckBox: {checked: disabled, width: '100px'}" style='margin-top: 10px; margin-bottom: 10px;'>Disabled</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>