jQuery sin conflictos

Existen muchos beneficios al usar alguna de las librerías de javascript disponibles hoy en día (cómo han proliferado.. increíble). Facilitan escribir código y uno se concentra en mejores funcionalidades que en tratar de reinterpretar código. Y qúe decir de los efectos que cada vez vienen mejores… una delicia de utilizarlos.

Cuando uno comienza un proyecto, se suele elegir el mejor lenguaje para su desarrollo y una de las desiciones es elegir el framework JS con que se trabajará, y casarse con éste. Ahora vengo a conocer que ésta desición no tiene que ser tan drástica, ya que jQuery incluye una funcionalidad que permite que se utilice junto con otras librerías, evitando el conflicto de interpretación entre diferentes formas de escribir javascript que conforma cada framework; en esta ocasión mostraré los diferentes usos de noConflict();

Supongamos que tenemos un simple efecto de mostrar/esconder el contenido al activar un link, lo que se llama SlideToggle. El HTML sería el siguiente:

<a href="#" class="boton">Muestra/Esconde</a>
<div class="caja">
     <p>Vivamus auctor leo vel dui...</p>
</div>

En Mootools el código para hacerlo funcionar se compone de la siguiente manera:

window.addEvent('domready', function() {
     new Fx.Slide('mooMuestra').hide()
     $('mooEsconde').addEvent('click', function(e){
          e.stop();
          new Fx.Slide('mooMuestra').toggle();
     });
});

Ver ejemplo con Mootools

Ya con jQuery, lo mismo se realiza de la siguiente manera:

$().ready(function(){
     $('#jMuestra').hide();
     $('#jEsconde').click(function(){
          $('#jMuestra').slideToggle();
     });
});

Ver ejemplo con jQuery

Ahora combinaremos ambos métodos en un mismo archivo, el cual estará linkeando las librerías de Mootools 1.2.0 y jQuery 1.3.1, y se realizará SlideToggle cada una con su método. Para eso, se cambiará la manera con el cual jQuery llama a sus selectores (que es una de las principales razones de conflicto; el uso resumido con $). Primero, se linkea el framework de jQuery y luego el de Mootools. Se escriben los eventos con los cuales se realizan los SlideToggle, pero con un leve cambio en jQuery. En vez de utilizar:

$('selector').slideToggle();

se cambiará a:

jQuery.noConflict();
jQuery('selector').slideToggle();

Esto se repetirá con cada selector en que antes utilizábamos $. Finalmente reciclando el mismo código mostrado anteriormente, quedaría:

jQuery.noConflict();
jQuery().ready(function(){
     jQuery('#jMuestra').hide();
     jQuery('#jEsconde').click(function(){
          jQuery('#jMuestra').slideToggle();
     });
});

Ver ejemplo integrando jQuery+Mootools

Otra manera es creando una variable con una nueva manera de escribir $, por ejemplo, $jQ:

var $jQ = jQuery.noConflict();
$jQ().ready(function(){
     $jQ('#jMuestra').hide();
     $jQ('#jEsconde').click(function(){
          $jQ('#jMuestra').slideToggle();
     });
});

Ver ejemplo 2 integrando jQuery+Mootools

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Movimiento del browser al arrastrar en móviles

Movimiento del browser al arrastrar en móviles

Este es un comportamiento por defecto de los browsers para móviles, el cual al hacer algún tipo de arrastre extremo dentro del <body> (me refiero del extremo superior al inferior principalmente, ó si está en landscape de derecha a izquierda y viceversa) éste se mueve levemente con un efecto resorte, lo que eventualmente puede llegar [...]

Muerte a IE: nuevo plugin

Al parecer ando inspirado y con ganas de aportar más y más a la comunidad de desarrollo web del universo. Y con el afán de aumentar a los usuarios disidentes de Internet Explorer 6 y 7 (browser que también apesta), he creado un nuevo y simpático plugin que espero ayude a que más usuarios se [...]

Outlinr: a bookmarklet

Outlinr: web inspector para los pobres / web inspector for the poors Selecciona tu idioma / Select your language: English Español EN Frequently on my debugging stage (when I need to solve something within the HTML/CSS markup that is causing some conflict) I use the CSS outline property to contour the HTML elements so as [...]

  1. Muy bueno, yo nunca he probado Mootools.

    Lo que si es que preferiría usar sólo un framework antes de mezclar tanta cosa.

    Rodrigo
    26 / Enero / 2009

  2. Opino igual que Rodrigo, no mezclaría 2 frameworks. Realmente no le encuentro un sentido.

    Entiendo que hay veces que no existen plugins para jquery y para mootools sí; y es aquí cuando combinar los 2 frameworks se vuelve útil pero, prefiero ingeniar algo yo mismo en ves de usar 2 frameworks. Sinceramente.

    ivanfc0o
    01 / Febrero / 2009

  3. yo también prefiero utilizar solo una librería, pero cuando estas desarrollando algún proyecto entre varias personas, nunca falta alguien que comience a meterle las librerías que se le antojan, es por esto que jQuery es una de mis favoritas, por la forma en cómo maneja el namespace.

    saludos

    stock
    16 / Febrero / 2009

  4. Nee.. no me gustan los frameworks.. son para crear software Industrial!.. le quitan todo el sabor a la programacion, que wueba, programar sin un reto! que es lo sabraso de la programación.. pero bueno hay que industrializar!.. y prefiero construir mis librerias …

    pakos
    16 / Abril / 2009

  5. fantastico resolvi mi problema… gracias!!!

    cabeto
    12 / Mayo / 2009

  6. hola brother si que eres bueno.. en lo que haces..me ayudo mucho tu explicacion..ya lo habia encontrado esta solucion en otro lado pero aqui lo entendi a la perfeccion eres grande ….

    enver
    28 / Septiembre / 2009

  7. gracias por la explicación muy clara, me sirvio para resolver mi problema, eres grande amigo, saludos desde Argentina

    Guillermo
    16 / Octubre / 2009

  8. @pakos …me ahorraré otras impresiones que tengo de tu comentario aunque vamos…
    no te ofendas pero no tienes ni idea de MooTools hablando de esa manera.
    Ni la más remota idea.

    Por otra parte, yo tampoco soy muy amigo de usar varios frameworks para lo mismo. La ventaja de MooTools es que extenderlo tú mismo, en mi opinión, es mucho más fácil, o mejor dicho connatural al lenguaje.

    Un saludo ;)

    Covi
    17 / Abril / 2010

  9. Ok, y en el caso de querer tener 2 librerias, como por ejemplo un slideshow y un lightbox, como aplico esta solucion, ya que el problema que tengo y que me esta presentando es que en la pagina donde uso lightbox no deja funcionar el slideshow, se sobrepone y lo inhabilita, solo sigue fucionando lightbox, te agradeceria mucho tu ayuda :)

    lumbreras
    05 / Mayo / 2010

  10. Pues muchas gracias por tu respuesta, no había pensado en eso de la versión, y es que el lightbox, usa prototype, scriptaulous y la versión de jQuery, pero creo que debo hacer algo por ahí que me funcione más simple, gracias, y es que apenas estoy aprendiendo así que aun me pierdo :)

    lumbreras
    05 / Mayo / 2010

  11. muchachos estoy tratando de usar colorbox.js y s3Slider.js pero tengo un problema, ya que no me funciona los slide des3Slider.js el otro anda bien. alguna sugerencia?

    pablo
    14 / Agosto / 2010

  12. Hola me gusta el tema de las web pero tengo 0 experiencia en programación, bueno lo importante es q he probado integrar cosas con mootools y jquery pero me generaba problema hay aplicaciones interesantes para combinar y limitarse a usar un sola es frustrante y un poco simplista, sin el animo de ofender a nadie. Muchas veces eso hace la diferencia en un innovador

    jose
    30 / Julio / 2011

  13. Hola amigos, quizá uds. puedan ayudarme…estoy sacando canas azules con Jquery y Lighbox…como puedo hacer q funcionen las dos….?¿?!! pleaseeeeee
    aqui les paso el link del conflicto http://www.billeneyasociados.com/web/servicios.php

    FEderico
    22 / Agosto / 2011

  14. Excelent… muy claro el ejemplo… Gracias!

    lobox
    07 / Diciembre / 2011

  15. Gracias amigo por tu forma de explicarlo, me has salvado el pellejo. jaja Mucha Gracias

    Greivin
    24 / Enero / 2012

  16. Muchísimas gracias por tu explicación tan clara… todos decían “pon la función” pero no especificaban con ejemplos tan claros como el tuyo. Mil gracias te agradezco en gran manera, me sacaste de un apuro. Saludos.

    Daniel Gámez
    07 / Marzo / 2012

  17. Muchas gracias por tu explicación. Me ayudó a resolver mi problema.

    Adriana
    25 / Marzo / 2012

  18. Tengo una plantilla que utiliza banners que cambian con este código jquery:

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    Al intentar hacer una galería de imagenes con un lightbox, no me funciona. Le inserte una peque ña variable, que es esta: var a = jQuery.noConflict();., y aún así, no me funciona. ¿Que hago?

    Gracias

    Claudia
    06 / Agosto / 2012

  19. el código es este

    El codigo j query es

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    claudia
    06 / Agosto / 2012

  20. Tengo un problema con este código que se compone de un slider y fancybox el problema que tengo es que fancybox funciona mientras el slider se queda trabado sin pasar las fotos no se si mediante jQuery no conflict la variable pueden funcionar los dos sin ningún conflicto por que me gustaría que los dos funcionen. Me gustaría saber si hay una solución a esto y cual seria.

    jQuery.noConflict();
    jQuery(function(){
    jQuery(‘#slider-id’).liquidSlider();
    });

    jQuery(document).ready(function(){
    jQuery(“.fancybox”).fancybox();
    });

    Rares
    27 / Febrero / 2014

  1. [...] jQuery sin conflictos por Jorge Epuñan [...]
    Enlaces del 01/27/09 | evelio.info
  2. [...] jQuery sin conflictos por Jorge Epuñan [...]
    Enlaces del 27/01/09 | evelio.info

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 7 veces
Cargando