有没有任何jQuery插件，以保持共同的页眉和页脚在HTML页面？ [英] Is there any jquery plugin to keep common header and footer in a HTML page?
问题描述
是否有jquery pluginto用于在HTML页面中保存常用的页眉和页脚？
就像我可以将header.html和footer.html添加到索引中一样。 HTML。
我知道我可以用php，但如果可能的话，我想在我的本地PC上安装任何服务器。后期完成所有工作后，我将使用php包括
$ b > header.html
< title>模板< / title>
< meta name =descriptioncontent =>
< link rel =stylesheethref =css / styles.css？v = 1.0>
< script src =js / modernizr-2.0.6.min.js>< / script>
index.html
{include header.html}
{include footer.html}
Footer.html
< footer class =f1>
< p> copyright& copy;年< / p为H.
< / footer><！ - .f1 - >
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js>< / script>
< script src =js / general.js>< / script>
< / body>
< / html>
jQuery本身有一些功能可以让你做到这一点。如果您可以在每个页面上选择页眉/页脚的容器，则可以插入任何您想要的常见内容，甚至可以替换现有的内容。
jQuery替换网站的公共部分< h2>
你可以这样做：
jQuery（function（）{
jQuery（'。header'）。html（'SOME COMMON HEADER'）;
jQuery（'。footer'）。html（'SOME COMMON FOOTER'）;
}）;
在此处查看： http://jsfiddle.net/6sCfm/
jQuery将外部文件加载到容器中
或者，如果你坚持加载外部文件，你可以这样做（使用 <$ c
$ b
jQuery（function（）{$ c> .load（））：
jQuery（'。header'）。load（'header.html'）;
jQuery（'。footer'）。load（'footer.html'）;
}）;
但请注意您提供的参数的正确路径，并确保文件应该只有你需要的HTML （no < head> ，< body> 标签等。 - 它会使HTML不正确）。
将部分页面加载到容器中
如果您有整页（< head> ，< header> 等），您只能加载其中的一部分。最好为要加载的部分提供有意义的ID（例如 header 和 footer ），并在路径中提供它们，在空格之后，作为选择器：
jQuery（function（）{
jQuery（'。header'）。load （'header.html #header'）;
jQuery（'。footer'）。load（'footer.html #footer'）;
}）;
这应该足够灵活：）
Is there any jquery pluginto use to keep common header and footer in a HTML page?
Like if i can add header.html and footer.html into index.html.
I know I can with php but if possible I want to do without installing any server on my local PC. later after all work done i will use php includes
header.html
<title>Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/modernizr-2.0.6.min.js"></script>
index.html
{include header.html}
<body class="home">
{include footer.html}
Footer.html
<footer class="f1">
<p>copyright © year</p>
</footer><!-- .f1 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/general.js"></script>
</body>
</html>
jQuery itself has some features that allow you to do that. If you can select header's/footer's container on each page, you can insert any common content you want, even replace the existing one.
jQuery replacing common parts of site
You can do something like this:
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
See it in action here: http://jsfiddle.net/6sCfm/
jQuery loading external files into containers
Or, if you insist on loading external files, you can do this (using .load()):
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
but pay attention to correct paths you are giving as parameters and make sure, that files should have only the HTML you need (no <head>, <body> tags, etc. - it will make HTML incorrect).
Loading parts of pages into containers
If you have whole pages (with <head>, <header> etc.), you can load only parts of them. Preferably give meaningful IDs to the parts you want to load (eg. header and footer) and supply them in the path, after space, as selector:
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
This should be flexible enough :)
这篇关于有没有任何jQuery插件，以保持共同的页眉和页脚在HTML页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
