205 lines
6.3 KiB
HTML
205 lines
6.3 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Horizontal Gauge Sample</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
|
|
<link rel="stylesheet" type="text/css" href="../../../dijit/themes/claro/claro.css">
|
|
</head>
|
|
<script type="text/javascript">
|
|
var djConfig = {
|
|
|
|
parseOnLoad: true,
|
|
isDebug: true
|
|
}
|
|
</script>
|
|
<script type="text/javascript" src="../../../dojo/dojo.js">
|
|
</script>
|
|
<script type="text/javascript">
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
|
dojo.require("dijit.layout.BorderContainer");
|
|
dojo.require("dijit.layout.ContentPane");
|
|
dojo.require("dijit.ColorPalette");
|
|
|
|
dojo.require('dijit.form.Button');
|
|
dojo.require('dijit.form.CheckBox');
|
|
dojo.require("dijit.form.ComboBox");
|
|
dojo.require("dijit.form.HorizontalSlider");
|
|
dojo.require("dijit.TitlePane");
|
|
|
|
dojo.require('dojox.gauges.GlossyHorizontalGauge');
|
|
dojo.require("dojo.parser");
|
|
|
|
dojo.addOnLoad(sample);
|
|
|
|
var gauge = null;
|
|
|
|
function sample(){
|
|
// create an Horizontal Gauge
|
|
gauge = new dojox.gauges.GlossyHorizontalGauge({
|
|
background: [255, 255, 255, 0],
|
|
id: "glossyGauge",
|
|
title: "Value",
|
|
width: 400,
|
|
height: 100
|
|
}, dojo.byId("HorizontalGauge"));
|
|
|
|
gauge.startup();
|
|
}
|
|
|
|
function changeGaugeColor(v){
|
|
gauge.set('color', v);
|
|
}
|
|
|
|
function changeNeedleColor(v){
|
|
gauge.set('markerColor', v);
|
|
}
|
|
|
|
function changeMinorTicksColor(v){
|
|
gauge.set('minorTicksColor', v);
|
|
}
|
|
|
|
function changeMajorTicksColor(v){
|
|
gauge.set('majorTicksColor', v);
|
|
}
|
|
</script>
|
|
<body class="claro">
|
|
<table width="100%" border="0">
|
|
<tr>
|
|
<td width="450px">
|
|
<div id="HorizontalGauge">
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<table border="0">
|
|
<tr>
|
|
<td>
|
|
Title
|
|
</td>
|
|
<td>
|
|
<input type="text" value="Value" dojoType="dijit.form.TextBox" trim="true" onChange="gauge.set('title',this.value);">
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Minimum
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.set('min',Math.round(this.value));" value="0" minimum="0" maximum="200" discreteValues="200" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Maximum
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.set('max',Math.round(this.value));" value="100" minimum="0" maximum="200" discreteValues="200" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Gauge Color
|
|
</td>
|
|
<td>
|
|
<div id='gaugeColorPicker' dojoType='dijit.ColorPalette' onChange="changeGaugeColor" palette="3x4"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Needle Color
|
|
</td>
|
|
<td>
|
|
<div id='needleColorPicker' dojoType='dijit.ColorPalette' onChange="changeNeedleColor" palette="3x4"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Scale font
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.Button' onClick="gauge.set('font','italic normal normal 18pt Arial,sans-serif')">
|
|
Sample #1
|
|
</div>
|
|
<div dojoType='dijit.form.Button' onClick="gauge.set('font','normal normal bold 12pt Arial,sans-serif')">
|
|
Sample #2
|
|
</div>
|
|
<div dojoType='dijit.form.Button' onClick="gauge.set('font','normal normal normal 10pt serif')">
|
|
Default
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Allow interaction
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.CheckBox' checked onChange="gauge.set('noChange',!this.checked);" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<table border="0" width="100%">
|
|
<tr align="left">
|
|
<td title="Major Ticks">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
Major Ticks interval
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.set('majorTicksInterval',this.value);" value="10" minimum="1" maximum="100" discreteValues="100" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Major Ticks length
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.setMajorTicksLength(this.value)" value="5" minimum="1" maximum="15" discreteValues="1" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Major Ticks Color
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.ColorPalette' onChange="changeMajorTicksColor" palette="3x4"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
<td title="Minor Ticks">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
Minor Ticks interval
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.set('minorTicksInterval',this.value);" value="10" minimum="1" maximum="100" discreteValues="100" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Minor Ticks length
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.form.HorizontalSlider' intermediateChanges="true" onChange="gauge.setMinorTicksLength(this.value)" value="5" minimum="1" maximum="15" discreteValues="1" showButtons="false" style="width: 200px; height: 20px"/>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Minor Ticks Color
|
|
</td>
|
|
<td>
|
|
<div dojoType='dijit.ColorPalette' onChange="changeMinorTicksColor" palette="3x4"/>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html> |