Kendo-mobile - show/hide tabstrip
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<ul id="listview" data-role="listview" data-source="dataSource" data-pull-to-refresh="true" data-append-on-refresh="true" data-template="pull-to-refresh-template"></ul>
</div>
<script id="pull-to-refresh-template" type="text/x-kendo-template">
<div class="tweet">
<img class="pullImage" src="#= profile_image_url #" alt="#= from_user #" />#= text #
</div>
</script>
CSS
.tweet {
font-size: .8em;
line-height: 1.4em;
}
.pullImage {
width: 64px;
height: 64px;
border-radius: 3px;
float: left;
margin-right: 10px;
}
.sublink {
font-size: .9em;
font-weight: normal;
display: inline-block;
padding: 3px 3px 0 0;
text-decoration: none;
opacity: .8;
}
JavaScript
var app = new kendo.mobile.Application(document.body);
var lastID;
var dataSource = new kendo.data.DataSource({
serverPaging: true,
transport: {
read: {
url: "http://adapptalo.com/wordpress/?json=get_recent_posts", // the remove service url
dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
},
parameterMap: function(options) {
var page = options.page;
var parameters = {
q: "javascript",
since_id: lastID //additional parameters sent to the remote service
}
return parameters;
}
},
change: function() {
var item = this.view()[0];
if (item) {
lastID = item.id;
}
},
schema: { // describe the result format
data: "posts" // the data which the data source will be bound to is in the "results" field
}
});