Hoy te voy a enseñar a usar jQuery en sitios de Bligoo y hacer que funcionen permitiendo llevar tu sitio al siguiente nivel!
Javascript es un lenguaje que nos permite crear acciones, efectos y animaciones del código HTML para nuestros usuarios.
Existen varias librerías, también conocidas como frameworks, que nos permiten programar en javascript de una forma más fácil y rápida. En Bligoo utilizamos Prototype y Scriptaculous.
Si ya eres un poco avanzado en cuanto a programación y HTML, bien sabrás que un framework con otro no son muy compatibles y que si intentas utilizarlos al mismo tiempo, estos pueden generar un conflicto, haciendo que lo que buscamos hacer, no funcione.
A la hora de buscar cosas entretenidas para mi sitio, siempre busco códigos de javascript y por lo general encuentro algunos escritos en jQuery, pero si los pego y adapto en mi sitio no funcionan ya que Prototype y jQuery no son compatibles.
¿Por qué Prototype y jQuery no son compatibles?
Porque ambos definen una función llamada "$" que es la base de ambos frameworks y que permite ejecutar sus acciones y funciones.
El equipo de desarrollo de jQuery se dio cuenta de este problema que teníamos varios y decidió crear la función jQuery.noConflict()
¿Cuál es su gracia? ¡Todas! Hace que en lugar de usar el símbolo $ en las funciones de jQuery, usemos “jQuery”, o una variable que definamos, en su reemplazo evitando así los conflictos entre ambos frameworks.
Entonces ¿Cómo lo puedo aplicar a mi sitio en Bligoo?
Vamos a lo entretenido:
Primero debemos llamar a la librería desde nuestro sitio para poder utilizarla. Tienes dos opciones, utilizar la que se encuentra alojada publicamente en Google como esta o bajar la última versión de la librería de jQuery. Si la bajas recomiendo utilices la versión minimizada ya que pesa menos. Si decidiste bajarla debes subir el archivo a los de tu tema a través del editor.
Esta la puedes cargar en el <head> de tu sitio o justo antes de donde la vas a utilizar.
En mi caso, decidí utilizar la de Google y la dirección quedó de esta forma pegada en el <head> de mi sitio:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Luego debemos escribir la función para reemplazar el símbolo $ de jQuery, de esta forma:
<script> jQuery.noConflict(); </script>
o si quieres puedes definir una variable que utilice esta función:
<script> var j= jQuery.noConflict(); </script>
Sí, corto, simple y poderoso :)
Por último escribimos el código que queramos en jQuery y reemplazamos los $ por jQuery, o por nuestra variable.
Por ejemplo, voy a esconder el footer de mi sitio:
La función original de jQuery sería como esta:
<script> $(#main-footer).hide(); </script>
Para poder utilizarla en Bligoo esta debe quedar de esta forma:
<script> jQuery(#main-footer).hide(); </script>
Como ves no es algo muy complejo el hacer que sean compatibles. Lograr grandes resultados dependerá de tus habilidades de ninja.
Suerte y cualquier consulta me comentas.
Saludos,
Paula
el 29/11/2011 a las 13:31
Herramientas favoravbles, darán esplendides a los que saben trabajar con java. Otros solo se quedarán planos.
Paula Pronto te estaré preguntando algo importante
Saludos
Laab Akaakad.....Escritor