In this post we will learn how to work with KendoUI Mobile ActionSheet in four steps. You can learn more about this here
Switch is in action as following
Let us follow below steps to work with switch.
Step 1
Add all the required references to work with Kendo UI on your page .Make sure you are adding references in Head section of the page
<head> <title> Working with Switch </title> <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- Kendo UI Scripts --> <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script> <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script> </head>
Step 2
Next we need to create a main view on the page and initialize the page to be used as page of mobile application. For this just above closing body tag add following script
<script>
var app = new kendo.mobile.Application($(document.body), {
initial: "mainview"
});
</script>
</body>
You will notice that we have set initial view property. So let us go ahead and create a view with the id mainview
<div data-role="view" id="mainview" > </div>
By this step we have added all the required references and created the main view to put Switch inside that.
Step 3
Now we can put a Mobile Switch as following
<div data-role="view" id="mainview" > <input type="checkbox" data-role="switch" /> </div>
Only you need to provide value of data-role attribute as switch of checkbox element. Suppose we want to check this on click event of a button. For that let us put a button in the maindiv . On click of button we will check whether switch is on or off.
After adding button div will be as following
<div data-role="view" id="mainview" > <input type="checkbox" data-role="switch" id="onoffswitch" /> <a data-role="button" data-click="checkSwitchState">Check Switch State</a> </div>
And on click of button function checkSwitchState is being called. See the data-role property of button. Now let us write checkSwitchState function.
<script>
function checkSwitchState() {
var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
var checked = switch1.check();
alert(checked);
}
</script>
You can Toggle the button as following,
<script>
function checkSwitchState() {
var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
switch1.toggle();
}
</script>
Now let us stop for a moment and run the page to see how it works
On click event of the button, switch will be toggled and we will get alert on the state of the switch.
And on clicking Ok switch will be toggled.
Below you can find full source code of above discussions.
<!DOCTYPE html>
<html>
<head>
<title>
Sharing on Social Media
</title>
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Kendo UI Scripts -->
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>
</head>
<script>
function checkSwitchState() {
var switch1 = $("#onoffswitch").data("kendoMobileSwitch");
var checked = switch1.check();
alert(checked);
switch1.toggle();
}
</script>
<body>
<div data-role="view" id="mainview" >
<input type="checkbox" data-role="switch" id="onoffswitch" />
<a data-role="button" data-click="checkSwitchState">Check Switch State</a>
</div>
<script>
var app = new kendo.mobile.Application($(document.body), {
initial: "mainview"
});
</script>
</body>
</html>
Step 4
Sometime you may want to fire an event when user is changing state of the switch. You can do that as following
$("#onoffswitch").data("kendoMobileSwitch").bind("change", function (e) {
console.log(e.checked); // true or false
alert(e.checked);
});
In this way we can work with Switch in KendoUI Mobile in four steps. I hope you find this post useful. Any comment is welcome.
Helping Ninja Technologists 