Since header and footer take a lot of mobile app screen, here I am giving an example to hide footer when user starts scrolling down and display it back on scrolling up.
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>How to hide and show Kendo UI Mobile Tabstrip on scroll Up
and Down?</title>
</head>
<body>
<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip" data-init="attachToScroller">
<ul data-role="listview" data-style="inset" data-type="group">
<li>Profile
<ul>
<li><h2>Carine <span>Callahan</span></h2><img src="http://demos.kendoui.com/content/mobile/overview/carine.jpg" /></li>
<li>Weekly average sales <span class="sales-up">$ 8,250</span></li>
<li>Monthly average sales <span class="sales-up">$ 32,000</span></li>
</ul>
</li>
<li>
Languages
<ul>
<li>English <span class="value">Native</span></li>
<li>Hungarian <span class="value">Advanced</span></li>
<li>French <span class="value">Advanced</span></li>
<li>Chinese <span class="value">Beginner</span></li>
</ul>
</li>
<li>
Sales commodity
<ul>
<li>Beverages</li>
<li>Condiments</li>
<li>Confections</li>
</ul>
</li>
<li>
PC Skills
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Outlook</li>
<li>MS PowerPoint</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Sales Representatives
<ul>
<li data-icon="toprated">1. Andrew Fuller</li>
<li data-icon="toprated">2. Janet Leverling</li>
<li data-icon="toprated" style="background-color: Green; color: #fff;">3. Carine Callahan</li>
<li data-icon="toprated">4. Margaret Johnson</li>
</ul>
</li>
</ul>
</div>
<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Carine Callahan
<ul>
<li>Notify when online <input type="checkbox" data-role="switch" checked></li>
<li>Administrator <input type="checkbox" data-role="switch"></li>
<li>Access to stats <input type="checkbox" data-role="switch" checked></li>
</ul>
</li>
</ul>
</div>
<div data-role="layout" data-id="mobile-tabstrip">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
</div>
</header>
<p>TabStrip</p>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#tabstrip-profile" data-icon="contacts">Profile
</a><a href="#tabstrip-rating" data-icon="favorites">Rating
</a><a href="#tabstrip-settings" data-icon="settings">Settings</a>
</div>
</div>
</div>
<style scoped>
#tabstrip-profile h2 {
display: inline-block;
font-size: 1.1em;
margin: 1.5em 0 0 .7em;
}
#tabstrip-profile h2 span {
display: block;
clear: both;
font-size: 1.8em;
margin: .1em 0 0 0;
}
#tabstrip-profile img {
width: 5em;
height: 5em;
float: left;
margin: 1em;
border: 1px solid rgba(0,0,0,.2);
-webkit-border-radius: 4em;
border-radius: 4em;
}
.sales-down,
.sales-hold,
.sales-up,
.value {
float: right;
}
.sales-up { color: green; }
.sales-down { color: red; }
.sales-hold { color: blue; }
.value { color: #bbb; }
</style>
<script>
//
Function which manage the show and hide the footer.
function attachToScroller(e) {
var scroller = e.view.scroller;
var currentPosition = 0;
scroller.bind("scroll", function(e) {
if(e.scrollTop<0){
$('div[data-role="tabstrip"]').show();
} else if(currentPosition < e.scrollTop){
$('div[data-role="tabstrip"]').hide();
currentPosition = e.scrollTop;
} else{
$('div[data-role="tabstrip"]').show();
currentPosition = e.scrollTop;
}
});
}
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
No comments:
Post a Comment