Richard Pense
Top achievements
Rank 1
Rank 1
Richard Pense
asked on 31 Jul 2013, 05:36 PM
According to Apple iOS usability guidelines:
"iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list"
So, I try to implement with the following about.html. Tap event is not showing up in console. Any ideas?
Thanks,
Rick
<html>
<head>
<title>About</title>
</head>
<body>
<section data-role="layout" data-id="about-layout">
<header data-role="header">
<div data-role="navbar" data-tap="myTouch.tap">
<span date-role="view-title">About</span>
</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="search.html" data-icon="search">Search</a>
<a href="about.html" data-icon="about">About</a>
<a href="more.html" data-icon="more">More</a>
</div>
</footer>
</section>
<div id="about" data-role="view" data-layout="about-layout" data-zoom="true" data-reload="true">
... long content removed
</div>
<script>
function NavTouch() {
console.log("tap");
var view = $("#about").data("kendoMobileView");
view.scroller.reset();
}
window.myTouch = {
tap: function(e) { NavTouch(); },
}
</script>
</body>
</html>
"iOS apps allow people to tap the status bar to quickly scroll back to the top of a long list"
So, I try to implement with the following about.html. Tap event is not showing up in console. Any ideas?
Thanks,
Rick
<html>
<head>
<title>About</title>
</head>
<body>
<section data-role="layout" data-id="about-layout">
<header data-role="header">
<div data-role="navbar" data-tap="myTouch.tap">
<span date-role="view-title">About</span>
</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home" data-icon="home">Home</a>
<a href="search.html" data-icon="search">Search</a>
<a href="about.html" data-icon="about">About</a>
<a href="more.html" data-icon="more">More</a>
</div>
</footer>
</section>
<div id="about" data-role="view" data-layout="about-layout" data-zoom="true" data-reload="true">
... long content removed
</div>
<script>
function NavTouch() {
console.log("tap");
var view = $("#about").data("kendoMobileView");
view.scroller.reset();
}
window.myTouch = {
tap: function(e) { NavTouch(); },
}
</script>
</body>
</html>
1 Answer, 1 is accepted
0
Hello Richard,
Petyo
Telerik
The status bar tap is handled by the browser itself - it is unlikely that this tap will reach the DOM. In case you are using phonegap, you may look into a custom plugin which should support that.
Regards,Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!