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.
83 lines (73 loc) • 3.72 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 RTL</title>
<link href="../../../themes/iphone/iphone.css" rel="stylesheet"/>
<link href="../../../themes/iphone/iphone_rtl.css" rel="stylesheet"/>
<script type="text/javascript" src="../../../../../dojo/dojo.js" djConfig="parseOnLoad: true, has:{'dojo-bidi': 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: right;
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");
</script>
<script type="text/javascript" src="Switch_rtl.js"></script>
</head>
<body style="padding:15px;visibility:visible">
<div dojoType="dojox.mobile.View" selected="true" dir="rtl">
<div dojoType="dojox.mobile.RoundRect" shadow="true">
<span class="bold">Default Shape</span><br>
<div class="float" dojoType="dojox.mobile.Switch" value="off"></div>
<div dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
</div>
<div dojoType="dojox.mobile.RoundRect" shadow="true">
<span class="bold">Round Shape 1</span><br>
<div class="mblSwRoundShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
<div class="mblSwRoundShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
</div>
<div dojoType="dojox.mobile.RoundRect" shadow="true">
<span class="bold">Round Shape 2</span><br>
<div class="mblSwRoundShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
<div class="mblSwRoundShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
</div>
<div dojoType="dojox.mobile.RoundRect" shadow="true">
<span class="bold">Arc Shape 1</span><br>
<div class="mblSwArcShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
<div class="mblSwArcShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
</div>
<div dojoType="dojox.mobile.RoundRect" shadow="true">
<span class="bold">Arc Shape 2</span><br>
<div class="mblSwArcShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
<div class="mblSwArcShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
</div>
</div>
</body>
</html>