jQuery Mobile:对所有页面使用相同的页眉

Question

我正在尝试实现一些代码,这些代码将在我的所有网页上创建页眉和页脚,而不是对它们进行硬编码.我试过这个:

我在我的"主页"中有这个我刚刚调用包裹在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());

没有骰子.无论哪种方式都是对我应该怎么做的全面猜测.有没有更好的办法？

Answer 1

使用.load()可能有所帮助,然后只需将要包含的代码放入要链接的文件中.

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

如果您不想将数据保存在单独的文件中,另一种方法是:我没有这样做,但是通过一些快速研究,您还可以链接到文件中的元素.

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