Add References
Test Application
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Kendo UI Scripts --><script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script>
Create View
</pre> <div id="loginview" data-role="view"> <h1>This is Login View</h1> </div> <pre> </pre> <div id="detailview" data-role="view"> <h1>This is Detail View</h1> </div> <pre> </pre> <div id="settingview" data-role="view"> <h1>This is Setting View</h1> </div> <pre>
Initialize KendoUI
<script type="text/javascript">// <![CDATA[
var app = new kendo.mobile.Application($(document.body),
{
initial: "loginview",
layout: "defualtlayout"
}
);
// ]]></script>
Create Layout
</pre> <div data-role="layout" data-id="defualtlayout"> <div data-role="header"> <div data-role="navbar"><a data-role="backbutton" data-align="left"> Back </a> Test Application</div> </div> <div data-role="footer"> <div data-role="tabstrip"><a href="#loginview" data-icon="home">login</a> <a href="#detailview" data-icon="details">detail</a> <a href="#settingview" data-icon="settings">setting</a></div> </div> </div> <pre>
Finally Full source code of Video is as following
Test Application
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Kendo UI Scripts --><script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js"></script></pre>
<div data-role="layout" data-id="defualtlayout">
<div data-role="header">
<div data-role="navbar"><a data-role="backbutton" data-align="left"> Back </a> Test Application</div>
</div>
<div data-role="footer">
<div data-role="tabstrip"><a href="#loginview" data-icon="home">login</a> <a href="#detailview" data-icon="details">detail</a> <a href="#settingview" data-icon="settings">setting</a></div>
</div>
</div>
<pre>
</pre>
<div id="loginview" data-role="view">
<h1>This is Login View</h1>
</div>
<pre>
</pre>
<div id="detailview" data-role="view">
<h1>This is Detail View</h1>
</div>
<pre>
</pre>
<div id="settingview" data-role="view">
<h1>This is Setting View</h1>
</div>
<pre>
<script>
var app = new kendo.mobile.Application($(document.body),
{
initial: "loginview",
layout: "defualtlayout"
}
);
</script>
Follow @debug_mode
Thank you for take your time and did this video. It is very good.