script.aculo.us guía rápida - Parte 1

De ello hemos comentando en algunos artículos anteriores, sin embargo vamos a enfrascarnos un poquito mas. script.aculo.us es una colección de librerías en javascript que ayuda al desarrollar web agregar funcionalidades AJAX a sus proyectos, muchos sitios en internet hacen uso de está excelente herramienta, como por ejemplo: Gucci, Digg, Apple, fluxiom, Basecamp, Shopify, Blinksale, Backpack, Feedburner, Mailroom, Ruby on Rails y muchas mas.

Este artículo es una referencia o guía rapida para iniciarnos en script.aculo.us: mostraremos su instalación y los efectos que podemos usar.

Instalacion

Descargamos script.aculo.us (usamos aqui la versión 1.6.4) y lo descomprimimos. Ahora ubicaquemos los archivos prototype.js, scriptaculous.js y effects.js para referenciarlos en nuestra página HTML (en este caso lo ubicamos en una carpeta "js").

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>

Efectos

La librería script.aculo.us proporciona muchos efectos dinámicos. Todos estos efectos toman un conjunto de opciones o parámetros como su duración o FPS, pero en esta ocasión no especificaremos ningún parámetro, veremos solo su uso básico.

Enlace: Ejemplos de Efectos haciendo uso de script.aculo.us

Comentarios Comentarios formato RSS

  1. avatar Edgar Uriel Domínguez Espinoza 2008-06-13 20:35:45 2 Hola, espero puedas ayudarme. Tengo un código elaborado con Javascript, trate de insertar efectos de scripttaculous directamente pero al parecer el código no lo permite (por como está elaborado). Explico, para que admita un evento en AJAX hay que hacer una función de Javascript. Para los efectos he hecho una función como: "function highlight(){ new (Effect.Highlight(this)); return false; }" En el código de HTML agrego las librerías:

    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js" type="text/javascript"></script>
    <script src="js/effects.js" type="text/javascript"></script>

    Luego en el elemento hago esto:

    <h1 onclick="highlight();">Brillante Iluminación, S.A. de C.V.</h1>

    Sin embargo Firebug me devuelve este error:

    Effect is not defined
    http://localhost/RC5/js.js
    Line 107

    Que se refiere función que arriba puse. Puedes ayudarme a saber que pasa? ¿que podría hacer?

    Gracias
  2. avatar Gaby 2007-05-11 13:33:00 1 Hola! está muy bueno este artículo, he estado tratando de hacer algo similar pero la diferencia es que en vez de mover un objeto de una tabla a otra lo pueda mover a cualquier lugar de la página web como si estuviese armando un rompe cabezas, imágenes que está en una BD en MySql, sabes algo de esto?

Dejar un comentario