Наконец-то я получил pjax, но у меня есть другой вопрос. Как добавить некоторую анимацию jquery, такую как fadeout/slideup old content и fadein/slidedown new content?
По умолчанию pjax просто изменяет содержимое без каких-либо хороших эффектов.
Любая помощь будет высоко оценена.
С наилучшими пожеланиями
В принципе, у вас есть куча событий, чтобы защелкнуть и сделать, как вам нравится. Вот базовая версия fadeIn и fadeOut, использующая триггеры pjax:start и pjax:end.
$(document)
.on('pjax:start', function() { $('#main').fadeOut(200); })
.on('pjax:end', function() { $('#main').fadeIn(200); })
Очевидно, вы замените #main на элемент контейнера, который вы меняете содержимое в и из.
Предположим, вы хотите создать браузер каталогов, как GitHub.
Начните с карусели Bootstrap Twitter и создайте представление с разметкой, чтобы использовать его (надеюсь, что вы не против haml):
Здесь контейнер:
%div#uber-glider.glider.carousel.span12
%div.carousel-inner
= yield
%div#uber-glider-stage.glider-stage(style="display:none")
И здесь пример частичного отображения в нем pjaxed содержимого:
%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
Теперь создайте Javascript с помощью pjax:
(function($){
"use strict";
$(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);
Я предполагаю, что индикатор загрузки и анимация более или менее одинаковы. В этом случае используйте команды pjax: send и pjax: complete.
Из pjax readme,
отправить и завершить - хорошая пара событий для использования, если вы реализуя индикатор загрузки. Они будут срабатывать только в том случае, если фактический запрос выполняется, если он не загружен из кеша.