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.
142 lines
5.5 KiB
142 lines
5.5 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 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>
|
|
|