download mobile app notification in mobile website with jquery mobile
Question
We have a mobile website going to go live in some time. We need to put a on top of the header of the page which will say download [iphone/ipad/mobile] native app. But is it possible to push the jquery mobile page header down to show this notification. And this notification has disappear when we click close button on this strip.
Same thing i saw target site .Try it in tab/mobile.
1 answers
solution1
0 ACCPTED 2013-01-04 11:09:54
You can easily use second header and hide it when you are done:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header" id="custom_header">
<h3>
Nothing prevents you to create a custom header
</h3>
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
<a href="#second" class="ui-btn-right">Next</a>
</div>
<div data-role="content">
<a href="#" data-role="button" id="test-button">Test button</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
This solution also need a custom css:
#custom_header {
background: #000 !important;
}
This will hide it:
$('#index').live('pagebeforeshow',function(e,data){
$('#close-custom-header').live('click', function(e) {
$('#custom_header').toggle();
});
});
Example: http://jsfiddle.net/Gajotres/w6vBK/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.