Como evitar conflictos entre Mootools y jQuery

Beware: This post was published 7 years ago and its content may be outdated.

No sé a vosotros, pero a mí trabajar con frameworks me facilita mucho la cosa, ya que no sé mucho de javascript y puedo lograr bonitos efectos sin tener que invertir mucho tiempo.

El último trabajo que he realizado con frameworks de javascript ha sido en el diseño de este blog.

WordPress utiliza jQuery para algunas funciones, y yo personalmente prefiero Mootools. Esta vez he decidido usar ambos, y el principal problema que he encontrado han sido los conflictos entre ambos.

Para evitar tener que usar solo un frameworks, podemos recurrir a una función que nos permitirá usar ambos, la función jQuery.noConflict().

¿Qué hace esta función? Hace que en lugar de usar el caracter $ en las funciones, usemos jQuery, evitando así los conflictos entre ambos frameworks.

Un ejemplo: Si antes teníamos este código javascript (obviamente incompatible con Mootools):

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide_top-sidebar").slideToggle("slow");
$("#slide_top-subsidebar").slideToggle("normal");
});
$("#slide_top-sidebar").css({ display: 'none', });
$("#slide_top-subsidebar").css({ display: 'none', });
});

Para hacerlo compatible con Mootools añadiremos la función jQuery.noConflict() y cambiaremos las $ por jQuery, dejando así el código javascript:

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".btn-slide").click(function(){
jQuery("#slide_top-sidebar").slideToggle("slow");
jQuery("#slide_top-subsidebar").slideToggle("normal");
});
jQuery("#slide_top-sidebar").css({ display: 'none', });
jQuery("#slide_top-subsidebar").css({ display: 'none', });
});

Sencillo, ¿verdad?