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.