目前,我正在为所有jQuery Mobile页面的页眉和页脚进行硬编码。为了清理代码,我希望能够在对我拥有的每个页面进行调用之前声明页眉和页脚。我在这里看到过类似的问题,但其中一些已过时,似乎没有用。谁能给我一种可以帮助我的明确方法?谢谢!
<!-- 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>
我有一种方法可以从一个来源加载它,而不是拥有用于页眉和页脚的那部分代码?另外,出于本项目的目的,我宁愿使用PHP以外的其他东西。
答案 0 :(得分:0)
您可以利用服务器端包含将单独的页眉和页脚文件调用到HTML文档中。这是可以帮助您的资源。
https://www.w3.org/Jigsaw/Doc/User/SSI.html
此解决方案是一种替代方法,无需使用PHP即可获得相似的结果。
答案 1 :(得分:0)
在Google快速搜索后,我发现了这一点
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
通过声明:来在页面上包括导入>
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>