Getting Started with Kendo UI Mobile : Video

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>

Advertisements

One thought on “Getting Started with Kendo UI Mobile : Video

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s