jQuery и mootools вместе

Опубликовал Grassmester | Дата: 15 Июнь 2010

Недавно встала передо мной задача – использовать на одной странице два плагин, один для jQuery, другой для mootools, следовательно, нужно было подружить эти две библиотеки. Решение было найдено, решил поделиться, т.к. в рунете информации не нашёл.

Вообще в чём суть конфликта? В том, что и jQuery и mootools используют для вызова функции $, в итоге мы получаем конфликт, а следственно отсутствие работы.

Решение вопроса довольно простое,  переопределим способ вызова функции, благо ничего нам не мешает этого сделать, т.к. разработчики jQuery с расчётом на подобную ситуацию сделали функцию jQuery.noConflict(); которая нам поможет сделать переопределение.

Вариант первый

Переопределяем функцию вызова. Теперь плагины jQuery будут работать не через $(…), а через jQuery(…).

  1. <html>
  2.  <head>
  3.    <script src="mootools.js"></script>
  4.    <script src="jquery.js"></script>
  5.    <script>
  6.      jQuery.noConflict();
  7.      jQuery(document).ready(function(){
  8.        jQuery("div").hide();
  9.      });
  10.  $('someid').hide();
  11.    </script>
  12.  </head>
  13.  <body></body>
  14.  </html>

Естественно в самих плагинах нужно заменить $( на jQuery(

Вариант второй

В данном случае переопределяем функцию вызова jQuery через $j (можете использовать любую свою переменную)

  1. <html>
  2.  <head>
  3.    <script src="mootools.js"></script>
  4.    <script src="jquery.js"></script>
  5.    <script>
  6.      var $j = jQuery.noConflict();
  7.        $j(document).ready(function(){
  8.        $j("div").hide();
  9.      });
  10.     $('someid').hide();
  11.    </script>
  12.  </head>
  13.  <body></body>
  14.  </html>

Вариант третий

Самый компактный вариант из трёх. Отличие от предыдущих в том, что данный способ не переопределяет функцию вызова.

  1. <html>
  2.  <head>
  3.    <script src="mootools.js"></script>
  4.    <script src="jquery.js"></script>
  5.    <script>
  6.      jQuery.noConflict();
  7.        $("div").hide();
  8.      });
  9.      $('someid').hide();
  10.    </script>
  11.  </head>
  12.  <body></body>
  13.  </html>

Собственно это всё, воспользоваться можно любым из трёх способов, и ваша страница сможет работать с плагинами mootools и jQuery одновременно.

Связка jQuery и Prototype (и т.п. библиотеки) реализуется аналогичным способом.

У этого поста два спонсора:  Seo Блог, который расскажет вам о собственно о seo и раскрутке сайта, и блог парня, который пытается заработать в интернете и рассказывает про заработок на блоге другим.

Успехов, удачи вам в нелёгком программерском деле ;) .

Google Buzz Vkontakte Facebook Twitter Ваау! News2.ru SMI2 Google Bookmarks Digg I.ua Закладки Yandex Linkstore Myscoop Webmarks Ruspace Linkomatic Reddit delicious Technorati Slashdot Yahoo My Web БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong
Запись опубликована в рубрике Программинг с тэгами , Оставить комментарий или trackback:Trackback URL.

Оставить комментарий

Ваш e-mail никогда не будет опубликован или передан третьим лицам. Обязательные поля отмечены *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Рубрики

  • Облако тегов

  • Популярные записи

  • Пузомерки