Jit*_*yas 6 html javascript jquery jquery-plugins
是否有任何jquery插件用于在HTML页面中保持公共页眉和页脚?
就像我可以将header.html和footer.html添加到index.html中一样.
我知道我可以使用php,但如果可能的话,我想不用在我的本地PC上安装任何服务器.完成所有工作后,我将使用PHP包括
了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>
Run Code Online (Sandbox Code Playgroud)
的index.html
{include header.html}
<body class="home">
{include footer.html}
Run Code Online (Sandbox Code Playgroud)
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>
Run Code Online (Sandbox Code Playgroud)
Tad*_*eck 13
jQuery本身有一些允许你这样做的功能.如果您可以在每个页面上选择页眉/页脚的容器,则可以插入所需的任何常用内容,甚至可以替换现有内容.
你可以这样做:
jQuery(function(){
jQuery('.header').html('SOME COMMON HEADER');
jQuery('.footer').html('SOME COMMON FOOTER');
});
Run Code Online (Sandbox Code Playgroud)
在这里看到它:http://jsfiddle.net/6sCfm/
或者,如果您坚持加载外部文件,则可以执行此操作(使用.load()
):
jQuery(function(){
jQuery('.header').load('header.html');
jQuery('.footer').load('footer.html');
});
Run Code Online (Sandbox Code Playgroud)
但要注意你提供的正确路径作为参数,并确保文件应该只有你需要的HTML(不<head>
,<body>
标签等 - 它会使HTML不正确).
如果你有整页(有<head>
,<header>
等),可以加载它们的唯一部分.最好为要加载的部分提供有意义的ID(例如.header
和footer
),并在空格后的路径中作为选择器提供它们:
jQuery(function(){
jQuery('.header').load('header.html #header');
jQuery('.footer').load('footer.html #footer');
});
Run Code Online (Sandbox Code Playgroud)
这应该足够灵活:)
归档时间: |
|
查看次数: |
11790 次 |
最近记录: |