Question

我的网站结构是标题，内容，页脚。我的目标是，每次访问者点击链接时，只会加载“内容”部分，其他所有内容都保持不变。

我不知道达到此效果的最佳做法是什么我在网上看了很多，我找到了iFrames和/或jquery / css / ajax的一些例子，但是我无法下定决心要做什么使用。（网站上的内容，将会改变，将是我网站的所有子页面，因此我认为iFrames不是我需要的工具，但如果我错了，请纠正我。）

页面的“内容”由白色背景和其上方的图层组成，即图片/文字。

我想要实现的是每当访问者点击链接时，文本/图片的内容层“淡出”，白色背景重新调整为子页面的新大小，然后是子页面的新内容淡出。

已经实现了“淡入，淡出”：

$(document).ready(function() {
$("#valtozo").css("display", "none");
$("#valtozo").fadeIn(2000);
$("a").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#valtozo").fadeOut(1000, redirectPage);
});
function redirectPage() {
    window.location = linkLocation;
}

}）;

“valtozo”是改变div的id。

对于白色背景过渡的平滑重新调整大小，我想我用这个： jQuery Animation - Smooth Size Transition

我想听听你的想法/想法，如上所述，在保持所有视觉效果的同时，使用什么来实现功能等框架。

很抱歉很长的帖子，提前谢谢。

（顺便说一句，如果你有更好的想法，更紧凑或更好，消防，没有什么是一成不变的！）

Answer 1

您可以使用defunkt's pjax。

pjax将服务器中的HTML加载到当前页面中，而无需完全重新加载。它是真正的固定链接，页面标题和完全降级的后退按钮的ajax。

您需要实现一个服务器端组件，它只向您发送页面内容，而不包含所有菜单和内容。然后它会工作。

示例代码

未经过全面测试，请评论是否有效。要测试它，make sure it's done over HTTP (not file://) - 至少在使用Chrome时。

检查jsFiddle example with a fake request and alerts showing triggered events。

index.html

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js"></script>
    <script type="text/javascript" src="pjax-fade-click.js"></script>
  </head>

  <body>
    <div id="valtozo">
      This will be replaced.
    </div>

    <a href="news.html" data-pjax="#valtozo">Show news</a>
  </body>
</html>

在news.html中（应检查pjax以启用/禁用菜单）

<h1>News!</h1>

在pjax-fade-click.js

中

$('a[data-pjax]').pjax();

$('body')
  .bind('pjax:start', function(event, xhr, options) { $(options.container).fadeOut("fast"); })
  .bind('pjax:end',   function(event, xhr, options) { $(options.container).fadeIn("fast"); });

然后像往常一样创建所有html页面，但在收到标题'X-PJAX'或查询字符_pjax=true时不显示菜单。

javascript pjax

编辑1

没有仔细检查pjax demo site上的pjax版本 - 事实证明它已经过时了。现在直接从github使用原始版本的jquery.pjax.js，但它应该从其他地方加载。还添加了jsfiddle。

Answer 2

我假设您只想重新加载页面的特定部分而不是整个页面？如果是这样，你可以这样做：

步骤1：为有问题的可重新加载部分创建一个空白/空容器。您的index.html文件应如下所示：

<div id="wrapper">

   <!--menu-->
   <a class="section-1">Section 1 </a>
   <a class="section-2">Section 2 </a>
   <a class="section-3">Section 3</a>
   <!--menu-->

   <!--reloadable-section-->
   <div id="reload">

   </div>
   <!--reloadable-section-->

</div>

步骤2：在单独的HTML文件中创建必要的可重新加载部分，并将它们保存在您认为合适的位置。出于此示例的目的，它们将保存在与index.html文件相同的目录中。所以你的section-1.html，section-2.html和section-3.html文件将包含所有必要的信息/内容。请注意，如果您使用Dreamweaver创建HTML文件，将自动为您插入HTML标记标记，BODY和HEAD标记 - 删除这些标记，因为在此实例中您不需要它们。相反，请立即创建保存内容所需的div。您的文件应如下所示：

<div id="section-1">

    <h2>this is section-1</h2>

    <p>this is the content for section 1</p>

</div>

步骤3：返回index.html文件并包含以下jQuery：

    <script>

        $(document).ready(function(){
            $('.section-1').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-1.html');
            });
            $('.section-2').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-2.html');
            });
            $('.section-3').click(function(){
                 $('#reload').html('<div class="loading"><img src="images/loading.gif"/></div>'); //this is optional; it's just to pull in a loading spinner gif to indicate that content is loading so you can leave it out if you want to.
                 $('#reload').load('section-3.html');
            });
        });

    </script>

因此，只需这样做，您就可以将正确的文件加载到HTML文件的指定容器中，而无需重新加载整个HTML文件。请注意，如果您希望第-1.html部分在加载时具有淡入效果，则可以执行以下操作：

<script>

    $('#section-1').fadeTo(500,1);

</script>

<div id="section-1">

    <h2>this is section-1</h2>

    <p>this is the content for section 1</p>

</div>

是的，就这么简单 - 只需添加上面提到的jQuery，可加载文件中的内容容器就会在文档就绪时淡入。当然，记得通过CSS将指定div的不透明度设置为0。 编辑：请注意，对于此实例，您不需要“$（document）.ready（function（）{}）;”完全没有。

从个人经验来看，除非绝对必要，否则我通常会避免使用iFrame。这只是因为iFrames存在相当多的风格并发症，这可能是一场噩梦，特别是如果父div的高度要从其中的子内容量继承而来。

PS：我不太确定这种方法是否可以严格标记为AJAX加载，但是我会为那些知道更好的人保留它。对不起，我只是一名自学成才的程序员，所以我的知识非常有限。

JQuery页面转换，动画和框架式结构

2 个答案:

示例代码

编辑1