1

这是我将用作示例的网站：http: //templatic.com/demos/geoplaces4/

当用户选择他们的城市时，jQuery 是否可以淡出现有页面并加载到下一页，而无需实际刷新浏览器？我想这类似于 Facebook 新的响应式链接的工作方式。

我只是不知道从哪里开始，而且我似乎找不到任何信息，因此非常感谢任何链接/资源/提示。

4

2 回答 2

2

您不能将整个文档替换到位，这也没有多大意义。如果您要交换整个文档，这实际上与重新加载页面或加载新页面没有什么不同。

但是，您可以替换最顶层的文档元素 - 这是正文，然后修改文档的标题以通常模拟相同的行为，但是您必须手动管理更新的内容（即管理脚本和加载的 css 等。 )

进行“页面”交换的典型应用程序倾向于使用单个页面框架，然后将文档的主要部分交换进或交换出 - 标题保持不变，仅操作关键标题。这是单页应用程序 (SPA) 背后的基本概念。

于 2012-12-13T06:44:52.353 回答
1

您已经将文档分为大约 2 个分区，这些分区在您的城市选择器和地图显示页面之间保持相对固定。因此，您可以为他们两个单独添加新内容的 AJAX。为什么需要替换整个文档？我意识到这种方法最容易与您给定的框架相匹配，但我向您保证，这不是 Facebook 正在做的事情。

这种类型的单页应用程序背后的方法是这样的：

html

<body><!-- with a solid background color -->
    <div id="main-content">
        <header>
        </header>
        <div id="city-picker">
             <!-- city picker stuff here -->
        </div>
    </div>
 </body>

Javascript

// inside On click/on select handler for your city picker
// Animate the fade-out of your first page
$('#main-content').hide(2000).html('')
    .load('ajax/city-map.php?theCity='+selectedValue).show(2000);

基本上就是这样 - 2 秒淡出，仅<body>显示标签的纯色背景，用于.load将新文档的 html 提取到main-contentdiv 中，然后 2 秒淡入。

这种依赖于瞬时 AJAX 请求，这显然是不可能的。正确的做法是从 .load 完成函数回调中将其淡入。查看.load 上的文档以获取有关使用回调的详细信息。您可以更高级并在开始淡出之前启动 ajax，因此在用户观看内容淡出时请求正在进行。但这应该足以让你开始。

需要注意的另一件事.load是基本上调用$('#main-content').html(data)，其中 data 是 AJAX 请求的 URL 返回的整个响应。因此，如果您返回带有 doctype、. 和标签的完全格式化的 html 文档，这是不恰当的，并且可能会破坏用户体验。

于 2012-12-13T07:04:19.800 回答