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();
});
});Ya con jQuery, lo mismo se realiza de la siguiente manera:
$().ready(function(){
$('#jMuestra').hide();
$('#jEsconde').click(function(){
$('#jMuestra').slideToggle();
});
});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();
});
});
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.
Rodrigo
26 / Enero / 2009
ivanfc0o
01 / Febrero / 2009
Jorge Epuñan
02 / Febrero / 2009
stock
16 / Febrero / 2009
pakos
16 / Abril / 2009
cabeto
12 / Mayo / 2009
enver
28 / Septiembre / 2009
Guillermo
16 / Octubre / 2009
Covi
17 / Abril / 2010
lumbreras
05 / Mayo / 2010
Jorge Epuñan
05 / Mayo / 2010
lumbreras
05 / Mayo / 2010
pablo
14 / Agosto / 2010
jose
30 / Julio / 2011
FEderico
22 / Agosto / 2011
lobox
07 / Diciembre / 2011
Greivin
24 / Enero / 2012
Daniel Gámez
07 / Marzo / 2012
Adriana
25 / Marzo / 2012
Claudia
06 / Agosto / 2012
claudia
06 / Agosto / 2012