Jquery и Mootools: как устранить конфликт

На этом блоге, в шаблоне для выпадающего меню MenuMatic используется Mootools - javascript-фреймворк. В этом можно было убедиться если посмотреть исходный код страницы и найти там вот такую строку:

<script src="https://elims.org.ua/wp-content/themes/Technologic/Technologic/menu/mootools-1.2.5-core-yc.js" type="text/javascript">
</script>

При этом для установки кнопки вверх/вниз я недавно подключил Jquery - javascript-библиотеку. И тут я сделал для себя открытие оказывается Mootools и Jquery в большинстве случаев конфликтуют между собой. Связано это с тем что для обращения к функциям этих библиотек\фреймворков и там, и там в большинстве случаев осуществляется через переменную "$". В результате скрипты использующие Mootools перестают работать.

Но есть возможность сделать так, чтоб Jquery и Mootools не конфликтовали между собой, для этого необходимо использовать функцию jQuery.noConflict();  , то есть добавить в файл header.php (файл шаблона в котором подключают js-скрипты) вот такую строчку:

<script type="text/javascript" >jQuery.noConflict();</script>

эта функция должна быть вызвана после подключения Javascript-файла jQuery, но ПЕРЕД подключением конфликтующих библиотек. То есть у меня сначала подключается  jQuery, потом используется функция jQuery.noConflict(); и уже после этого подключается Mootools:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" >jQuery.noConflict();</script>
<!-- ... какой-то код .... -->
<script src="https://elims.org.ua/wp-content/themes/Technologic/Technologic/menu/mootools-1.2.5-core-yc.js" type="text/javascript">
</script>

Теперь осталось разобраться с кодом, который обращается к jquery через переменную "$". В нем необходимо "$" заменить на "jQuery". Код может находиться в любом месте, у меня он находиться в файле footer.php. Показываю на примере кнопки вверх\вниз.

ДО:

<!— Start: Кнопки вверх вниз —>
<script type="text/javascript">
jQuery(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>
<div title="Вверх" id='ToTop'>⇧</div>
<div title="Вниз" id='OnBottom'>⇩</div>
<!— End: Кнопки вверх вниз —>

ПОСЛЕ:

<!— Start: Кнопки вверх вниз —>
<script type="text/javascript">
jQuery(function(){
if (jQuery(window).scrollTop()>="250") jQuery("#ToTop").fadeIn("slow")
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop()<="250") jQuery("#ToTop").fadeOut("slow")
else jQuery("#ToTop").fadeIn("slow")
});
if (jQuery(window).scrollTop()<=jQuery(document).height()-"999") jQuery("#OnBottom").fadeIn("slow")
jQuery(window).scroll(function(){
if (jQuery(window).scrollTop()>=jQuery(document).height()-"999") jQuery("#OnBottom").fadeOut("slow")
else jQuery("#OnBottom").fadeIn("slow")
});
jQuery("#ToTop").click(function(){jQuery("html,body").animate({scrollTop:0},"slow")})
jQuery("#OnBottom").click(function(){jQuery("html,body").animate({scrollTop:jQuery(document).height()},"slow")})
});
</script>
<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
<!— End: Кнопки вверх вниз —>

После этих действий MenuMatic работающее на Mootools и кнопки Вверх\Вниз работающие на jQuery заработали не конфликтуя между собой.

P.S.: Справедливости ради скажу что я не пользовался в своем шаблоне возможностью реализации выпадающего меню, потому решил вообще убрать строки отвечающие за их реализацию, то есть не подключать js-скрипты отвечающие за Mootools и MenuMatic. Именно на этом шаге я и заметил конфликт, так как перед удалением Mootools решил проверить все ли работает, чтоб знать последствия отключения фреймворка.

Понравилось? =) Поделись с друзьями:

Обсуждение записи “Jquery и Mootools: как устранить конфликт”

  1. Алекс (seo2011.ru) says:

    Привет. Можно не по теме?)). Смотрю у тебя фавикон на черном фоне. Вот тут «favicon(точка)cc» можно сделать иконку без него.))

  2. Владимир Демянович (elims.org.ua) says:

    Привет, спасибо =) Да, есть такая оплошность, хоть дело и минутное но все откладываю правку фавикона, так как хотел найти какой-то смайлик по ярче, либо вообще попросить какого-то дизайнера что-то сделать эксклюзивное. Но раз уже меня в фавикон носом тычут (кстати не первый раз), значит нужно им срочно заняться =)

  3. Алекс (seo2011.ru) says:

    Сунь в фавикон свое лицо. Одно из самых уникальных вещей в мире)). Лично я лицо Владимир Демянович (в комментах) всегда узнаю))

  4. Владимир Демянович (elims.org.ua) says:

    Интересная идея, особенно если найти из своих фотографий что-то забавное =)

    Кстати, зашел посмотреть фавикон на твоем сайте, думал вдруг тоже лицо и касперский ругнулся, почисти =)

    Скриншот: https://dl.dropboxusercontent.com/u/5974898/temp-seo2011.ru.jpg

  5. Алекс (seo2011.ru) says:

    Стремно)). А как можно сайт на вирусы почистить? Я не знаю

  6. Владимир Демянович (elims.org.ua) says:

    Когда у меня зловред где-то заводился, то я просто скачивал все файлы с ftp и проверял эту папку касперским, те файлы на которые он ругался — удалял. Ну и потом восстанавливал поврежденный функционал: брал из бекапов эти же файлы но не зараженные или переустанавливал плагины, файлы которых вирус зацепил.

    Главное устанавливать темы и плагины с официальных сайтов.

  7. Ven_dr says:

    Огромное спасибо, очень помогли!

  8. Денис Зотов (zotovs.ru) says:

    Владимир, теплое дружеское спасибо за подсказку!
    В моём случае скрипт jQuery задавал работу спойлера. Честно говоря, я не ожидал, что ситуация с конфликтом, думал проблема в синтаксисе из-за обновления библиотек. Дня три голову ломал, а оказалось все просто.
    Очень благодарен за статью, спасибо!

  9. Владимир Демянович (elims.org.ua) says:

    Денис, рад что Вам пригодилось. По Вашей записи в блоге вижу Вам пришлось повозится над решением проблемы =)

  10. Ольга says:

    Большое спасибо! Помогло!

Обсудить