Loading a new page with sliding animation in Silverstripe 3 (with Ajax?)

问题

I'm working with SilverStripe to build up a new website for a client and now I have the following problem:

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! :)

回答1:

lots of work to do.

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.

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).

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();
   });
});

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/

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.

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.

来源：https://stackoverflow.com/questions/18471187/loading-a-new-page-with-sliding-animation-in-silverstripe-3-with-ajax

标签

jquery

html

css

ajax

silverstripe