我终于让pjax工作,但我有另一个问题..如何添加一些jquery动画,如fadeout / slideup旧内容和fadein / slidedown新内容?
默认情况下,pjax只会更改内容而不会有任何好看的效果..
非常感谢任何帮助。
最好的问候
答案 0 :(得分:15)
基本上,你可以a bunch of events锁定并按照自己的意愿行事。这是使用fadeIn
和fadeOut
作为触发器的基本pjax:start
和pjax:end
版本。
$(document)
.on('pjax:start', function() { $('#main').fadeOut(200); })
.on('pjax:end', function() { $('#main').fadeIn(200); })
显然,你会将#main
换成你正在交换内容的容器元素。
答案 1 :(得分:3)
假设你想创建一个目录浏览器,就像GitHub一样。
让我们从Twitter Bootstrap的旋转木马开始,创建一个带标记的视图来使用它(希望你不介意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
现在让我们用pjax创建一些Javascript:
(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);
答案 2 :(得分:1)
我猜装载指示器和动画或多或少都是一样的。在这种情况下,请使用pjax:send和pjax:complete事件。
来自pjax readme,
发送和完成是一对很好的事件,如果你是 实施装载指标。他们只会被触发 发出实际请求,而不是从缓存中加载。