How can I call a header and footer for all of my jQuery Mobile pages?
Question
At the minute I am hard coding the header and footer for all of my jQuery Mobile pages. In order to clean the code up, I would like to be able to declare what the header and footer is, before calling it for every page I have. I have seen similar questions on here but some of them are outdated and don't seem to work. Can anyone give me a definitive method that could help me? Thanks!
<!-- Page 1 -->
<div data-role="page" id="page1">
<!-- Body -->
<div id="schoolpositions">
CONTENT IS LOADED IN FIRST SO THAT THE FIXED HEADER AND FOOTER LOAD OVER IT
</div>
<!-- Header -->
<div data-role="header" class="header" data-position="fixed">
<a href="#page4" class="ui-btn-left" data-icon="user">Profile</a>EduSub Teacher
</div>
<!-- Footer -->
<div data-role="footer" id="footer" data-id="footer" data-position="fixed"">
<div data-role="navbar" class="footernavbar">
<ul>
<li><a class="ui-nodisc-icon" id="activeicon" href="#page1" data-icon="schooliconactive">Search</a></li>
<li><a class="ui-nodisc-icon" href="#page2" data-icon="plannericon">Planner</a></li>
<li><a class="ui-nodisc-icon" href="#page3" data-icon="briefcaseicon">Jobs</a></li>
</ul>
</div>
</div>
Instead of having that chunk of code for the header and footer is there a way I could load it in from one source? Additionally, for the purposes of this project, I would rather use something other than PHP.
2 answers
solution1
0 2018-09-12 20:07:05
You could utilize Server-Side Includes to call individual header and footer files into your HTML document. Here's a resource that could help you.
https://www.w3.org/Jigsaw/Doc/User/SSI.html
This solution is an alternate method that would give you a similar result without using PHP.
solution2
0 2018-09-12 20:08:52
After a quick google search, I found this:
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
Include an import on your page by declaring a :
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
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.