Skip to content

Instantly share code, notes, and snippets.

@TranNgocMinh

TranNgocMinh/HeaderandFooterDemo.html

Created May 3, 2019 02:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save TranNgocMinh/a86012df9e0b7a0b5a9dc97dc2cc0508 to your computer and use it in GitHub Desktop.
Save TranNgocMinh/a86012df9e0b7a0b5a9dc97dc2cc0508 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HeaderandFooterDemo.html
<html>
<head>
<title>Header and Footer Demo</title>
<meta name="viewport" content="width=device-width, initialscale=1">
<link rel="stylesheet" href="jquery.mobile-1.4.5.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).bind("pageinit", function(){
// Patch to prevent overwriting <title></title>
$(":jqmData(role='page')").attr("data-title", document.title);
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<a href="index.html" data-icon="home">Home</a>
<h1>My Header</h1>
<a href="contact.html" data-icon="info">Contact</a>
</div>
<div data-role="content">
<p>
<a href="#subpage">Go to the sub page...</a>
</p>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed">
<a href="credits.html">Credits</a>
<a href="contact.html">Contact</a>
</div>
</div>
<div data-role="page" id="subpage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text = "Return"><h1>Sub Page</h1></div>
<div data-role="content">
<p>
<a href="" data-rel="back">Go back...</a>
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment