AJAX - Como utilizar la libreria Script.aculo.us
Como muchos ya han de saber, esta nueva mezcla de javascript y xml (asincrona), llamada AJAX, que nos permite realizar cambios en una misma pagina sin necesidad de que el navegador recarge, osea que aumenta la interaccion en la pagina (algo asi tipo flash...)
Pero bueno, en este tutorial vamos a aprender a utilizar la libreria Script.aculo.us (una de las tantas que existen y con muy buenos efectos), mediante un ejemplo sencillo... no los voy a agobiar con cosas teoricas, vamos directamente a la practica.
Lo primero que necesitamos obviamente es la libreria
La pueden bajar directamente aqui:
http://script.aculo.us/downloads
Una vez que la bajaron, simplemente extraigan todo el contenido de la libreria en alguna carpeta en su maquina.
(no es necesario que se metan a checar que trae la carpeta son puras cosas de javascript y demas...)
Necesito tener Apache y demas para correr la liberia? NO, porque recuerden que es Javascript y
todo sucede del lado del Cliente (osea el navegador).
Una vez extraida la carpeta, lo que sigue es sumamente sencillo:
Creamos un archivo nuevo en la carpeta donde extraimos la libreria y pongamosle de nombre prueba.html.
1.- Abrimos nuestro archivo prueba.html y agregamos el siguiente codigo html:
COPIAR EL CODIGO FUENTE AQUI
en el archivo y listo!, pueden ver el efecto de la libreria que se llama Effect.toggle
Una de las cosas importantes aqui que tienes que tener en cuenta es el nombre de tu DIV, como puedes ver el codigo de : onclick="Effect.toggle('miefecto','slide'); return false;" y el <div id="miefecto" syle="display:none;"> basicamente aqui le estamos diciendo a la funcion Effect.toggle, que realice la accion en el DIV que tiene como id "miefecto" es muy importante que se llamen igual de lo contrario puede causar errores el codigo y no se vera el efecto.
Dentro de este DIV que le llamamos miefecto es donde podemos insertar el codigo html (o php, etc...) que queremos que aparezca.
Para Finalizar:
Para que conozcas un poco mas de los efectos que tiene esta libreria visita los ejemplos en su site
Ademas... cuando extraes los archivos del .zip tambien se agrega una carpeta que se llama TEST en esta carpeta vienen todos los efectos de la libreria listos para que los pruebes, solamente haz doble click sobre el archivo de nombre: run_functional_tests.html
* lo bueno de esto es que puedes ir probando los efectos y si te gusta alguno en especial simplemente viendo el codigo fuente del archivo en tu frame derecho, vez como se implementa el efecto!.
