0

このページに 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 は適切に追加されていますが、プラグインは機能しません。

どんな助けでも大歓迎です。

4

2 に答える 2

2

デモが参照している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') });

デモページにすべてのコードがあるのはなぜですか? それは、開発者がコードを整理する方法にすぎません。

于 2014-12-31T18:46:54.957 に答える
0

これをまとめると、デモページに記載されているコードを使用してプラグインを実行できませんでした。

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

大量のインライン JavaScript を含めることによってのみ実行されます。

于 2015-01-04T10:42:07.270 に答える