如何创建页眉/页脚
[英]How to create Header/Footer
问题描述
I'm a day 1 UI guy(started web design today only), want to design a header/footer(for pages in my application) for my app.
我是第 1 天的 UI 人员（今天才开始 web 设计），想为我的应用程序设计页眉/页脚（用于我的应用程序中的页面）。
I read that using Javascript/JQuery we can do that, but on googling I didn't find a simple example of doing that, any example/reference will be of great help.我读到过使用 Javascript/JQuery 我们可以做到这一点，但是在谷歌搜索中我没有找到这样做的简单示例，任何示例/参考都会有很大帮助。
4 个解决方案
解决方案1
1 2011-05-14 23:06:02
The short answer goes like this: jQuery is for DOM manipulation.简短的回答是这样的：jQuery 用于 DOM 操作。 Headers and footers are DOM elements.页眉和页脚是 DOM 元素。 That's why you can use jQuery to create them.这就是为什么您可以使用 jQuery 来创建它们的原因。
Something a little longer:再长一点：
<body>
<div id='header'>
</div>
<div id='content'>
This is where you would put all your regular content on your page,
maybe if it's dynamically generated content. You just have to supply
those other two divs all the time (not really - more later)
</div>
<div id='footer'>
</div>
</body>
<script>
//assuming you have a reference to jQuery in the header
// first let's build an object.
var myHeader = $('div').class('headerClassDiv').append('<div class="nestedHeaderClass" />');
$('#header').append(myHeader);
// do the same for the footer:
var myFooter = $('div').class('footerClassDiv').append('<div class="nestedFooterClass" />');
$('#footer').append(myFooter);
</script>
But this is a really contrived example.但这是一个非常人为的例子。 I think that you need to focus more on writing a few good webpages before you try and add content dynamically.我认为在尝试动态添加内容之前，您需要更多地专注于编写一些好的网页。 Especially if this is your very first day.特别是如果这是您的第一天。 my particular advice is to use something like the Visual Studio designer environment or something similar where you can see both the HTML and the visual effect at one time and try adding elements and that you read a LOT of stuff on good HTML design.我的特别建议是使用类似 Visual Studio 设计器环境或类似的东西，在那里你可以同时看到 HTML和视觉效果，并尝试添加元素，并且你阅读了很多关于好的 HTML 设计的东西。
解决方案2
0 2014-12-13 03:44:22
The code sample below shows the script to make a header and footer with Javascript.下面的代码示例显示了使用 Javascript 创建页眉和页脚的脚本。
function createHeaderAndFooter() {
var header="<!--header html-->";
var footer="<!--footer html-->";
document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);
If you want the same header and footer across all pages, you could put the script tag below on all your pages.如果您想在所有页面上使用相同的页眉和页脚，您可以将下面的脚本标记放在所有页面上。
<script type="text/javascript src="headerFooter.js"></script>
解决方案3
0 2015-02-15 13:36:35
Actually you do not need JavaScript for footer.实际上，页脚不需要 JavaScript。 I had the related problem, becasue I'm working on 100% HTML site and can't include PHP footer.我遇到了相关问题，因为我正在 100% HTML 站点上工作并且不能包含 PHP 页脚。
There have the solution to make footer including html document in html document:有在html文档中制作包含html文档的页脚的解决方案：
<object type="text/html" width=100% height="250" data="footer.html">
解决方案4
0 2023-02-01 03:05:43
Try to use the "js-header"-package.尝试使用“js-header”包。 You can create your header with a class, its super easy.您可以使用 class 创建您的 header，这非常简单。 By the way its using JQuery too.顺便说一句，它也使用 JQuery。
Look here: JS-Header package看这里： JS-Header package
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.