Конфликт Jquery-Mootools

Question

Я пытался заставить 2 скрипта (1 mootol и 1 jquery) работать на одной странице, но безрезультатно ... изучал много форумов и все, но я все еще не могу заставить эти 2 работать одновременно.

Вот как это выглядит в моем заголовке:

<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript"> 
     jQuery.noConflict();
$(document).ready(function () { 
         var hide = false; 
     $("#posts-menu, .submenu").hover(function(){ 
         if (hide) clearTimeout(hide); 
         $(".submenu").fadeIn(); 
     }, function() { 
         hide = setTimeout(function() { 
             $(".submenu").fadeOut("slow"); 
         }, 250); 
     }); 

})(jQuery);
    </script>       
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-core-1.3.2.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/mootools-more-1.3.1.1.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall.js"></script>
<script type="text/javascript" src="<?php bloginfo('url'); ?>/wp-content/plugins/buddypress/bp-themes/bp-default/js/wall-lide.js"></script>

<script type="text/javascript">
<!-- 

window.addEvent('domready',function(){


    // -- horizontal
    var myHorizontalSlide = new Fx.Slide('login-welcome-div-slide', {mode: 'vertical'});


    $('slideout').addEvent('click', function(event){
        event.stop();
        myHorizontalSlide.slideOut();
    });


});

// -->  
</script>

Мне удалось запустить скрипт mootools, даже если есть вызов jquery.js ... Вы можете видеть, что я уже использовал jQuery.noConflict(); в 3-й строке ..

проблема в том, что скрипты mootool работают, если jquery.noconflict существует, но скрипты jquery не работают! Теперь, если удалить jquery.noconflict, то теперь, наоборот, скрипт jquery работает, но не скрипты mootool. Я просто не мог заставить их работать 2!

любая помощь будет принята с благодарностью ..

Answer 1

Когда вы работаете в режиме noConflict, вы не можете использовать удобный метод $. Вы должны использовать полную форму jQuery вместо.

jQuery.noConflict();
// Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

Пожалуйста, избегайте использования библиотек 2 js, так как это увеличит время загрузки вашей страницы, что, в свою очередь, имеет последствия для SEO (негативные).

Answer 2

С точки зрения MooTools.

Вы включаете MooTools после jQuery. Это хорошо. Поскольку (если вы не используете jQuery.noConflict), MooTools увидит, что $ уже используется кем-то еще, и оставит его как есть.

Вам придется заменить функцию $ на document.id () в ваших скриптах MooTools.

jQuery имеет этот режим noConflict. При его использовании вам придется заменить функцию $ из jQuery на jQuery ().

Либо вы заменяете вхождения, либо можете использовать анонимные функции, чтобы сохранить ссылки на $ в ваших скриптах и ​​сделать их псевдонимом для document.id () MooTools или jQuery () jQuery.

(function($) {
    // $ will refer to MooTools' document.id() in this anonymous function
    // ...
})(document.id);

(function($) {
    // $ will refer to jQuery's jQuery() in this anonymous function
    // ...
})(jQuery);

Answer 3

Проблема в том, что вы не заключаете код jQuery в анонимную функцию. Попробуйте это:

(function($){
    // inside here $ will always mean jQuery
    $(document).ready(function () { 
         var hide = false; 
         $("#posts-menu, .submenu").hover(function(){ 
             if (hide) clearTimeout(hide); 
             $(".submenu").fadeIn(); 
         }, function() { 
             hide = setTimeout(function() { 
                 $(".submenu").fadeOut("slow"); 
             }, 250); 
         }); 
    });
})(jQuery);

Answer 4

Вы можете попробовать включить библиотеку jQuery перед библиотекой MooTools.

Этот документ должен лучше иллюстрировать

Answer 5

Вы забиваете $.

<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
  });
  // Code that uses other library's $ can follow here.
</script>

Answer 6

Используйте jQuery (с учетом регистра) вместо $ для частей jQuery.