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.
113 lines (110 loc) • 7.27 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>Gauge Mobile Sample</title>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script language="JavaScript" type="text/javascript">
require(["dojox/mobile", "dojox/mobile/parser", "dojox/mobile/compat", "dojox/mobile/deviceTheme",
"dojox/dgauges/components/default/CircularLinearGauge",
"dojox/dgauges/components/default/SemiCircularLinearGauge",
"dojox/dgauges/components/default/VerticalLinearGauge",
"dojox/dgauges/components/default/HorizontalLinearGauge",
"dojox/dgauges/components/black/CircularLinearGauge",
"dojox/dgauges/components/black/SemiCircularLinearGauge",
"dojox/dgauges/components/black/VerticalLinearGauge",
"dojox/dgauges/components/black/HorizontalLinearGauge",
"dojox/dgauges/components/green/CircularLinearGauge",
"dojox/dgauges/components/green/SemiCircularLinearGauge",
"dojox/dgauges/components/green/VerticalLinearGauge",
"dojox/dgauges/components/green/HorizontalLinearGauge",
"dojox/dgauges/components/grey/CircularLinearGauge",
"dojox/dgauges/components/grey/SemiCircularLinearGauge",
"dojox/dgauges/components/grey/VerticalLinearGauge",
"dojox/dgauges/components/grey/HorizontalLinearGauge",
"dojox/dgauges/components/classic/CircularLinearGauge",
"dojox/dgauges/components/classic/SemiCircularLinearGauge",
"dojox/dgauges/components/classic/VerticalLinearGauge",
"dojox/dgauges/components/classic/HorizontalLinearGauge"]);
</script>
</head>
<body style="-webkit-user-select: none; outline: none; visibility:hidden;">
<div id="home" data-dojo-type="dojox.mobile.View" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Gauges</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Gauges Themes</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="defaultGauges" transition="slide">
Default
</li>
<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="classicGauges" transition="slide">
Classic
</li>
<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="blackGauges" transition="slide">
Black
</li>
<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="greyGauges" transition="slide">
Grey
</li>
<li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" moveTo="greenGauges" transition="slide">
Green
</li>
</ul>
</div>
<div id="defaultGauges" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Default Theme</h1>
<br/>
<div data-dojo-type="dojox.dgauges.components.default.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.default.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.default.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.default.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
</div>
<div id="classicGauges" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Classic Theme</h1>
<br/>
<div data-dojo-type="dojox.dgauges.components.classic.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.classic.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.classic.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.classic.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
</div>
<div id="blackGauges" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Black Theme</h1>
<br/>
<div data-dojo-type="dojox.dgauges.components.black.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.black.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.black.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.black.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
</div>
<div id="greyGauges" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Grey Theme</h1>
<br/>
<div data-dojo-type="dojox.dgauges.components.grey.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.grey.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.grey.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.grey.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
</div>
<div id="greenGauges" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="#home">Green Theme</h1>
<br/>
<div data-dojo-type="dojox.dgauges.components.green.CircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:200px"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.green.SemiCircularLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:150px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.green.HorizontalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:50px;"></div>
<br/>
<div data-dojo-type="dojox.dgauges.components.green.VerticalLinearGauge" interactionMode="touch" style="-webkit-user-select: none; outline: none; height:300px;"></div>
</div>
</body>
</html>