Lezione #id-jqmobile-2013-0015#

JQuery Mobile ci permette di fissare header e footer della nostra pagina con l’attributo data-position=”fixed”.

Vediamo il codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header" data-position="fixed">
		<h1>Page Header FIXED</h1>
	</div><!-- /header -->

	<div data-role="content">
<p>
Lorem ipsum dolor sit amet....
</p>		
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Page Footer FIXED</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Il mio sito ufficiale >