dojox

Version:

Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.

dojotoolkit.org

dojo/dojox

151 lines (150 loc) • 7.71 kB

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Gauges Gallery</title> <style type="text/css"> @import "../../../dojo/resources/dojo.css"; @import "../../../dijit/themes/claro/claro.css"; @import "style.css"; </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true, async: true } </script> <script type="text/javascript" src="../../../dojo/dojo.js"> </script> <script type="text/javascript"> require(["dojo/_base/kernel", "dojo/parser", "dijit/layout/TabContainer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojox/dgauges/components/default/CircularLinearGauge", "dojox/dgauges/components/default/SemiCircularLinearGauge", "dojox/dgauges/components/default/HorizontalLinearGauge", "dojox/dgauges/components/default/VerticalLinearGauge", "dojox/dgauges/components/black/CircularLinearGauge", "dojox/dgauges/components/black/SemiCircularLinearGauge", "dojox/dgauges/components/black/HorizontalLinearGauge", "dojox/dgauges/components/black/VerticalLinearGauge", "dojox/dgauges/components/classic/CircularLinearGauge", "dojox/dgauges/components/classic/SemiCircularLinearGauge", "dojox/dgauges/components/classic/HorizontalLinearGauge", "dojox/dgauges/components/classic/VerticalLinearGauge", "dojox/dgauges/components/green/CircularLinearGauge", "dojox/dgauges/components/green/SemiCircularLinearGauge", "dojox/dgauges/components/green/HorizontalLinearGauge", "dojox/dgauges/components/green/VerticalLinearGauge", "dojox/dgauges/components/grey/CircularLinearGauge", "dojox/dgauges/components/grey/SemiCircularLinearGauge", "dojox/dgauges/components/grey/HorizontalLinearGauge", "dojox/dgauges/components/grey/VerticalLinearGauge"]); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.TabContainer" id="tabContainer" style="width:600px; height:400px"> <div data-dojo-type="dijit.layout.ContentPane" title="Default"> <div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true"> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> <div data-dojo-type="dojox.dgauges.components.default.CircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:200px" splitter="true" region="left"> <div data-dojo-type="dojox.dgauges.components.default.SemiCircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:52px" splitter="true" region="right"> <div data-dojo-type="dojox.dgauges.components.default.VerticalLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; height:52px" splitter="true" region="bottom"> <div data-dojo-type="dojox.dgauges.components.default.HorizontalLinearGauge"> </div> </div> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" title="Black"> <div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true"> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> <div data-dojo-type="dojox.dgauges.components.black.CircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:200px" splitter="true" region="left"> <div data-dojo-type="dojox.dgauges.components.black.SemiCircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:52px" splitter="true" region="right"> <div data-dojo-type="dojox.dgauges.components.black.VerticalLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; height:52px" splitter="true" region="bottom"> <div data-dojo-type="dojox.dgauges.components.black.HorizontalLinearGauge"> </div> </div> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" title="Classic"> <div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true"> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> <div data-dojo-type="dojox.dgauges.components.classic.CircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:200px" splitter="true" region="left"> <div data-dojo-type="dojox.dgauges.components.classic.SemiCircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:52px" splitter="true" region="right"> <div data-dojo-type="dojox.dgauges.components.classic.VerticalLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; height:52px" splitter="true" region="bottom"> <div data-dojo-type="dojox.dgauges.components.classic.HorizontalLinearGauge"> </div> </div> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" title="Green"> <div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true"> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> <div data-dojo-type="dojox.dgauges.components.green.CircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:200px" splitter="true" region="left"> <div data-dojo-type="dojox.dgauges.components.green.SemiCircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:52px" splitter="true" region="right"> <div data-dojo-type="dojox.dgauges.components.green.VerticalLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; height:52px" splitter="true" region="bottom"> <div data-dojo-type="dojox.dgauges.components.green.HorizontalLinearGauge"> </div> </div> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" title="Grey"> <div data-dojo-type="dijit.layout.BorderContainer" gutters="true" liveSplitters="true"> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa;" splitter="true" region="center"> <div data-dojo-type="dojox.dgauges.components.grey.CircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:200px" splitter="true" region="left"> <div data-dojo-type="dojox.dgauges.components.grey.SemiCircularLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; width:52px" splitter="true" region="right"> <div data-dojo-type="dojox.dgauges.components.grey.VerticalLinearGauge"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" style="background-color: #fafafa; height:52px" splitter="true" region="bottom"> <div data-dojo-type="dojox.dgauges.components.grey.HorizontalLinearGauge"> </div> </div> </div> </div> </div> </body> </html>