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 DEMOCuando 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
$(".desplegable").hide();
//toggle the componenet with class desplegable
$(".desplegador").click(function(){
$(this).next(".desplegable").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(".desplegable").hide();
//toggle the componenet with class desplegable
jQuery(".desplegador").click(function(){
jQuery(this).next(".desplegable").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í.
