Header Position
Description
There are three styles available for positioning the header.
Default
Default: A default header will be shown at the top edge of the screen and will slide out of view when you scroll.
<div data-role="header">
<h1>Default Header</h1>
</div>
Fixed
Fixed: A fixed header will always remain positioned and visible at the top edge of the screen.
We can create a fixed header with the addition of the data-position="fixed" attribute.
<div data-role="header" data-position="fixed">
<h1>Fixed Header</h1>
</div>
Responsive
Responsive: When we create a fullscreen page the contents will appear edge-to-edge and the header and footer will responsively appear and disappear based on a touch response.
Example
To create a fullscreen page add data-fullscreen="true" to the page container and include the data-position="fixed" attribute on the header and footer elements.
<!-- w w w .j a va 2 s .c om-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fullscreen Example</title>
<meta name="viewport" content="width=device-width, maximum-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.detailimage {
width: 100%;
text-align: center;
margin-right: 0;
margin-left: 0;
}
.detailimage img {
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-fullscreen="true">
<div data-role="header" data-position="fixed">
<h6>4 of 10</h6>
</div>
<div data-role="content">
<div class="detailimage">
<img src="http://placehold.it/300x300" />
</div>
</div>
<!-- toolbar with icons -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="forward"></a></li>
<li><a href="#" data-icon="arrow-l"></a></li>
<li><a href="#" data-icon="arrow-r"></a></li>
<li><a href="#" data-icon="delete"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>