You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
6.1 KiB
96 lines
6.1 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> |
|
<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> |
|
|
|
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojox/mobile/parser", |
|
"dojox/mobile", |
|
"dojox/mobile/compat" |
|
]); |
|
</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)); |
|
} |
|
.mblSwitch { |
|
margin-right: 10px; |
|
} |
|
.bold { |
|
font-weight: bold; |
|
} |
|
</style> |
|
</head> |
|
<body style="visibility:hidden;"> |
|
<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 data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed"' style="width: 130px;"></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled"' style="width: 130px;"></div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|
<span class="bold">Square Shape</span><br> |
|
<div class="mblSwSquareShape" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop", shape:"mblSwSquareShape"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed", shape:"mblSwSquareShape"' style="width: 130px"></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled", shape:"mblSwSquareShape"' style="width: 130px"></div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|
<span class="bold">Round Shape 1</span><br> |
|
<div class="mblSwRoundShape1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop", shape:"mblSwRoundShape1"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed", shape:"mblSwRoundShape1"' style="width: 130px"></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled", shape:"mblSwRoundShape1"' style="width: 130px"></div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|
<span class="bold">Round Shape 2</span><br> |
|
<div class="mblSwRoundShape2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop", shape:"mblSwRoundShape2"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed", shape:"mblSwRoundShape2"' style="width: 130px"></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled", shape:"mblSwRoundShape2"' style="width: 130px"></div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|
<span class="bold">Arc Shape 1</span><br> |
|
<div class="mblSwArcShape1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop", shape:"mblSwArcShape1"'></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed", shape:"mblSwArcShape1"' style="width: 130px"></div> |
|
<div class="color1" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled", shape:"mblSwArcShape1"' style="width: 130px"></div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'> |
|
<span class="bold">Arc Shape 2</span><br> |
|
<div class="mblSwArcShape2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Start", rightLabel:"Stop", shape:"mblSwArcShape2"'></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"on", leftLabel:"Opened", rightLabel:"Closed", shape:"mblSwArcShape2"' style="width: 130px"></div> |
|
<div class="color2" data-dojo-type="dojox/mobile/Switch" data-dojo-props='value:"off", leftLabel:"Enabled", rightLabel:"Disabled", shape:"mblSwArcShape2"' style="width: 130px"></div> |
|
</div> |
|
</div> |
|
</body> |
|
</html>
|
|
|