animations Pjax

Pjax fonctionne enfin, mais j’ai une autre question. Comment puis-je append des animations jQuery telles que fadeout / slideup old content et fadein / slidedown nouveau contenu?

Par défaut, pjax modifie simplement le contenu sans aucun effet intéressant.

Toute aide serait très appréciée.

Meilleures salutations

En gros, vous avez plusieurs événements à suivre et à faire comme vous le souhaitez. Voici une version de base de fadeIn et fadeOut utilisant pjax:start et pjax:end as sortingggers.

 $(document) .on('pjax:start', function() { $('#main').fadeOut(200); }) .on('pjax:end', function() { $('#main').fadeIn(200); })

Évidemment, vous échangeriez #main pour l’élément conteneur dans #main vous #main du contenu.

Supposons que vous souhaitiez créer un navigateur de répertoires, tout comme GitHub.

Commençons par le carrousel de Twitter Bootstrap et créons une vue avec des balises pour l’utiliser (espérons que cela ne vous dérange pas, haml):

Voici le conteneur:

 %div#uber-glider.glider.carousel.span12 %div.carousel-inner = yield %div#uber-glider-stage.glider-stage(style="display:none")

Et voici un exemple partiel pour rendre le contenu pjaxé en son sein:

 %div.glider-group.item %div.glider-heading(data-title="#{@super_department.name} Super Department" data-resource="#{super_department_path @super_department.id}") %ul.breadcrumb %li %a.glider-link(href="#{divisions_path}")= "Divisions" %span.divider= "/" %li.active %a.glider-link(href="#{division_path @division.id}")= @division.name %span.divider= "/" %li.active = @super_department.name %div.glider-body - @super_department.departments.each_with_index do |department, i| %div.glider-listing %a.glider-link(data-glide="descend" data-target="#uber-glider" href="#{department_path department.id}") = department.name

Créons maintenant du Javascript avec pjax:

 (function($){ "use ssortingct"; $(function() { $('#uber-glider-stage').on('pjax:success', function(e){ var $incoming_group = $('#uber-glider-stage .glider-group') , $incoming_heading = $('#uber-glider-stage .glider-heading') , incoming_resource = $incoming_heading.data('resource') , $existing_groups = $('#uber-glider .glider-group') , $existing_headings = $('#uber-glider .glider-heading') , existing_last_idx = $existing_groups.length - 1 , matching_idx = -1; $existing_headings.each(function(idx) { if ($(this).data('resource') === incoming_resource) { matching_idx = idx; } }); if (matching_idx > -1) { // pop $incoming_group.remove(); $('#uber-glider').one('slid', function() { for (; existing_last_idx > matching_idx; existing_last_idx--) { $('#uber-glider .glider-group').last().remove(); } }); $('#uber-glider').carousel(matching_idx); } else { // push debug.debug("pushing 1 level"); $incoming_group.detach(); var $container = $('#uber-glider > .carousel-inner'); $container.append($incoming_group); $('#uber-glider').carousel('next'); } }); $('.glider-link').pjax('#uber-glider-stage', { 'timeout' : '3000' }).on('click', function(){ debug.debug(".glider-link click"); }); }); $('#uber-glider .carousel-inner .item').addClass('active'); $('#uber-glider').carousel('pause'); })(window.jQuery);

Je suppose qu’un indicateur de chargement et une animation sont plus ou moins la même chose. Dans ce cas, utilisez les événements pjax: send et pjax: complete.

De pjax readme ,

send et complete sont une bonne paire d’événements à utiliser si vous implémentez un indicateur de chargement. Ils ne seront déclenchés que si une demande est faite, pas si elle est chargée à partir du cache.