JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<!-- Layout for all views in the application, as specified when the app is created -->
<div data-role="layout" data-id="layout">
<div data-role="header" >
<div data-role="navbar">
<span data-role="view-title">My Open Cal</span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#index" data-icon="organize">My Calendar</a>
<a href="#search" data-icon="search">Search</a>
<a href="settings.htm" data-icon="settings">Settings</a>
</div>
</div>
</div>
<div data-role="view" id="index" data-title = "My Calendar" data-init="setupListView">
<div style="text-align:center">
<ul id="ulMyCal" data-style="inset">
</ul>
</div>
</div>
<div data-role="view" id = "search" data-title = "Search">
</div>
JavaScript
var twitterDataSource;
$( //jQuery page load
function ()
{
var app = new kendo.mobile.Application($(document.body), { layout: "layout", icon: "/images/xboxavatar.png" });
})
function setupListView()
{
twitterDataSource = new kendo.data.DataSource(
{
transport:
{
read:
{
url: "http://search.twitter.com/search.json",
contentType: "application/json; charset=utf-8",
type: "GET",
dataType: "jsonp",
data:
{
q: "#tampa"
}
}
},
schema:
{
data: "results"
}
})
$("#ulMyCal").kendoMobileListView({
pullToRefresh: true,
appendOnRefresh: true,
dataSource: twitterDataSource,
template: "<p>${text}</p>"
});
}