初始化后添加或删除sectionPage / slide到fullPage.js

Question

我有一个树形结构的数据库，在我的网站上，当我在fullPage.js插件的“部分”和“幻灯片”中显示其内容时，我将走到树下。问题是，当我将一个新的部分附加到一个fullpage元素时，它不能成为插件的一部分。

我以这种方式追踪树的原因是，'叶子'与根的距离可能不相同。

Tl;博士，我想这样做：https://github.com/alvarotrigo/fullPage.js/issues/41

Answer 1

如您发布的链接中所述，fullpage.js不提供直接的方式。每次添加新的部分或幻灯片时，唯一的方法是销毁和初始化fullpage.js。为了避免闪烁，我们可以记住活动部分并滑动以使用这些值再次初始化。

Reproduction online

init();

function init(){
    $('#fullpage').fullpage({
        sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    });
}

//adding a section dynamically
$('button').click(function(){
    $('#fullpage').append('<div class="section">New section</div>');

    //remembering the active section / slide
    var activeSectionIndex = $('.fp-section.active').index();
    var activeSlideIndex = $('.fp-section.active').find('.slide.active').index();

    $.fn.fullpage.destroy('all');

    //setting the active section as before
    $('.section').eq(activeSectionIndex).addClass('active');

    //were we in a slide? Adding the active state again
    if(activeSlideIndex > -1){
        $('.section.active').find('.slide').eq(activeSlideIndex).addClass('active');
    }

    init();
});

Answer 2

谢谢，阿尔瓦罗！我还想包括我的方法，以删除部分和幻灯片。 要删除底部的活动部分并转到上部：

$('#fullpage').on('click', 'button#removeSection', function() {
    var section = $('.fp-section.active');
    $.fn.fullpage.moveSectionUp();
    setTimeout(function(){
        section.remove();
    }, 700);
});

要删除最后一张幻灯片并转到左侧的幻灯片：

$('#fullpage').on('click', 'button#removeSlide', function() {
    var slide = $('.fp-section.active').find('.slide.active');
    $.fn.fullpage.moveSlideLeft();
    setTimeout(function(){
        slide.remove();
    }, 700);
});

700ms是默认动画时间。我们应该等待动画时间过去，以便在删除时看不到部分/幻灯片（我们观察到闪烁的时间）。

Answer 3

我需要做类似的事情，但有一点灵活性。重要的是启用上面的部分，而不移动当前页面的内容。

我刚开始使用FullPage.js所以我没有尝试其他插件功能的任何问题。但我在这里分享结果。

它有点复杂，但它做我需要的！最后的例子......

我不得不修改2行FullPage.js插件：

function moveSectionUp(){
        var prev = $(SECTION_ACTIVE_SEL).prevAll(SECTION_SEL + ':first');  // <--- THIS
        // var prev = $(SECTION_ACTIVE_SEL).prev(SECTION_SEL); // <--- INSTEAD OF THIS

和

function moveSectionDown(){
        var next = $(SECTION_ACTIVE_SEL).nextAll(SECTION_SEL + ':first');  // <--- THIS
        //var next = $(SECTION_ACTIVE_SEL).next(SECTION_SEL);  // <--- INSTEAD OF THIS

这些是添加的功能：

fpInitSkipEl = function(funcSkipEl) {

    if ($.isFunction(funcSkipEl)) {
        var nextIndex = 0;
        $('.section').each(function() {
            nextIndex++;
            $('a[href="#' + $(this).attr('data-anchor') + '"]').on('click', function() {
                var dataAnchor = $(this).attr('href').toString().replace('#', '');
                return funcSkipEl($('.section').index($('.section.active')) + 1, $('.section').index($('.section[data-anchor="' + dataAnchor + '"]')) + 1);
            });
        });
    }

}

fpSkipEl = function(anchorsToSkip, index, nextIndex) {
    //debugger;
    $('.section').each(function() {
        if (anchorsToSkip.indexOf($(this).attr('data-anchor')) > -1
            && (index==-1 || $(this).attr('data-anchor') != $('.section').eq(index - 1).attr('data-anchor'))
            && (nextIndex==-1 || $(this).attr('data-anchor') != $('.section').eq(nextIndex - 1).attr('data-anchor'))) {

            $(this).css('display', 'none').removeClass('fp-section');
        } else {

            $(this).css('display', '').addClass('fp-section');
        }
        $.fn.fullpage.reBuild();
    });

}


fpGetRealIndex = function(index) {
    var realIndex = 0;
    $('.section').each(function() {
        realIndex++;
        if ($(this).hasClass('fp-section')) index--;
        if (index == 0) return false;
    });
    return realIndex;
}

主要用途是：

fpInitSkipEl(function(index, nextIndex) { 
    // Fire on anchor Click
    // You can play with index (the current section) and nextIndex (the next section)

    if (index==1 && nextIndex==4) {
        fpSkipEl(['page2', 'page3'], index, nextIndex);

    }
});

并在afterLoad上初始化并设置你的逻辑

$('#fullpage').fullpage({
    anchors: ['page1', 'page2', 'page3', 'page4'],
    afterLoad: function(anchorLink, index) {
            // Get the real index with the hidden sections, oterwise index is relative to the visible sections.
            var realIndex = fpGetRealIndex(index);

            fpSkipEl([], -1, -1); // Show all sections
        }
    });

The simple working example on JSFiddle

A more complex example on JSFiddle