在Silverstripe 3中加载带有滑动动画的新页面（使用Ajax？） [英] Loading a new page with sliding animation in Silverstripe 3 (with Ajax?)
问题描述
我正在使用SilverStripe为客户端建立一个新网站，现在我有以下问题：
I'm working with SilverStripe to build up a new website for a client and now I have the following problem:
每一页（和这些页面的子页面）将有一个特定的背景图像，我想这些背景图像滑动到一边，当一个新的页面加载，而不是像往常一样加载整个页面（在这里你可以看到一个例子我的意思：http：// www。 thenomadhotel.com/）。我想我必须这样做与Ajax或有更好的解决方案？由于我不太熟悉Ajax，我的大问题是：我如何在SilverStripe中使用Ajax？哪些代码应该在哪个文件中？任何人可以帮助我这个问题？我不是超级程序员，而是一个快速学习者，所以任何帮助将不胜感激！ ：）
Each page (and the children of these pages) will have a specific background image and I want that theses background images slide to the side when a new page is loaded instead of loading the whole page as usual (here you can see an example of what I mean: http:// www.thenomadhotel.com/). I guess I have to do that with Ajax or is there a better solution? Since I'm not so familiar with Ajax, my big question is: How do I work with Ajax in SilverStripe? Which code should go in which file? Can anyone help me with this issue? I'm not the super-programmer but a fast learner, so any help would be appreciated! :)
基本上，这是一个很好的工作。
推荐答案
您需要为通过ajax加载的网页创建一个模板，只包含您在网页更改时更新的内容，因此不需要< header> 等。
basically, you'll need to create a template for your pages to be loaded via ajax, containing only the content you'll update on page change, so no <header> etc.
接下来，请参阅 http://doc.silverstripe.com/framework/en/3.1/reference/templates#calling-templates-from-php-code 如何渲染它们（ Director :: is_ajax（）是这里的朋友）。
next, see http://doc.silverstripe.com/framework/en/3.1/reference/templates#calling-templates-from-php-code on how to render them (Director::is_ajax() is your friend here).
在客户端，你可能想用jquery ajax函数并捕获您页面上的所有内部链接，使用ajax加载它们。
简单代码示例：
on the client side, you might want to go with jquery's ajax functions and catch all internal links on your page, loading them with ajax. simple code example:
$(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/
this snippet will load any links with ajax and replace the content of the current page's <body> with the loaded html. you should definitly have a closer look at jquery's ajax capabilities, there's a lot to learn: http://api.jquery.com/category/ajax/
，您可以做的是在您的<$ c中准备2个容器$ c>< body> ，一个保存背景图片，另一个保存页面内容（使用ajax替换）。然后，无论何时链接被点击，进行ajax调用如前所示，然后滑动背景图片。
as for your 'sliding background image', what you could do is to prepare 2 containers in your <body>, one holding the background image, the other for the page's content (to be replaced using ajax). then, whenever a link is clicked, make the ajax call as shown before, then slide the background image.
这些只是一些指向正确的方向 -
these are just some pointers into the right direction - as i said before, lots of work to do.
如果你想完全避免这个整个ajax的东西，另一个选择可能是你的页面的内容在iframe - 但这是另一个故事。
in case you'd like to completely avoid this whole ajax stuff, another option might be to have your page's content inside in iframe - but that's another story.
这篇关于在Silverstripe 3中加载带有滑动动画的新页面（使用Ajax？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
