javascript - Twitter Bootstrap Transition Conflict prototypejs

Question

I created a fiddle for Collapse feature of Twitter Bootstrap using the markup from the demos on your page that works: http://jsfiddle.net/Rymd7/1/

Then once, I add in a reference to prototypejs collapse functionality stops working on each accordian group after clicking through it a couple of times. http://jsfiddle.net/p5SAy/1/ I'm not sure what the issue is or how to correct it.

Is this a bootstrap issue or is there a way to get around this and have these two js libraries exist on the same page?

I have tried jQuery noConflict with no success, but any help is appreciated. If you can send me back a working fiddle that would be great...or any insight.

Thanks. -John

score 17 · Accepted Answer

なしでjQueryとPrototypeを同時に使用していjQuery.noConflict()ます。後

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.js'></script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0/prototype.js"></script>

この行はJavaScriptエラーを引き起こしていました:

$(window).load(function(){

修正されたフィドル: http://fiddle.jshell.net/ymbsr/5/ -別のブラウザでhttp://fiddle.jshell.net/ymbsr/5/show/を開きます。

PS

jQuery/Prototype の競合を取り除いた後、Chrome 21 と Opera 12.02 のアコーディオン遷移が終了しないことがわかります (bootstrap-collapse.js Collapse.transition遷移を開始しますが、complete()呼び出されることはありません)。Collapse.show()/hide()同じ要素に対するのさらなる呼び出しは、の後に終了しif (this.transitioning) returnます。

Firefox 15.0.1 では、アコーディオンは正常に動作します。

PPS

この奇妙な動作は、次の 2 つの機能の結果です。

this.$element.trigger('hide')(in ) は、要素にメソッドが存在する場合Collapse#transition()に呼び出しを試みます-これは設計によるものです:$element.hide()hide()

注: プレーンオブジェクトと DOM オブジェクトの両方で、トリガーされたイベント名がオブジェクトのプロパティの名前と一致する場合、イベントハンドラーが event.preventDefault() を呼び出さない場合、jQuery はプロパティをメソッドとして呼び出そうとします。この動作が望ましくない場合は、代わりに .triggerHandler() を使用してください。

HTML 要素のプロトタイプ拡張機能をサポートする各ブラウザの Prototype には、設定によって実際に要素を非表示にするメソッド$elementが必ずあります。hide()element.style.display = 'none'
現在のバージョンの Chrome および Opera トランジション終了イベント ( webkitTransitionEnd、oTransitionEnd、のいずれかotransitionend) では、要素が非表示の場合 (display: noneスタイルがある場合) は発生しません。Firefox は移行をより正常に終了しますが、状況によってはイベントを発生させない場合もあります。

注: 遷移が完了する前にアニメーションプロパティの値が変更されるため、遷移が中止された場合、「transitionend」イベントは発生しません。

修正方法:

バグを報告bootstrap-collapse.js-遷移終了イベントのみに依存するべきではありません
バグを報告してくださいbootstrap-collapse.js- そのhideイベントは他のフレームワークと交差します (少なくともプロトタイプと交差しますが、要素プロトタイプを拡張する他のフレームワークは影響を受ける可能性があります)。

http://fiddle.jshell.net/ymbsr/7/のように一時的にパッチCollapse#transition()を適用します。イベントのトリガーを無効にするか、イベント名を変更します。bootstrap-collapse.js

jQuery.fn.collapse.Constructor.prototype.transition = function (method, startEvent, completeEvent) {
  var that = this
    , complete = function () {
        if (startEvent.type == 'show') that.reset();
        that.transitioning = 0;
        that.$element.trigger(completeEvent);
      }
  //this.$element.trigger(startEvent);
  //if (startEvent.isDefaultPrevented()) return;
  this.transitioning = 1;
  this.$element[method]('in');
  (jQuery.support.transition && this.$element.hasClass('collapse')) ?
      this.$element.one(jQuery.support.transition.end, complete) :
      complete();
};

score 0 · Accepted Answer

私は Magento を使用しており、何年もの間、ブートストラップ/プロトタイプの問題を抱えていました。私は運なしで上記のすべてを試しました。あなたは何がうまくいったのか信じられないでしょう！

最初に読み込まれるスクリプトの 1 つとしてプロトタイプを移動し、他のすべてのスクリプトは後で読み込まれるようにしました。それは私のために働いた。なぜ以前に試さなかったのかわかりません。

javascript - Twitter Bootstrap Transition Conflict prototypejs

2 に答える 2

Related

Reference