gpt4 book ai didi

jquery - 在 Silverstripe 3 中加载带有滑动动画的新页面(使用 Ajax?)

转载 作者:太空宇宙 更新时间:2023-11-04 14:39:39 25 4
gpt4 key购买 nike

我正在与 SilverStripe 合作为客户建立一个新网站,现在我遇到了以下问题:

每个页面(以及这些页面的子页面)都有一个特定的背景图片,我希望这些背景图片在加载新页面时滑到一边,而不是像往常一样加载整个页面(在这里你可以看到我的意思的例子:http://www.thenomadhotel.com/)。我想我必须用 Ajax 来做,或者有更好的解决方案吗?由于我对 Ajax 不太熟悉,所以我的大问题是:如何在 SilverStripe 中使用 Ajax?哪个代码应该放在哪个文件中?谁能帮我解决这个问题?我不是 super 程序员,而是一个快速学习者,所以任何帮助将不胜感激! :)

最佳答案

还有很多工作要做。

基本上,您需要为要通过 ajax 加载的页面创建一个模板,其中仅包含您将在页面更改时更新的内容,因此没有 <header>等等

接下来,参见http://doc.silverstripe.com/framework/en/3.1/reference/templates#calling-templates-from-php-code关于如何渲染它们(Director::is_ajax() 是你的 friend )。

在客户端,您可能希望使用 jquery 的 ajax 函数并捕获页面上的所有内部链接,并使用 ajax 加载它们。简单代码示例:

$(document).ready(function(){
$('a').click(function(){
var $a = $(this);
var href = $a.attr('href');
$('body').load(href);
e.preventDefault();
});
});

此代码段将使用ajax 加载任何链接并替换当前页面的<body> 的内容。与加载的 html。你绝对应该仔细看看 jquery 的 ajax 功能,有很多东西要学:http://api.jquery.com/category/ajax/

至于你的'滑动背景图片',你可以做的是在你的<body>中准备2个容器。 ,一个保存背景图片,另一个保存页面内容(将使用 ajax 替换)。然后,每当单击链接时,如前所示进行 ajax 调用,然后滑动背景图像。

这些只是指向正确方向的一些指示 - 正如我之前所说,还有很多工作要做。

如果您想完全避免这整个 ajax 东西,另一种选择可能是将您的页面内容放在 iframe 中 - 但那是另一回事了。

关于jquery - 在 Silverstripe 3 中加载带有滑动动画的新页面(使用 Ajax?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18471187/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com