销毁并重新初始化 Turn.js

Question

我有一个正在使用 turn.js 的网页，如果用户将页面大小调整到特定阈值以下，我希望销毁并重新初始化插件。我正在如下测试：

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 764px)')) {
        $("#flipbook").turn("destroy");
    }
});

但是我不确定如何重新初始化 turn.js 随后？

Answer 1

你很接近：只需要做一件事就是添加 $( window ).unbind( 'keydown' ); 然后通过再次添加 .turn() 重新初始化；

$( '#book' ).turn( 'addpage', element, pageNo ); 是正确的做法，但我不想 return 只是一块 HTML。我更喜欢重新加载整个 div。所以对我有用的是：

// data is html ajax response
// destroy any previous bindings'
if ( $( '#book' ).turn( 'is' ) ) {
        $( '#book' ).turn( 'destroy' );
        $( window ).unbind( 'keydown' );
}

$( '#book' ).html( data );

// load the book
$( '#book' ).turn({
    display: 'double'
    , acceleration: true
    , gradients: !$.isTouch
    , elevation:50
});

销毁并重新初始化 Turn.js

Destroying and Re-initializing Turn.js

turnjs