jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
107 lines (99 loc) • 4.61 kB
HTML
<html lang="en">
<head>
<title id='Description'>This demo shows proportion between Red, Green and Blue in custom color, represented in jqxBarGauge.</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" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.arctic.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbargauge.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcolorpicker.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownbutton.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxslider.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollview.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
$(document).ready(function ()
{
var colorArray = [];
var rgbArray = [187, 255, 170];
var disabled = false;
var isRendered = false;
var isClosed = false;
$('#barGauge').jqxBarGauge({
width: getWidth('BarGauge'),
height: getHeight('BarGauge'),
values: rgbArray,
max: 255,
relativeInnerRadius: 0.5,
startAngle: 0,
endAngle: 90,
colorScheme: 'rgb',
customColorScheme: {
name: 'rgb',
colors: ['#307DD7', '#89A54E', '#AA4643']
},
title: {
text: 'jqxBarGauge',
font: {
size: 40
},
verticalAlignment: 'top',
margin: 0,
subtitle: {
text: '( visualization of "RGB" color proportions )',
font: {
size: 20
}
}
},
labels: { precision: 0, indent: 10 }
});
$('#redLevel').jqxSlider({theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 170, step: 25.5 });
$('#greenLevel').jqxSlider({ theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 255, step: 25.5 });
$('#blueLevel').jqxSlider({ theme: "arctic", mode: "fixed", min: 0, max: 255, ticksFrequency: 25.5, value: 187, step: 25.5 });
var setColor = function ()
{
var red = $('#redLevel').val();
var green = $('#greenLevel').val();
var blue = $('#blueLevel').val();
$('#barGauge').val(new Array(blue, green, red));
}
$('#redLevel').on('change', function (event)
{
setColor();
});
$('#greenLevel').on('change', function (event)
{
setColor();
});
$('#blueLevel').on('change', function (event)
{
setColor();
});
});
</script>
</head>
<body>
<div id='barGauge'></div>
<div style="float: left">
<span style="font-style: italic;">Red</span>
<div id='redLevel'>
</div>
<span style="font-style: italic;">Green</span>
<div id='greenLevel'>
</div>
<span style="font-style: italic;">Blue</span>
<div id='blueLevel'>
</div>
</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>