Un día te despiertas por la mañana, enciendes la computadora y mientras navegas descubres un menú con un efecto tan espectacular y soberbio que te alegra el día con la ilusión de verlo engalanando tu blog, así que pones manos a la obra, agregas códigos por aquí por allá y de repente... ¡Diablos, el menú no funciona!
Con el ánimo decaído investigas un poco y te enteras que jQuery no funciona con Scriptaculous. Y ahí acabo el entusiasmo del día.
Y sí, es un hecho a medias que si usas jQuery no puedes usar Scriptaculous o viceversa. Y más que un problema de incompatibilidad lo que sucede es que ambos usan la misma sintaxis para llamar a las funciones del script, esto hace que ambas librerías no sepan a quién hacerle caso pues las dos usan la misma forma de leer esas instrucciones.
Sin embargo jQuery soluciona esto desde la versión 1.0 usando una variable en la sintaxis, esto es para que no entren en conflito ambas librerías y se pueda usar jQuery aun cuando se tenga Scriptaculous, Prototype o Mootools en el blog.
Para aplicar esta variable necesitamos hacer uso del comando
jQuery.noConflict();Por ejemplo, un código que use jQuery se vería similar a este:
<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de algún script que necesita jQuery" type="text/javascript" />
<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
});
</script>
Lo que hacemos ahora es agregar antes de las instrucciones del script el comando
jQuery.noConflict(); y además cambiaremos todos los
$ que encontremos por la palabra
jQueryPor ejemplo:
<script src="URL del archivo jQuery" type="text/javascript" />
<script src="URL de algún script que necesita jQuery" type="text/javascript" />
<script src="" type="text/javascript" />
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>
Y habiendo hecho eso jQuery podrá usarse sin problemas aun cuando tengamos otra librería de scripts en el blog.
Vemos un ejemplo más preciso, el de
arrastrar imágenes con jQuery.
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudadblogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>
<script type="text/javascript">
$(function(){
$("#easydrag1").easydrag();});
</script>
Ese sería el código común que utilizaríamos, pero si aplicamos el "parche" para que funcione con Scriptaculous entonces el código sería así:
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>
<script src='http://ciudadblogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function(){
jQuery("#easydrag1").easydrag();});
</script>
Y de esta forma podrías usar el
arrastrar imágenes con Scriptaculous, y
arrastrar imágenes con jQuery al mismo tiempo.
O bien, otro ejemplo. Veamos cómo sería el código normal del
menú deslizante arriba del blog.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");
});
// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});
// Switch buttons from "Abrir menú" to "Cerrar menú" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});</script>
Y así sería si aplicamos el truco para que funcione también con Scriptaculous.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function() {
// Expand Panel
jQuery("#open").click(function(){
jQuery("div#panel").slideDown("slow");
});
// Collapse Panel
jQuery("#close").click(function(){
jQuery("div#panel").slideUp("slow");
});
// Switch buttons from "Abrir menú" to "Cerrar menú" on click
jQuery("#toggle a").click(function () {
jQuery("#toggle a").toggle();
});
});</script>
En resumen, agregamos la función
jQuery.noConflict(); y cambiamos todos los
$ por
jQueryDe esta forma en la gran mayoría de los casos podrás usar jQuery y Scriptaculous al mismo tiempo sin resignarte a elegir uno u otro.
