In this post we will learn how to work with KendoUI Mobile ActionSheet in four steps. You can learn more about this here
ActionSheet in action as below,
Let us start creating it by following below steps.
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> 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>
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 Action Sheet inside that.
Step 3
Now we will add a button. On touch of this event ActionSheet will be open. Let us add button inside the view as following
<div data-role="view" id="mainview" > <a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet ">Share on Social Media</a> </div>
If you notice in button attributes we are setting
Step 4
Now we need to add actionsheet on the page. ActionSheet can be created by setting data-role property of <ul> as actionsheet . To create actionsheet there must be at-least one <li> inside <ul>. shareOnsocialmedia actionsheet can be created as following
<ul data-role="actionsheet" id="shareonSocialMediaActionSheet"> <li><a data-action="functionToShareOnFacebook">Facebook</a></li> <li><a data-action="functionToShareOnTwitter">Twitter</a></li> <li><a data-action="functionToShareOnLinkedin">Linkedin</a></li> <li><a data-action="functionToShareOnFlickr">Flickr</a></li> </ul>
Some points about above code is as following
- There are links <a> inside <li>. data-action attribute of <a> is set to JavaScript function we want call on the tap of the item in actionsheet
- After execution of the function set in data-action control will returned to calling DOM element.
- By default a cancel item will get added to the ActionSheet.
Running Application
Let us go ahead and run the application to see ActionSheet in the action.
On touch of this button ActionSheet will open as following
You can see that Cancel item has been added by the framework itself. On tap of cancel control will return to calling DOM element.
Below you can find full source code of above discussion
<!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>
<script>
function functionToShareOnFacebook(e) {
console.log("share on FB");
}
function functionToShareOnTwitter(e) {
console.log("share on Twitter");
}
function functionToShareOnLinkedin(e) {
console.log("share on Linkedin");
}
function functionToShareOnFlickr(e) {
console.log("share on Flickr");
}
</script>
</head>
<body>
<div data-role="view" id="mainview" >
<a data-role="button" data-rel="actionsheet" href="#shareonSocialMediaActionSheet">Share on Social Media</a>
<ul data-role="actionsheet" id="shareonSocialMediaActionSheet" cancel="hello" >
<li><a data-action="functionToShareOnFacebook">Facebook</a></li>
<li><a data-action="functionToShareOnTwitter">Twitter</a></li>
<li><a data-action="functionToShareOnLinkedin">Linkedin</a></li>
<li><a data-action="functionToShareOnFlickr">Flickr</a></li>
</ul>
</div>
<script>
var app = new kendo.mobile.Application($(document.body), {
initial: "mainview"
});
</script>
</body>
</html>
In this way you can work with KendoUI Mobile ActionSheet in four steps. I hope you find this post useful. Thanks for reading.
Helping Ninja Technologists 