JSFiddle - React, Tailwind, and code Playground
HTML
<body class="mobile">
<div dojoType="dojox.mobile.View">
<div id="PushSettings" dojoType="dojox.mobile.ScrollableView" style="background-color: #d0d0d0;"selected="true">
<h1 label="Push Settings" dojoType="dojox.mobile.Heading" id="headerPushSettings" back="Zurück" moveTo="divAlarms" fixed="top"></h1>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">
<label class="mblListItemLabel">Benachrichtigung</label>
<div id="universalPushSwitch" data-dojo-type="dojox.mobile.Switch" style="float:right" class="mblSwRoundShape1"></div>
</li>
</ul>
</div>
</div>
</body>
CSS
html.mobile, .mobile body {
width: 100%;
margin: 0;
padding: 0;
}
.mobile body {
overflow-x: hidden;
-webkit-text-size-adjust: none;
background-color: #c5ccd3;
font-family: Helvetica;
font-size: 17px;
}
.mblColorBlue {
color: white;
background-color: #366edf;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc));
}
.mblColorBlue45 {
background-image: -webkit-gradient(linear, left top, right bottom, from(#7a9de9), to(#2362dd), color-stop(0.5, #366edf), color-stop(0.5, #215fdc));
}
.mblColorDefault {
color: white;
background-color: #5877a2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#222222), color-stop(0.02, #8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999));
}
.mblColorDefault45 {
background-image: -webkit-gradient(linear, left top, right bottom, from(#222222), color-stop(0.02, #8ea4c1), to(#4a6c9b), color-stop(0.5, #5877a2), color-stop(0.5, #476999));
}
.mblColorDefaultSel {
color: white;
background-color: #394d77;
background-image: -webkit-gradient(linear, left top, left bottom, from(#7c87a4), to(#263e6c), color-stop(0.5, #394d77), color-stop(0.5, #243b69));
}
.mblColorDefaultSel45 {
background-image: -webkit-gradient(linear, left top, right bottom, from(#7c87a4), to(#263e6c), color-stop(0.5, #394d77), color-stop(0.5, #243b69));
}
.mblSpriteIcon {
position: absolute;
}
.mblSpriteIconParent {
position: relative;
font-size: 1px;
}
.mblImageIcon {
vertical-align: top;
}
.mblHeading {
position: relative;
margin: 0;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
z-index: 1;
padding: 0;
height: 42px;
font-family: Helvetica;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 44px;
background-image: -webkit-gradient(linear,...
JavaScript
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.compat");
dojo.require("dojox.mobile.deviceTheme");
dojo.require("dojox.mobile.Switch");
dojo.require("dojo.on");
dojo.require("dijit.registry");
dojo.require("dojo.ready");
dojo.require("dojox.mobile.ListItem");
dojo.require("dojo.aspect");
dojo.ready(function () {
dojox.mobile.parser.parse();
dojo.aspect.after(dijit.byId("universalPushSwitch"), "onStateChanged",
function () {
//console.log(newState);
alert(dijit.byId("universalPushSwitch").value);
});
});