I have tried this a couple of ways but the styling of the switch is not right. First with the "Blank" template and manually adding my own kendo files, and then with the Kendo Mobile template. The result is the same with both templates and also with the flat skin.
http://jsfiddle.net/jeangentile/nnXQm/
Kendo UI Mobile 2013.2.918
Jquery 1.9.1
Cordova 3.0
In all cases, the "on" position of the switch seems to be too far to the right, leaving some of the "off" background visible.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="kendo/kendo.icenium.min.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<ul>
<li>Password never expires <input id="wink-switch" /></li>
</ul>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="kendo/jquery.min.js"></script>
<script src="kendo/kendo.mobile.min.js"></script>
<script type="text/javascript">
var mobileApp = new kendo.mobile.Application(document.body, {
skin: "flat"
});
$("#wink-switch").kendoMobileSwitch();
</script>
</body>
</html>
http://jsfiddle.net/jeangentile/nnXQm/
Kendo UI Mobile 2013.2.918
Jquery 1.9.1
Cordova 3.0
In all cases, the "on" position of the switch seems to be too far to the right, leaving some of the "off" background visible.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="kendo/kendo.icenium.min.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<ul>
<li>Password never expires <input id="wink-switch" /></li>
</ul>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="kendo/jquery.min.js"></script>
<script src="kendo/kendo.mobile.min.js"></script>
<script type="text/javascript">
var mobileApp = new kendo.mobile.Application(document.body, {
skin: "flat"
});
$("#wink-switch").kendoMobileSwitch();
</script>
</body>
</html>