Bookblock jquery插件

Question

此页面上有一个BookBlock jquery插件的演示：

http://tympanus.net/Development/BookBlock/

我在页面加载后使用此代码：

$.getScript('//www.mysite.com/modernizr.custom.js'); 
$.getScript('//www.mysite.com/jquerypp.custom.js'); 
$.getScript('//www.mysite.com/jquery.bookblock.js'); 
HTMLtoAppend="<div class='bb-item'><a href="example.com">';
HTMLtoAppend+='<img src="example.jpg" width="400" height="300"></a></div>';
$('#bb-bookblock').append(HTMLtoAppend);
$('#bb-bookblock').bookblock();
$('#bb-next').on('click', function() { $( '#bb-bookblock').bookblock('next') });
$('#bb-prev').on('click', function() { $( '#bb-bookblock').bookblock('prev') });

图像看起来没问题，HTML附加得很好，但插件不起作用。

任何帮助都将不胜感激。

Answer 1

演示引用的Codrops Article有关于如何使用插件的非常好的描述，包括配置选项的描述和调用以使页面翻转的方法。

演示页面上的源代码看起来很容易弄清楚如何使用。有一个部分初始化插件，还有一个更大的部分用于事件处理。

至少，您需要以下内容：

$( '#bb-bookblock' ).bookblock(); //initialization

//Make the pages flip by binding the click event on a 'Next' and 'Previous' button.
$( '#bb-next').on('click', function() { $( '#bb-bookblock' ).bookblock('next') });
$( '#bb-prev').on('click', function() { $( '#bb-bookblock' ).bookblock('prev') });

为什么演示页面上的所有代码？这只是开发人员组织代码的方式。

Answer 2

为了解决这个问题，我无法使用演示页面上声明的代码运行该插件：

$( '#bb-bookblock' ).bookblock(); //initialization

它只能通过包含大量的内联javascript来运行。