Kendo Mobile Playground

Kendo Mobile Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.124/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"></script>
<div data-role="view" id="navbar-home" data-title="Contacts">
    <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">Contacts</span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            <a data-align="right" data-icon="organize" data-role="button" href="#navbar-grouped">Group</a>
        </div>
    </header>
    <ul data-role="listview">
        <li><h2>Francisco Chang</h2></li>
        <li><h2>Daniel Tonini</h2></li>
        <li><h2>Annette Roulet</h2></li>       
        <li><h2>Carine Schmitt</h2></li>
        <li><h2>Ann Devon</h2></li>
        <li><h2>Catherine Dewey</h2></li>
        <li><h2>Diego Roel</h2></li>
        <li><h2>Elizabeth Brown</h2></li>
        <li><h2>Eduardo Saavedra</h2></li>
        <li><h2>Antonio Moreno</h2></li>
        <li><h2>Felipe Izquierdo</h2></li>
        <li><h2>Fran Wilson</h2></li>
    </ul>
</div>

<div data-role="view" id="navbar-grouped" data-title="Contacts">
    <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">Contacts</span>
            <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
            <a data-align="right" data-icon="stop" data-role="button" href="#navbar-home">Ungroup</a>
        </div>
    </header>
    <ul data-role="listview" data-type="group">
        <li>
            A
            <ul>
                <li><h2>Ann Devon</h2></li>
                <li><h2>Annette Roulet</h2></li>
               ...

CSS

#navbar-home h2,
#navbar-grouped h2 {
    display: inline-block;
    font-size: 1.1rem;
    margin: .5rem .9rem;
}

JavaScript

kendo.mobile.Application.prototype._attachOrientationChange = function() {
    this.element.addClass("km-ios").parent().addClass("km-root");

    $(window).bind("orientationchange", function(e) {
        $(".km-scroll-container:visible")
            .css(kendo.support.transitions.css + "transform", "none");
    });
};

var app = new kendo.mobile.Application();