or
<html><head> <title></title> <link href="css/kendo.common.css" rel="stylesheet" type="text/css" /> <link href="css/kendo.default.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" action="Default.aspx"> <div> <input id="timepicker" /> </div> </form> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/kendo.core.js" type="text/javascript"></script> <script src="js/kendo.fx.js" type="text/javascript"></script> <script src="js/kendo.popup.js" type="text/javascript"></script> <script src="js/kendo.timepicker.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#timepicker").kendoTimePicker(); }); </script></body></html><!DOCTYPE html><html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta charset="utf-8"> <!-- iPad/iPhone specific css below, add after your main css > <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" /> --> <!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here --> <script type="text/javascript" charset="utf-8" src="js/phonegap-1.4.1.js"></script> <script> if (typeof window._nativeReady === "undefined") window._nativeReady = true; </script> <script type="text/javascript" charset="utf-8" src="js/jquery.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/app.js"></script> <script src="js/kendo.mobile.min.js"></script> <link href="styles/kendo.common.min.css" rel="stylesheet" /> <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script type="text/javascript"> // If you want to prevent dragging, uncomment this section /* function preventBehavior(e) { e.preventDefault(); }; document.addEventListener("touchmove", preventBehavior, false); */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ /* function handleOpenURL(url) { // TODO: do something with the url passed in. } */ function onBodyLoad() { document.addEventListener("deviceready", onDeviceReady, false); } /* When this function is called, PhoneGap has been initialized and is ready to roll */ /* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch. see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html for more details -jm */ function onDeviceReady() { // do your thing! App.requireSession(); } </script> </head> <body onload="onBodyLoad()"> <div data-role="view" id="tabstrip-card" data-init="cardViewInit" data-title="My card" data-layout="mobile-tabstrip"> card </div> <div data-role="view" id="tabstrip-providers" data-title="Providers" data-layout="mobile-tabstrip"> providers! </div> <div data-role="view" id="tabstrip-savings" data-title="My savings" data-layout="mobile-tabstrip"> savings! </div> <div data-role="view" id="tabstrip-logout" data-title="Log out" data-layout="mobile-tabstrip"> log out! </div> <div data-role="layout" data-id="mobile-tabstrip"> <header data-role="header"> <div data-role="navbar"> <!--<a class="nav-button" data-align="left" data-role="backbutton">Back</a>--> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a> </div> </header> <footer data-role="footer"> <div data-role="tabstrip" id="footer-tabs"> <a href="#tabstrip-card" data-icon="contacts">My card</a> <a href="#tabstrip-providers" data-icon="history">Providers</a> <a href="#tabstrip-savings" data-icon="favorites">My savings</a> <a id="logout" href="#tabstrip-logout" data-icon="settings">Log out</a> </div> </footer> </div> <script> $(document).ready(function() { var tabStrip = $("#footer-tabs").data("kendoMobileTabstrip"); tabStrip.bind("select", function(e) { alert(1); }) }); </script> <script> window.kendoMobileApplication = new kendo.mobile.Application(document.body); </script> </body></html>