Добавление или удаление разделов/слайдов в 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(); 
}); 

Смело invite me to a coffee :)

Answer 2

Спасибо, Alvaro! Я также хочу включить мой подход, чтобы удалить разделы и слайды.

Чтобы удалить активный раздел в нижней части и перейти к верхней секции:

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

700 мс анимация по умолчанию время. Нам нужно подождать, пока пройдет время анимации, чтобы не видеть раздел/слайд при его удалении (что мы наблюдаем как мигание).

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