Question

我是第1天的UI用户（仅限今天开始的网页设计），想要为我的应用设计页眉/页脚（用于我的应用程序中的页面）。

我读到使用Javascript / JQuery我们可以做到这一点，但在谷歌搜索我没有找到这样做的简单例子，任何示例/参考将是非常有帮助的。

Answer 1

简短的回答是这样的：jQuery用于DOM操作。页眉和页脚是DOM元素。这就是为什么你可以使用jQuery来创建它们。

更长一点：

<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>

但这是一个非常人为的例子。我认为在尝试动态添加内容之前，您需要更多地关注编写一些好的网页。特别是如果这是你的第一天。 我的特别建议 是使用像Visual Studio设计器环境或类似的东西，在那里你可以看到HTML 和的视觉效果时间和尝试添加元素，并阅读很多关于良好的HTML设计的东西。

Answer 2

下面的代码示例显示了使用Javascript制作页眉和页脚的脚本。

function createHeaderAndFooter() {
    var header="<!--header html-->";
    var footer="<!--footer html-->";
    document.body.innerHTML=header+document.body.innerHTML+footer;
}
window.addEventListener("load", createHeaderAndFooter);

如果您想在所有网页上使用相同的页眉和页脚，可以将脚本标记放在所有页面上。

<script type="text/javascript src="/assets/headerFooter.js"></script>

Answer 3

实际上你的页脚不需要JavaScript。我遇到了相关的问题，因为我正在使用100％的HTML网站而且不能包含PHP页脚。

有一个解决方案，在html文档中包含html文件的页脚：

<object type="text/html" width=100% height="250" data="footer.html">

如何创建页眉/页脚

3 个答案: