41

Magento Web サイトでブートストラップ 3 とprototype.js を一緒に使用すると問題が発生します。

基本的に、ドロップダウン メニュー (Our Products) をクリックして背景をクリックすると、ドロップダウン メニュー (Our Products) が消えます (prototype.js は "display: none;" を li に追加します)。

問題のデモは次のとおりです: http://ridge.mydevelopmentserver.com/contact.html

以下のリンクのページにprototype.jsを含めなくても、ドロップダウンメニューが本来のように機能することがわかります: http://ridge.mydevelopmentserver.com/

他の誰かが以前にこの問題に遭遇したことがありますか、または競合の可能な解決策を持っていますか?

簡単な修正:

Magentoのprototype.jsファイルを、このブートストラップに適したものに置き換えるだけです:

https://raw.github.com/zikula/core/079df47e7c1f536a0d9eea2993ae19768e1f0554/src/javascript/ajax/original_uncompressed/prototype.js

ここで、ブートストラップの問題を修正するために、prototype.js ファイルに加えられた変更を確認できます。

https://github.com/zikula/core/commit/079df47e7c1f536a0d9eea2993ae19768e1f0554

注: jQuery は、prototype.js の前に magento スキンに含める必要があります。例:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/prototype/prototype.js"></script>
<script type="text/javascript" src="/js/lib/ccard.js"></script>
<script type="text/javascript" src="/js/prototype/validation.js"></script>
<script type="text/javascript" src="/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="/js/varien/js.js"></script>
<script type="text/javascript" src="/js/varien/form.js"></script>
<script type="text/javascript" src="/js/varien/menu.js"></script>
<script type="text/javascript" src="/js/mage/translate.js"></script>
<script type="text/javascript" src="/js/mage/cookies.js"></script>
<script type="text/javascript" src="/js/mage/captcha.js"></script>
4

8 に答える 8

43

ここのコードも使用しました: http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-frameworkただし、ソースを変更する必要はありません。プロトタイプとjqueryインクルードの後のどこかにコードを下に置くだけです：

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('*');
        jQuery.each(['hide.bs.dropdown', 
            'hide.bs.collapse', 
            'hide.bs.modal', 
            'hide.bs.tooltip',
            'hide.bs.popover',
            'hide.bs.tab'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();
于 2013-12-23T17:44:28.840 に答える
8

パーティーに遅れましたが、本当にうまく機能するこの jsfiddleにリンクするこの情報ページにリンクするこの github の問題を見つけました。すべての jQuery セレクターにパッチが適用されるわけではなく、これまでで最も優れた修正だと思います。将来の人々を助けるためにここにコードをコピーしてください：

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
  var pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover'];
  var disablePrototypeJS = function (method, pluginsToDisable) {
    var handler = function (event) {
      event.target[method] = undefined;
      setTimeout(function () {
        delete event.target[method];
      }, 0);
    };
    pluginsToDisable.each(function (plugin) {
      jQuery(window).on(method + '.bs.' + plugin, handler);
    });
  };


  disablePrototypeJS('show', pluginsToDisable);
  disablePrototypeJS('hide', pluginsToDisable);
}
于 2015-08-18T04:54:22.867 に答える
7

* セレクターを jQuery で使用することはお勧めできません。これにより、ページ上のすべての DOM オブジェクトが取得され、変数に入れられます。Bootstrap コンポーネント固有を使用する要素を選択することをお勧めします。以下のソリューションは、ドロップダウン コンポーネントのみを使用します。

(function() {
    var isBootstrapEvent = false;
    if (window.jQuery) {
        var all = jQuery('.dropdown');
        jQuery.each(['hide.bs.dropdown'], function(index, eventName) {
            all.on(eventName, function( event ) {
                isBootstrapEvent = true;
            });
        });
    }
    var originalHide = Element.hide;
    Element.addMethods({
        hide: function(element) {
            if(isBootstrapEvent) {
                isBootstrapEvent = false;
                return element;
            }
            return originalHide(element);
        }
    });
})();
于 2015-01-29T12:26:59.877 に答える
2

http://kk-medienreich.at/techblog/magento-bootstrap-integration-mit-prototype-framework/を参照してください。

クリックされた要素の名前空間を検証するのは非常に簡単な修正です。

検証関数をprototype.jsに追加します:

その後、要素が非表示になる前に名前空間を検証します。

  hide: function(element) {
    element = $(element);
    if(!isBootstrapEvent)
    {
        element.style.display = 'none';
    }
    return element;
  },
于 2013-12-05T07:06:30.303 に答える
0

この回答bootstrapは、prototype競合の問題を取り除くのに役立ちました。

@ GeekNum88が問題を説明しているように、

PrototypeJS は Element プロトタイプにメソッドを追加するため、jQuery が要素でメソッドをトリガーしようとすると、hide()実際には PrototypeJShide()メソッドが起動されます。これは jQuery メソッドと同等 hide()で、要素のスタイルをdisplay:none;

bootstrap質問自体で示唆しているように、フレンドリーを使用するか、次のようにprototype数行をコメントアウトするだけですbootstrap。

Tooltip.prototype.hide関数内

this.$element.trigger(e)
if (e.isDefaultPrevented()) return
于 2014-08-04T08:55:00.533 に答える