如何在每个html页面中重用html代码？ [英] How to reuse the html code in every html page?
问题描述
假设我的代码如下：
<！DOCTYPE HTML>
< html>
< head>
< style>
#overlay_form {
position：absolute;
border：5px纯灰色;
padding：10px;
背景：白色;
width：270px;
height：190px;
}
#pop {
display：block;
border：1px纯灰色;
width：65px;
text-align：center;
padding：6px;
border-radius：5px;
text-decoration：none;
margin：0 auto;
}
< / style>
< script src =jquery.js>< / script>
< script type =text / javascript>
$ b $（document）.ready（function（）{
// open popup
$（＃pop）。click（function（）{
$ （#overlay_form）。fadeIn（1000）;
positionPopup（）;
}）;
//关闭弹出窗口
$（＃close） .click（function（）{
$（＃overlay_form）。fadeOut（500）;
}）;
}）;
//将弹出窗口放在页面中心
函数positionPopup（）{
if（！$（＃overlay_form）。is（'：visible'） ）{
return;
}
$（＃overlay_form）。css（{
left：（$（window）.width（） - $（'＃overlay_form'）。width（））/ 2 ，
top：（$（window）.width（） - $（'＃overlay_form'）。width（））/ 7，
position：'absolute'
}）;
}
//当浏览器调整大小时，在页面中心维护弹出窗口
$（window）.bind（'resize'，positionPopup）;
< / script>
< / head>
< body>
< a href =＃id =pop> PopUp< / a>
< br />
< form id =overlay_formstyle =display：none>
< h2>把你的内容放在这里..< / h2>
< label>用户名：< / label>< input type =textname =username/>< br />< br />
< label>密码：< / label>< input type =textname =password/>< br />< br />
< input type =buttonvalue =Login/>
< a href =＃id =close>关闭< / a>
< / form>
< / body>
< / html>
这是一个弹出对话框示例。假设我想在我的所有网页（a.html，b.html，c.html等）中使用这个对话框，那么使上面的代码可以重用的最好和最简单的方法是什么？因为我认为要复制粘贴'overlay_form'到每个html页面是不合理的。
我仍然处于Javascript的初级阶段，因此创建一个jQuery插件对我来说太难了。这就是为什么我想寻求其他方式来做到这一点。感谢。
您可以将代码放入不同的 .html 文件并使用 .load（） http：// api.jquery.com/load/
$（'＃targetid'）。load（'somewhere / a html的'）; //在#targetid中加载.html
Let say I have the code as below:
<!DOCTYPE HTML>
<html>
<head>
<style>
#overlay_form{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
#pop{
display: block;
border: 1px solid gray;
width: 65px;
text-align: center;
padding: 6px;
border-radius: 5px;
text-decoration: none;
margin: 0 auto;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//open popup
$("#pop").click(function(){
$("#overlay_form").fadeIn(1000);
positionPopup();
});
//close popup
$("#close").click(function(){
$("#overlay_form").fadeOut(500);
});
});
//position the popup at the center of the page
function positionPopup(){
if(!$("#overlay_form").is(':visible')){
return;
}
$("#overlay_form").css({
left: ($(window).width() - $('#overlay_form').width()) / 2,
top: ($(window).width() - $('#overlay_form').width()) / 7,
position:'absolute'
});
}
//maintain the popup at center of the page when browser resized
$(window).bind('resize',positionPopup);
</script>
</head>
<body>
<a href="#" id="pop" >PopUp</a>
<br />
<form id="overlay_form" style="display:none">
<h2> Put your contents here..</h2>
<label>Username: </label><input type="text" name="username" /><br /><br />
<label>Password: </label><input type="text" name="password" /><br /><br />
<input type="button" value="Login" />
<a href="#" id="close" >Close</a>
</form>
</body>
</html>
This is a popup dialog example. Let say I want to use this dialog in all my webpages (a.html, b.html, c.html and etc), what is the best and easiest way to make the code above to be reusable? Because I think that to copy paste the 'overlay_form' into every html pages is not reasonable.
I am still at the beginning level in Javascript, so to create a jQuery plugin for this is too hard for me. That's why I would like to seek for other ways to do it. Thanks.
You could put your code in a different .html file and load it with .load() http://api.jquery.com/load/
$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid
这篇关于如何在每个html页面中重用html代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
