jquery - 书块 jquery pluin

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 文章对如何使用该插件有很好的描述，包括对配置选项的描述和调用以使页面翻转的方法的描述。

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

至少，您需要以下内容：

$( '#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 来运行。