jquery mobile header/footer
Question
I am having some no of jquery pages each having header and footer. How do i make it as single header and footer. (ie) Want to load the header/footer html files in the main page header/footer section.
Please advice.
Please find the page structure below....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/customScript.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div id="hdr">
<!--Need to include header.html-->
</div>
<div data-role="content">
<!--Content-->
</div>
<div id="ftr">
<!--Need to include footer.html-->
</div>
</div>
</body>
</html>
Thanks in advance....
4 answers
solution1
3 2013-04-03 13:29:55
Here's a working example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '[data-role="page"]', function(){
$.mobile.activePage.find('[data-role="header"]').load("header.html", function(){
$(this).parent().trigger('pagecreate');
});
$.mobile.activePage.find('[data-role="footer"]').load("footer.html", function(){
$(this).parent().trigger('pagecreate');
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
header.html
<h3>
Header
</h3>
footer.html:
<h3>
Footer
</h3>
The trick here is to trigger pagecreate (not create ) to style header and footer after content has been added through load function.
Read this article/answer to find a difference between
trigger('create')
and
trigger('pagecreate').
Basically, pagecreate will restyle whole page while create will style only content.
solution2
1 2013-04-03 13:08:21
You can use jQuery load() :
$(document).ready(function() {
$("#hdr").load("header.html");
$("#ftr").load("footer.html");
});
solution3
1 2013-04-03 13:32:04
Add header
Checks if there is no header and then .append() the header .before() div data-role=content .
$(document).on('pagebeforeshow', function () {
if ($(this).find('[data-role=header]').length == 0) {
$('[data-role=content]').before('<div data-role="header"><h1>Page header</h1></div>');
$('[data-role=page]').trigger('pagecreate');
}
});
Add footer
Checks if there is no footer and then .append() the footer .after() div data-role=content .
$(document).on('pagebeforeshow', function () {
if ($(this).find('[data-role=footer]').length == 0) {
$('[data-role=content]').after('<div data-role="footer"><h1>Page footer</h1></div>');
$('[data-role=page]').trigger('pagecreate');
}
});
solution4
0 2014-12-05 09:55:13
var currentPage=$.mobile.activePage;
$('<div data-role="header" id="myheader">
<a href="" >Home</a>
<a href="" >Back</a>
</div>').prependTo(currentPage).trigger('create');
$('<div data-role="footer" id="myfooter">
<a href="">About Us</a>
</div>').appendTo(currentPage).trigger('create');
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.