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 jQuery
Por 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'/>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://ciudadblogger.googlecode.com/files/jquery.easydrag.js' type='text/javascript'/>
<script type="text/javascript">
$(function(){
$("#easydrag1").easydrag();});
</script>
<script src='http://code.jquery.com/jquery-1.4.2.min.js' type='text/javascript'/>Y de esta forma podr?as usar el arrastrar im?genes con Scriptaculous, y arrastrar im?genes con jQuery al mismo tiempo.
<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>
 |  |
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 jQuery
De 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.
No comments:
Post a Comment