12

假设我的代码如下：

<!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 等）中使用此对话框，使上述代码可重用的最佳和最简单的方法是什么？因为我认为将“overlay_form”复制粘贴到每个 html 页面中是不合理的。

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

4

4 回答 4

18

您可以将代码放在不同的文件中并使用http://api.jquery.com/load/.html加载它.load() 

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid
于 2013-04-06T15:05:28.187 回答
4

如果您想多次重用代码，最佳实践是将所有 jQuery 代码放入外部.js文件，将所有 CSS 放入外部样式表，然后从每个页面引用这些文件。

例如对于 CSS，在一个名为的文件中style.css：

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

和一个名为的文件中的jQuery jQueryFunctions.js：

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

关于在不同页面上包含相同的 HTML 代码，我能想到的最简单的方法之一是使用 PHP的 include()函数。这是一个非常简单的单页教程，用于在使用它的多个页面上重用 HTML 表单。

于 2013-04-06T15:02:51.543 回答
2

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

<?php include("example.html") ?>
于 2013-04-06T16:08:24.253 回答
0

适度的 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>

覆盖表单.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>
于 2013-09-06T01:15:39.113 回答