BookBlock jQuery плагин

Question

BookBlock jQuery плагин

0

Я использую плагин BookBlock. Он работает очень хорошо, но я не могу заставить плагин перевернуть новые страницы, загруженные AJAX.

У кого-нибудь есть идея о том, как повторно инициализировать плагин, чтобы он "видел" новые страницы?

Мой код для BookBlock:

var Page = (function() {

    var config = {
            $bookBlock : $( "#bb-bookblock" ),
            $navNext : $( "#bb-nav-next" ),
            $navPrev : $( "#bb-nav-prev" ),
            $navFirst : $( "#bb-nav-first" ),
            $navLast : $( "#bb-nav-last" )
        },
        init = function() {
            config.$bookBlock.bookblock( {
                speed : 500,
                shadowSides : 0.8,
                shadowFlip : 0.4,
                onEndFlip : function(prev, next, isLimit) {
                    $nav.removeClass('bb-current');
                    $dot = $('.navigation_dots').find('div.dot:eq(' + next + ')');
                    $dot.addClass('bb-current');

                    if (isLimit) {
                        console.log('load new content here');
                        $("<div>").load("line-up.html #bb-bookblock", function () {
                            $("#bb-bookblock").append($(this).find("#bb-bookblock").html());
                        });
                        initEvents();   // <--- This not working
                    }
                }
            } );
            $nav = config.$bookBlock.prev('div.navigation_dots').children('div.dot');
            initEvents();
        },
        initEvents = function() {

            var $slides = config.$bookBlock.children();

            // add navigation events
            config.$navNext.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "next" );
                return false;
            } );

            // add navigation events
            $nav.each(function (i) {
                $(this).on('click touchstart', function (event) {
                    var $dot = $(this);
                    $nav.removeClass('bb-current');
                    $dot.addClass('bb-current');
                    config.$bookBlock.bookblock('jump', i + 1);
                    return false;
                });
            });

            config.$navPrev.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "prev" );
                return false;
            } );

            config.$navFirst.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "first" );
                return false;
            } );

            config.$navLast.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "last" );
                return false;
            } );

            // add swipe events
            $slides.on( {
                "swipeleft" : function( event ) {
                    config.$bookBlock.bookblock( "next" );
                    return false;
                },
                "swiperight" : function( event ) {
                    config.$bookBlock.bookblock( "prev" );
                    return false;
                }
            } );

            // add keyboard events
            $( document ).keydown( function(e) {
                var keyCode = e.keyCode || e.which,
                    arrow = {
                        left : 37,
                        up : 38,
                        right : 39,
                        down : 40
                    };

                switch (keyCode) {
                    case arrow.left:
                        config.$bookBlock.bookblock( "prev" );
                        break;
                    case arrow.right:
                        config.$bookBlock.bookblock( "next" );
                        break;
                }
            } );
        };

    return { init : init };

})();

Page.init();

Заранее спасибо.

Anriëtte Myburgh 20 март 2014, в 03:29

Источник

Теги:

jquery

jquery-plugins

bookblock

1 ответ

Ещё вопросы

SuperNOVA · Answer 1 · 2014-05-13T10-18-00.000Z

Я столкнулся с той же проблемой, и для меня это работало:

    jQuery(document).ready(function($){
    $("#bb-bookblock").bookblock(); //To initialize
    $("#bb-nav-next").on("click",function(e){
        e.preventDefault();
        $.get("long.php",function(data){    //load whatever you want to first
            $("#bb-bookblock").append("<div class='bb-item'>"+data+"</div>").bookblock();   //append a .bb-item div in the #bb-bookblock div and re initialize
            $("#bb-bookblock").bookblock('next');   //finally calling the next()
        });
    });
});

Я согласен, что подход отличается, но я предполагаю, что целью является загрузка страниц через AJAX, а затем переверните страницу, которая сработала для меня. Вы можете использовать то же самое в своем коде, просто вызовите $ ("# bb-bookblock"). Bookblock(); когда вы хотите загрузить новую страницу.

Обратите внимание, что, хотя вышесказанное работает для меня, но это также началось с первой страницы, что сделало его бесполезным для использования. Даже опция startPage в этом случае не работает, и в плагине нет опции повторной инициализации. Итак, в итоге я сделал фиксированное количество страниц, я использовал 17 (количество страниц) пустых страниц .bb-item, а затем использовал приведенный выше код для работы ajax. Надеюсь это поможет