- Automatic platform specific styling of form elements
- Supported inputs: text, password, search, url, email, number, tel, file, date, time, month
- Transitions: slide, zoom, fade, overlay (direction, reversible) at application or element level
Application
var app = new kendo.mobile.Application($(document.body), {
hideAddessBar:true,
initial: "startView",
layout: "myLayout",
loading: "I think I can. Can be disabled",
platform: "blackberry",
transition: "slide"
});
Mobile Layout
<div data-role="layout" data-id="myLayout">
<div data-role="header">HEADER</div>
</div>
<div data-role="view" data-title="Home" data-layout="myLayout">
<!-- View Content -->
</div>
<a href="#page2" data-role="button">Next Page</a>
<a href="https://ken.be" data-rel="external">Visit ken.be</a>
<div data-role="view" id="search" data-transition="slide"></div>
<a href="#search" data-role="button" data-transition="fade">Search</a>
app.showLoading();
longRunningProcess();
app.hideLoading();
<div id="mainView" data-role="view" data-title"main view">
Welcome
<input type="number" />
<a href="#otherview" data-role="button">go there</a>
</div>
<div id="otherview" date-role="view" data-title="other view"></div>
<div data-role="layout" data-id="mainLayout">
<div data-role="navbar">
<span date-role="view-title"></span>
</div>
</div>
<div data-role="view">
<a href="remoteView.html">only content of first view is rendered</a>
</div>
<!--remote view -->
<div data-role="view" data-init="initRemoteView"><a id="link">linky</a></div>
<!--consuming view script -->
<script>
function initRemoteView(e) { e.view.element.find("#link").kendoMobileButton(); }
</script>
<div data-role="splitview">
<div data-role="pane" data-layout="leftPaneLayout">define view and layout divs</div>
<div data-role="pane" data-layout="mainPaneLayout">define view and layout divs</div>
</div>
data-source, data-template, data-show
data-role : footer, tabstrip, navbar