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.
67 lines (60 loc) • 2.6 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>Switch</title>
<link href="../../../themes/iphone/iphone.css" rel="stylesheet"/>
<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<style>
.color1 .mblSwitchBgLeft {
background: -webkit-gradient(linear, left top, left bottom, from(#28B159), to(#75FBAC), color-stop(0.5, #3FEB84), color-stop(0.5, #4CEE8E));
}
.color1 .mblSwitchBgRight {
background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
}
.color2 .mblSwitchBgLeft {
background: -webkit-gradient(linear, left top, left bottom, from(#FF9D00), to(#FFCE80), color-stop(0.5, #FFBB4D), color-stop(0.5, #FFC871));
}
.color2 .mblSwitchBgRight {
background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
}
.color1 .mblSwitchKnob,
.color2 .mblSwitchKnob {
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#FAFAFA), color-stop(0.5, #BBBBBB), color-stop(0.5, #CACACA));
}
.float {
float: left;
margin-right: 10px;
}
.bold {
font-weight: bold;
}
</style>
<script language="JavaScript" type="text/javascript">
//dojo.require("dojo.parser"); // Use the lightweight parser.
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
dojo.require("doh.runner");
dojo.addOnLoad(function(){
var roundRect = dijit.byId("dojox_mobile_RoundRect_0");
var demoWidget = new dojox.mobile.Switch({value:"off"});
dojo.addClass(demoWidget.domNode, "float");
// roundRect.addChild(demoWidget);
demoWidget.placeAt(roundRect.containerNode);
demoWidget = new dojox.mobile.Switch({value:"on", leftLabel:"Start", rightLabel:"Stop"});
demoWidget.placeAt(roundRect.containerNode);
// roundRect.addChild(demoWidget);
});
</script>
<script type="text/javascript" src="Switch.js"></script>
</head>
<body style="visibility:visible">
<div data-dojo-type="dojox.mobile.View">
<div data-dojo-type="dojox.mobile.RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Default Shape</span><br>
</div>
</div>
</body>
</html>