jQuery sin conflictos

26/ene/2009 24

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

Comentarios

  1. Rodrigo [#]

    Muy bueno, yo nunca he probado Mootools.

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

  2. Enlaces del 01/27/09 | evelio.info [#]

    [...] jQuery sin conflictos por Jorge Epuñan [...]

  3. Enlaces del 27/01/09 | evelio.info [#]

    [...] jQuery sin conflictos por Jorge Epuñan [...]

  4. ivanfc0o [#]

    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.

  5. Jorge Epuñan [#]

    @ivanfc0o, noConflict(); tambien puede ser utilizado con versiones anteriores del propio jQuery por ejemplo si quieres actualizar tu sitio q usa la version 1.x a 1.3+ pero solo determinada funiconalidad… muchos plugins la estan implementando para mayor retro-compatibilidad.

  6. stock [#]

    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

  7. pakos [#]

    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 …

  8. cabeto [#]

    fantastico resolvi mi problema… gracias!!!

  9. enver [#]

    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 ….

  10. Guillermo [#]

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

  11. Covi [#]

    @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 ;)

  12. lumbreras [#]

    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 :)

  13. Jorge Epuñan [#]

    lumbreras: depende mucho de lo q estes haciendo; por librerias me refiero a tener jQuery, Mootools o Prototype para crear efectos por ejemplo. En este articulo se trata de esa manera.

    Ahora, si tienes un lightbox y un slideshow utilizando una misma libreria (la q sea) no deberias tener problemas, salvo si cada una utiliza diferentes versiones de la misma (por ej. lightbox para Mootools 1.1 y slideshow para Mootools 1.2 q tienen bastantes diferencias.). en ese caso la tecnica de este articulo tb aplica. Pero trata de siempre utilizar una misma version, busca otro slideshow u otro lightbox con la misma version para q no tengas ese problema.

    Suerte.

  14. lumbreras [#]

    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 :)

  15. pablo [#]

    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?

  16. jose [#]

    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

  17. FEderico [#]

    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

  18. lobox [#]

    Excelent… muy claro el ejemplo… Gracias!

  19. Greivin [#]

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

  20. Daniel Gámez [#]

    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.

  21. Adriana [#]

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

  22. Claudia [#]

    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

  23. claudia [#]

    el código es este

    El codigo j query es

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

  24. Rares [#]

    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();
    });

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab