Hinzufügen oder Entfernen von Abschnitten/Folien zu fullPage.js nach der Initialisierung

Question

Ich habe eine Struktur-strukturierte Datenbank und in meiner Website gehe ich den Baum, wie ich ihre Inhalte in "Abschnitte" und "Folien" von fullPage.js Plugin zeigen . Das Problem ist, wenn ich einen neuen Abschnitt an ein Fullpage-Element angehängt habe, kann es kein Teil des Plugins sein.

Der Grund, dass ich den Baum auf diese Weise verfolgen, ist, dass die Abstände der "Blätter" von der Wurzel nicht übereinstimmen.

Tl; dr, mag ich dies tun: https://github.com/alvarotrigo/fullPage.js/issues/41

Answer 1

Wie gesagt in dem Link posten, fullpage.js keine direkte Art und Weise bereitstellt, es zu tun. Der einzige Weg besteht darin, fullpage.js jedes Mal zu löschen und zu initialisieren, wenn Sie einen neuen Abschnitt oder eine neue Folie hinzufügen. Um Blinkungen zu vermeiden, können wir uns an den aktiven Abschnitt erinnern und die Folie mit diesen Werten erneut initialisieren.

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

Fühlen Sie sich frei invite me to a coffee :)

Answer 2

Danke, Alvaro! Ich möchte auch meinen Ansatz einbeziehen, um Schnitte und Folien zu entfernen.

Um den aktiven Abschnitt an der Unterseite zu entfernen und oberen Abschnitt gehen:

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

die letzte Folie zu entfernen, und auf der linken Seite mit dem Schlitten gehen:

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

700ms ist die Standard-Animation Zeit. Wir sollten auf die Animationszeit warten, um den Abschnitt/die Folie nicht zu sehen, während sie entfernt wird (was wir als blinkend beobachten).

Answer 3

Ich musste etwas ähnliches tun, aber mit etwas mehr Flexibilität. Und es war wichtig, Abschnitte oben zu aktivieren, ohne den Inhalt der aktuellen Seite zu verschieben.

Ich habe gerade angefangen, FullPage.js zu verwenden, also habe ich keine Probleme mit anderen Plugin-Funktionen versucht. Aber ich teile das Ergebnis hier.

Es ist ein wenig kompliziert, aber es tut was ich brauche! Beispiele am Ende ...

Ich hatte zwei Linien von FullPage.js Plugin zu ändern:

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

Und

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

Und das sind die Funktionen hinzugefügt:

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

Die Hauptanwendung ist dies:

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

    } 
}); 

Und init und stellen Sie Ihre Logik auf 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