Question

假设我的代码如下：

<!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>

这是一个弹出对话框示例。假设我想在我的所有网页（a.html，b.html，c.html等）中使用此对话框，使上面的代码可重用的最佳和最简单的方法是什么？因为我认为要复制粘贴＆＃39; overlay_form＆＃39;进入每个html页面都是不合理的。

我仍处于Javascript的初级，因此为此创建一个jQuery插件对我来说太难了。这就是为什么我想寻求其他方法来做到这一点。感谢。

Answer 1

您可以将代码放在不同的.html文件中，然后使用.load() http://api.jquery.com/load/

加载

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

Answer 2

如果您想多次重复使用代码，最佳做法是将所有jQuery代码放入外部.js文件中，将所有CSS放入外部样式表中，并从每个页面引用这些文件

E.g。对于CSS，在名为style.css：

的文件中

<link rel="stylesheet" type="text/css" href="style.css">

以及名为jQueryFunctions.js的文件中的jQuery：

<script type="text/javascript" src="jQueryFunctions.js"></script>

关于在不同页面上包含相同的HTML代码，我能想到的最简单的方法之一就是使用PHP include()函数。 Here's a very simple one-page tutorial使用它在多个页面上重复使用HTML表单。

Answer 3

将所有可重用的代码放在html文档中，并使用以下php代码将其调用到页面：

<?php include("example.html") ?>

Answer 4

Modest HTML这样做。

看起来像这样：

<强> main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>overlayForm</include>
  </head>
  <body>
    <overlayForm/>
  </body>
</html>

<强> overlayForm.xml

<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>

如何在每个html页面中重用html代码？

4 个答案: