Ну вот, наконец, я ее все-таки дописал. Рассказать я сегодня хочу о том как подружить jQuery и Mootools. Многие спросят "нафига?". Мой ответ — надо. Надо было вот и искал решение, искал и нашел и теперь хочу поделиться. Вдруг еще кому понадобиться.
Начну издалека. Когда-то давно на www.yahoo.com я обнаружил возможность менять цветовую схему сайта. Тогда мне это показалось страшнейшим шаманством и я даже не стал пробовать разбираться. Много позже я наткнулся на еще один буржуйский сайт где можно было менять фоновую картинку. И вот это я уже никак не смог проигнорировать. Кстати, именно это можно сейчас наблюдать в правом верхнем углу странички — переключение фоновой картинки. Попереключайте, станица совершенно по по-другому воспринимается.
Дело в том что это самое переключение бакгроунда реализовано на Mootools, а вкладки и слайдер в сайдбаре — jQuery. Значит наше задача – сделать так чтобы они работали вместе и не создавали никаких проблем.
Так вот. В JQuery есть замечательная функция — jQuery.noConflict();. Вот именно ее мы и будем курить.
Так как библиотека jQuery и практически все плагины к ней по умолчанию используют $ для вызова функций это создает неразрешимое противоречие если подключена не только jQuery, а например еще Mootools или Prototype. Единственным решением является переопределения вызова $-функции.
<html>
<head>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Вызов через jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Для Mootools оставляем $(...)
$('someid').hide();
</script>
</head>
<body>
...
</body>
</html>
Существует еще один вариант, который позволяет немного сократить код:
<html>
<head>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// Вызов через $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Для Mootools оставляем $(...)
$('someid').hide();
</script>
</head>
<body>
...
</body>
</html>
Вы можете определить свои собственные альтернативные названия (например, jq, $j).
И, наконец, третий вариант. Самый простой и позволяющий не заморачиваться с переопределением:
<html>
<head>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$("div").hide();
});
// Для Mootools $(...)
$('someid').hide();
</script>
</head>
<body></body>
</html>
Вот собственно и все. Я использую первый вариант т.к. мне так удобней. Вы же можете воспользоваться любым из этих трех.
Удачи.
- SEO Нелегал рассказываете как заработать в интернете школьнику старших классов
- В Челябинске тоже есть seo блог, а где их сейчас нет?
2leep.com
12 февраля 2010 в 20:01
Удобная вещь! Очень часто встречаю ее в буржуйских шаблонах для joomla.
14 февраля 2010 в 17:32
Скачал jQuery и Mootools. Буду разбираться.
28 февраля 2010 в 13:21
Козюлькин, ну тут я думаю, от прямоты рук все зависит. У меня работает. У тебя видимо не будет.
Как я уже говорил — переключение фона это mootools, а вкладки в сайдбаре — jquery.
Кто не верит — добро пожаловать в исходники страницы
28 февраля 2010 в 18:05
пиздеж не будет работать никогда
01 марта 2010 в 19:55
Данные методы в мозиле работают, а в ie6 не работают. В чём может быть проблема?
01 марта 2010 в 20:24
В ie6 все работает нормально. Проверяйте код.
02 марта 2010 в 8:05
Нет, в ie6 работает — но не нормально. Я причину вчера до 4 ночи искал и нашёл её в том, чего здесь не написано. А именно: 1 — библиотека mootools должна подключаться перед jquery, 2 — а сам скрипт mootools должен идти уже после скрипта jquery. Вроде мелочи и бред, но только после таких экспериментов у меня всё заработало в ie6.
P.S. Кстати данный сайт также имеет глюк в ie6 — фон меняется нормально, а в навигационном меню ячейка выделения уезжает влево от надписи (прикрепил бы изображение глюка, если бы нашёл как это сделать)
02 марта 2010 в 8:10
Я знаю об этом баге, мне его просто ловить лень
А вот про порядок подключения я как-то не подумал…
03 апреля 2010 в 3:31
Алексей прав — я тоже долго мучался в свое время: порядок подключения библиотек и скриптов имеет значение.
У меня все работает при подключении в таком порядке:
1. Стили CSS
2. Библиотека Mootools
3. Файл скриптов Mootools
4. Библиотека Jquery
5. Файл скриптов Jquery
16 апреля 2010 в 10:40
Однако, все работает. И этот блог тому живой пример
16 апреля 2010 в 10:06
мало верится что сразу так заработает
21 декабря 2010 в 23:36
Просто ОГРОМНОЕ спасибо. Очень помогло!!!:)
04 марта 2011 в 2:41
тут описан еще один метод без noConflict() за счет загрузки jQuery перед prototype http://docs.jquery.com/Using_jQuery_with_Other_Li…
<script src="jquery.js"></script>
<script src="prototype.js"></script>
<script>
// Use jQuery via jQuery(…)
jQuery(document).ready(function(){
jQuery("div").hide();
});
// Use Prototype with $(…), etc.
$('someid').hide();
</script>
03 мая 2011 в 16:15
Что-то не работает.От jquery мне необходимо jquery Lightbox, a от mootools — тени. Вот что у меня:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript"> здесь скрипт jquery а именно lightbox </script>
<script src="./shadows/mootools-1.2-core.js" type="text/javascript"></script>
<script src="./shadows/moocanvas.js"></script>
<script src="./shadows/mooCanvasShadow.js"></script>
<script type="text/javascript"> здесь скрипт mootools а именно установка тени — Moocanvasshadow</script>
Куда вставлять этот скрипт, который предотвращает конфликт?
04 мая 2011 в 6:37
для начла попробуйте обединить все спецэффекты
т.е. код такой:
<script src="./shadows/mootools-1.2-core.js" type="text/javascript"></script>
<script src="./shadows/moocanvas.js"></script>
<script src="./shadows/mooCanvasShadow.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function($){
$("div").hide(); //здесь скрипт jquery а именно lightbox
});
// Для Mootools $(…)
$('someid').hide(); //здесь скрипт mootools — Moocanvasshadow
</script>
28 мая 2011 в 18:01
Я вот тоже не совсем понимаю как это реализуется, вина тому по видимому почти нулевые знания javasript-а. У меня задача следующая: реализовать одновременную работу сss-табов, которые вспомогательно реализуются через jquary библиотеку следующим образом:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
Т..е способ скрытия вкладок-табов. Все прекрасно работает, благо html-сss хорошо знаю, но вот понадобилось на этой странице подключить mootools библиотеку, которая отвечает за плавное отображение картинок с текстом и тут возник конфликт между двумя инструментами. В итоге галерея на mootools работает а табы нет.
Пробовал третий вариант, но не могу понять что именно добавлять в $('someid').hide(); пробовал добавлять id ссылок, которые отвечают за работу табов, но в таком случае табы работают а mootools -галерея нет.
28 мая 2011 в 20:13
туда надо вставлять то, что должен делать mootools
29 мая 2011 в 1:09
Спасибо, уже разобрался как сделать.
29 июня 2011 в 18:55
А как подружить с этим зверем fancybox?
30 июня 2011 в 10:18
кого с кем дружить будем? fancybox — на jquery, так что читаем инструкцию и радуемся
16 сентября 2011 в 19:10
Давно искал в интернете способ совмещения работы Mootools и jQuery, но ничего полезного не нашел. Хорошо, что попался Ваш блог. Попробую сделать как написано в посте.
18 октября 2011 в 6:33
Огромнейшее человеческое спасибо
07 ноября 2011 в 11:03
Подскажите, пожалуйста, почему, когда я ввожу jQuery.noConflict() — у меня перестаёт работать jQuery . По идее, ведь так не должно быть. Когда убираю — опять работает. Вот мой кусочек кода:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider').nivoSlider();
});
</script>
В такой конструкции работает, а:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery('#slider').nivoSlider();
});
</script>
Уже не работает. Не пойму в чем дело.
07 ноября 2011 в 11:46
Внимательность — наше все
В вашем случаи надо:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('#slider').nivoSlider();
});
// дальше код mootools
</script>
Должно работать.
07 ноября 2011 в 14:04
С кодом Mootools тоже пробовала — не работает. И не понятно-то, почему без Query.noConflict() — скрипт jquerly работает, а вместе нет.
Пришлось заворачиваться и делать все (как мне кажется) не совсем правильно:
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/script.js"></script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery.nivo.slider.js"></script>
<script type="text/javascript" src="<?php echo $templateUrl; ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slider').nivoSlider();
});
</script>
Т.е., 2 раза объявляю jquerly — но это как-то тупо. Но, работает. По-другому — никак.