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.
143 lines (134 loc) • 5.59 kB
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 setter/getter</title>
<script type="text/javascript" src="../deviceTheme.js"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/connect",
"dojo/dom",
"dojo/ready",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat"
], function(connect, dom, ready, registry) {
swOn = function() {
var w = registry.byId("sw");
w.set("value", "on");
};
swOff = function() {
var w = registry.byId("sw");
w.set("value", "off");
};
swEnable = function() {
var w = registry.byId("sw2");
w.set("value", "on");
};
swDisable = function() {
var w = registry.byId("sw2");
w.set("value", "off");
};
setDisplay = function(id) {
var element = dom.byId(id);
var span = dom.byId("displayMsg");
var swId;
// change state
swId = registry.byId(id + "1");
swId.set("value", (swId.get("value") == "on") ? "off" : "on");
swId = registry.byId(id + "2");
swId.set("value", (swId.get("value") == "on")?"off":"on");
// display
if (element) {
element.style.display = "inline";
span.innerHTML = "setting element " + id + " display = " + element.style.display;
} else {
span.innerHTML = "element " + id + " not found.";
}
swId.resize();
setTimeout(function() {
span.innerHTML = "";
}, 2000);
};
function showMsg(spanId, msg){
var span = dom.byId(spanId);
span.innerHTML = msg;
setTimeout(function() {
span.innerHTML = "";
}, 2000);
}
setSize = function (inputId, switchId, unit){
var sw = document.getElementById(switchId),
ip = document.getElementById(inputId);
sw.style.width = ip.value + unit;
registry.byId(switchId).resize();
};
ready(function() {
var w = registry.byId("sw");
w.on("stateChanged", function(value) {
showMsg("msgArea", "onStateChanged: " + value);
});
w.watch("value", function(name, oldV, newV){
showMsg("watchMsgArea", "watch : property " + name + " changed from " + oldV +" to " + newV);
});
var w2 = registry.byId("sw2");
w2.on("stateChanged", function(value) {
showMsg("msgArea2", "onStateChanged: " + value);
});
w2.watch("value", function(name, oldV, newV){
showMsg("watchMsgArea2", "watch : property " + name + " changed from " + oldV +" to " + newV);
});
});
});
</script>
</head>
<body style="visibility: hidden;">
<div data-dojo-type="dojox/mobile/View" data-dojo-props='selected:true'>
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Switch</span><br />
<input type="checkbox" id="sw" name="swName" data-dojo-type="dojox/mobile/Switch" value="off"><br>
<input type="button" onclick="swOn()" value="on">
<input type="button" onclick="swOff()" value="off"><br />
<span id="msgArea"></span><br>
<span id="watchMsgArea"></span>
</div>
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Custom width (120px)</span><br>
<input type="checkbox" id="sw2" name="swName" data-dojo-type="dojox/mobile/Switch" value="off" leftLabel="Enabled" rightLabel="Disabled" style="width: 120px;" ><br>
<input type="button" onclick="swEnable()" value="enable">
<input type="button" onclick="swDisable()" value="disable"><br />
<span id="msgArea2"></span><br>
<span id="watchMsgArea2"></span>
</div>
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Custom width</span><br>
<input type="checkbox" id="sw3" data-dojo-type="dojox/mobile/Switch" value="off" leftLabel="Enabled" rightLabel="Disabled" style="width: 120px;"><br>
size (absolute):<input type="text" id="swWidthAbs" value="300" maxlength="3" size="5">px
<input type="button" onclick="setSize('swWidthAbs','sw3','px')" value="set size"><br />
size (relative):<input type="text" id="swWidthRel" value="50" maxlength="3" size="5">%
<input type="button" onclick="setSize('swWidthRel','sw3','%')" value="set size">
</div>
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Initial state = off</span><br />
<input type="button" onclick="setDisplay('swOff')" value="change state and display"><br />
<div id="swOff" style="display: none">
<input type="checkbox" id="swOff1" name="swName" data-dojo-type="dojox/mobile/Switch" value="off"><br />
<input type="checkbox" id="swOff2" name="swName" data-dojo-type="dojox/mobile/Switch" value="off" leftLabel="Enabled" rightLabel="Disabled" style="width: 50%;" ><br>
</div>
</div>
<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
<span class="bold">Initial state = on</span><br />
<input type="button" onclick="setDisplay('swOn')" value="change state and display"><br />
<div id="swOn" style="display: none">
<input type="checkbox" id="swOn1" name="swName" data-dojo-type="dojox/mobile/Switch" value="on"><br />
<input type="checkbox" id="swOn2" name="swName" data-dojo-type="dojox/mobile/Switch" value="on" leftLabel="Enabled" rightLabel="Disabled" style="width: 50%;" ><br>
</div>
</div>
<span id="displayMsg"></span>
</div>
</body>
</html>