Utiliza jQuery & Scriptaculous... simultáneamente

Una de las preguntas que más se ha repetido en los comentarios de las entradas en las que hablo sobre la utilización de jQuery en los blogs hace referencia a la posibilidad, o más bien imposibilidad de utilizar esta librería junto a otras como Scriptaculous o Mootools.

..o no?...ver DEMO

Cuando empezamos un nuevo blog o decidimos comenzar a utilizar alguna de estas librerías Javascripts en nuestro sitio web da la sensación de que debemos elegir bien ya que en cierta manera dependerá de dicha elección lo que podamos o no podamos hacer en dicho sitio. La librería jQuery en un principio no se puede utilizar junto a otras como Scriptaculous ya que comparten selectores (que es una de las principales razones de conflicto; el uso resumido con $).

Para evitar esto, la librería 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. Me refiero a los diferentes usos de noConflict();

Veamos un simple plugin de jQuery para mostrar y ocultar contenido:


<script type='text/javascript'>
$(document).ready(function(){
//hide the all of the element with class desplegable
$(&quot;.desplegable&quot;).hide();
//toggle the componenet with class desplegable
$(&quot;.desplegador&quot;).click(function(){
$(this).next(&quot;.desplegable&quot;).slideToggle(600);
});
});
</script>


Es muy sencillo de utilizar; todas aquellas etiquetas con la clase "desplegable" se mostrarán al hacer click sobre la clase "desplegador" inmediatamente anterior. Para utilizarla, se utiliza:
<div class="desplegador">Clic para desplegar</div><div class="desplegable">Contenido oculto</div>

Clic para desplegar un ejemplo
En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días de entre semana se honraba con su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera


Ahora veamos el efecto similar con Scriptáculous:

Para ello me remito a esta entrada de Jmiur en Vagabundia en las que explica las variables del efecto Toggle con Scriptaculous.
Para agregar la llamada a la librería utilizaré la API de Google de la siguiente manera siempre antes de </head> y de la llamada a la librería jQuery (importante):


<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype", "1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>



Y para el desplegable:


<a href="javascript:void(0);" onclick="new Effect.CUAL("nombre",parámetros,opciones);return false;">Botón desplegador</a>
<div id="nombre">
... el contenido oculto...
</div>



Ahora bien, si ya utilizas la librería jQuery y colocas esto en tu blog, no funcionará. Sin embargo, y ya voy al lío si utilizamos la funcionalidad noConflict(); de jQuery de la que hablaba antes, no encontraremos ningún problema...

Utilizando jQuery y Scriptaculous simultáneamente



Vamos a aplicar noConflict() tomando como ejemplo el plugin para el desplegable con jQuery anterior, así que vamos a cambiar la manera en que jQuery llama a los selectores:


<script type='text/javascript'>
$(document).ready(function(){
//hide the all of the element with class desplegable
jQuery.noConflict();
jQuery(&quot;.desplegable&quot;).hide();
//toggle the componenet with class desplegable
jQuery(&quot;.desplegador&quot;).click(function(){
jQuery(this).next(&quot;.desplegable&quot;).slideToggle(600);
});
});
</script>


Si te fijas, en ROJO verás lo que he cambiado y añadido. Por un lado añado jQuery.noConflict(); y sustituyo todos los símbolos $ que realizan la llamada a jQuery (no al documento,ojo) por jQuery.

Además, ten la precaución de colocar antes la llamada a las otras librerías y sus correspondientes plugins y scripts, y a continuación la llamada a jQuery y sus scripts.

Claro, claro... todo esto es muy sencillo explicarlo... y también hacerlo, y si no, échale un vistazo a esta demo en el blog de pruebas, donde además de los dos efectos, tanto en jQuery como con Scriptaculous, añado la visualización de una imagen utilizando LightWindow con el .js cargado desde Google Sites.

También podrás comprobar que el resto de ejemplos del blog de pruebas sigue funcionando correctamente (después de haberles aplicado el jQuery.noConflict();).

Para utilizarlo con otros plugins y scripts tan sólo debes realizar estos cambios en la parte del script que se coloca en la plantilla y que "gobierna" sobre el archivo.js que carga el script en sí.


Subir || Bajar

17 opiniones:

TwitterBoy :

Joer... estás "sembrao" estos días jejejeje!!!

Muy interesante esto, para poder utilizar ambas librerías.

Saludos!!

José GDF :

¡Cojonudo! Todavía estoy atascado en el diseño de mi nueva plantilla pero me guardo desde ya esta entrada en los marcadores, por si necesito meter algo de scriptaculous.

Yo soy jqueriense normalmente, aunque me da rabia no poder usar cosas de otras librerías por esa incompatibilidad.

Cuando acabe mis experimentos, prometo volver aquí a contarte cómo me han ido, aunque aún tardaré un tiempo.

Gracias por compartirlo.

@

A ver, a ver... esa es la idea; lo he probado con la mayoría de scripts que utilizo de jQuery y no encuentro problema alguno. Gracias por los comentarios, chicos ;)

Vku :

yo lo conocia agregandole:
var nombrecualquiera = jQuery.noConflict();

donde nombrecualquiera es lo que ponemos en lugar de $

@

Es la misma idea, Vku, la cosa en no "confundir" con los selectores...

Gracias por el aporte!!

Vku :

un saludo ivan
hace tiempo no te veo por la radio de rosa.

@

Vku es que ni tiempo tengo... y cada vez que entro a DejotasRadio me quedo enviciado en el chat!!! jajaja...

En cuanto pueda, me paso a saludar ;)

Graciela :

pero vengo de Jmiur y me encuentro que se puede!!! se puede se puede, saber que se puede!!! jajaja...me encanta y lo voy a aplicar.
Yo soy Scriptaculiana ;) que suena horrible...besos Iván

Oloman :

¡Buena! Ya no tengo excusa para no utilizar JQuery. Cualquier día me pongo :)

@

Graciela, se puede, se puede!!! ay... esa canción... me suena... jajaja!!

Oloman a ponerse, a ponerse, seguro que tu le sacas un buen provecho ;)

Gracias, gracias!!

Y porqué escribo todo dos veces? y porqué escribo todo dos veces?

;)

Σ=o) Pau :

Ya me parecía que no estuvieras por ahí curioseando para poder ocupar las dos librerías.
Con Pizcos me convertí en jqueriana :) pero por ahora lo veré con calma para no liar todo.
Ya me ha costado volver al blog posteando y visitar como siempre y si más encima dejo la cremaaa ay nuuu! jejejeje

Por ahora seguiré mirando y ronroneando

besos ronroneados, Michifusa ^_^

@

jajaja... seamos, seamos jQuerianos, amiga Pau, lo que no quita poder utilizar algún que otro truquito de vez en cuando ;)

Saludos, Michifusa!! ;)

Quien te lo dijo... :

Amigo, puedes compartir como has hecho esta opción para dejar comentarios (desplegable, etc)??.

Gracias

Oloman :

Hola. Hoy me he decidido a colocar JQuery adicionalmente a Scriptaculous y va a ser que no...

Da igual que lo ponga tras la carga de Prototype y Scriptaculous, y da igual que lo ponga justo antes del /BODY. En cuanto coloco...
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
...y antes incluso de meter ningún truco más, deja de funcionar Scriptaculous.

¿Alguna idea de dónde meto la pata? Es que funcionar ya veo que funciona y lo único que se me ocurre es que yo uso Scriptaculous por todas partes y por eso puede ser que no haya forma de ponerlo DETRAS de todo.

@

Quien te lo dijo... disculpa, no había visto tu comentario. Es el mismo ejemplo en jQuery que utilizo en esta entrada. Tan sólo tienes que poner todo lo que quieras ocultar donde dice contenido oculto.

Oloman felicidades por la nueva plantilla de "las cosicas", perdón..."S*Ingenio Blog", se sale ;)

Sobre tu "problema" la verdad es que no sé qué puede ser. Pizcos habla del mismo tema en esta entrada y además de apuntar otra manera, similar pero igual más "global", dice que el orden no es importante... (aunque a mí sí que me daba errores según qué orden utilizase).

Podría ser lo que comentas, que te quede algún script de Sriptáculous "por debajo" aunque no esté en la plantilla...has mirado si tienes alguno que se cargue desde un widget?

Si me entero de algo nuevo sobre esto, ya te aviso... y si tu consigues resolverlo, ya contarás ;)

Saludos!!

Oloman :

Seguro que tengo alguno que se carga desde un widget, por eso lo decía. Me daré una vuelta por el post de Pizcos a ver que cuenta.
Gracias.

CHiCken :

orale :P justo lo que necesitaba, ahora se porque no me funciona el lightwindow u justo ayer lo probe y me funciono, gracias :)

Desplegar Formulario
Subir

Deja aquí tu comentario:
(y recuerda que hemos retirado los "Nofollow")

Directorios
Blogs con EÑE directorio de blogs
Enlázanos
Código +/-

Código +/-

Código +/-
 

Formulario de Contacto


Lo quieres?

Nombre*: E-Mail*:

Asunto:

Mensaje*:

¿Cuantos lados tiene un Cuadrado?*:


(Los campos marcados con * son obligatorios)