jQuery Mobile：对所有页面使用相同的页眉页脚 [英] jQuery Mobile: Use same header footer for all pages

问题描述

我想实现一些代码，将在我的所有网页上创建页眉和页脚，而不是硬编码。我尝试这样：

I'm trying to implement some code that will create the headers and footers on all of my web pages instead of hard coding them. I tried this:

我在我的主页中有这个，我只是在一个div中封装了我想要的头。

I had this in my "main page" I just called wrapped the header I wanted in a div.

<div id="headerProto">
   <div data-role="header" data-position="fixed" data-theme="b">
       <h1> Title </h1>          
   </div> 
</div>

然后在其他页面中：

<div class="headerChild">
</div>

我添加了：

$(".headerChild").html($("#headerProto").html());

没有骰子。任何一种方式，这是一个总猜测我应该怎么做。是否有更好的方法？

No dice. Either way that was a total guess on how I'm supposed to do it. Is there a better way?

推荐答案

使用 .load（）可以帮助，然后只需将您要包含的代码放入您要链接的文件中即可。

Using .load() may help, then just put the code you want to include in the file you are linking to.

$('.headerChild').load('pathto/headerProto.html')

另一种方法，如果你不想把数据保存在一个单独的文件：
我没有这样做，但从一些快速的研究，你也可以链接到文件中的元素。

An alternative way if you do not want to keep the data in a separate file: I have not done this but from some quick research you can also link to an element within the file.

$('.headerChild').load('pathto/mainPage.html #headerProto')

这篇关于jQuery Mobile：对所有页面使用相同的页眉页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！