2

Twitter Bootstrap を使用しています。Web サイトの 1 か所に含まれているカルーセルを使用して、DIV のリストを回転させ、一度に 1 つの div を表示しています。

次のように開始されます。

$('.carousel').carousel({interval: 5000});

Bootstrap Carousel は非常に基本的なものであり、サイトの他の場所では、一度に複数のアイテムを表示したり、コールバックを追加したりできるカルーセルが必要なので、 jq.carouselやjQuery Carouselなどを使用したいと考えています。これらは両方とも Bootstrap のものと同じ関数名を使用し、次のように開始されます。

var $carousel = $('.mycarouselclass').carousel();

だから... 衝突があります。1 つのサイトで両方のプラグインを使用するには、どのような方法がありますか? 別の名前で呼び出されるようにプラグインの 1 つを再定義する方法はありますか? 私がこの問題に間違った方法で取り組んでいると思われる場合は、そう言ってください。私は提案と学習に非常にオープンです:)

コメントに基づく追加情報: 可能であれば、縮小されたプラグイン js ファイルをそのままにしておきたいので、将来のプラグインのアップグレードが簡単になるように、外部で 1 つのインスタンスの名前を変更する方法に興味があります。

4

2 に答える 2

6

2 番目のカルーセル プラグインを読み込む前に、最初のカルーセル プラグインの関数の名前をローカルで次のように変更します。

<script type='text/javascript' src="bootstrapCarousel.js"></script>
<script type='text/javascript'>
    $.fn.bootstrapCarousel = $.fn.carousel;
    delete $.fn.carousel;
</script>
<script type='text/javascript' src="nonBootstrapCarousel.js"></script>

次に、呼び出すブートストラップ バージョンが必要な場合は.bootstrapCarousel()、もう一方のバージョンは.carousel().

于 2012-09-05T12:01:04.747 に答える
0

ティムの答えはまだ有効ですが、Twitter Bootstrap プラグインは.noConflict()、名前空間の衝突を回避するための独自の方法を提供します。

TB 2.3.x については、このページを参照してください。最新の 3 については、このリンクをたどってください。ちなみに、どちらのバージョンも同じ方法を使用します。

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

TB のプラグイン コードの 1 つを読んでわかったのは、プラグインは、内部変数で同じ名前空間を使用するプリロードされたプラグインを保持し、呼び出されvar old = $.fn.carouselたときに元に戻すということ.noConflict()です。他のプラグインを先にロードして、TB をロードすると便利です。

最初に TB をロード.noConflict()する場合は、同じ名前空間を使用する他のプラグインをロードする前に呼び出す必要があります。そうしないと、後でロードしたときにエラーが発生する可能性があります。

于 2014-01-23T07:06:07.270 に答える