jugando con javascript

bueno, tenia tiempo sin escribir tanto javascript desde la época en que perl estaba en pañales y las paginas web dinámicas eran cosa de hacer truquitos interesantes con el javascript; pasados los años y con AJAX por delante, podemos volver a esos “jueguitos” pues el ancho de banda y el consumo de recursos lo permite; en este caso, una modificación sustancial a una clase javascript que permite drag n’ drop y un poco de estilo CSS me permitieron crear una clase javascript (orientada a objetos) que me permite implementar el arrastre y colocar de una forma facil y rapida, un ejemplo aqui:
http://www.ajaxvenezuela.com/splib/js/window/window.htm
La ventana es un simple div, con algo de estilo CSS y una sombra leve de fondo, para lograr que la capa fuera arrastrable simplemente ejecuto el siguiente codigo javascript:
var drag = dragme(“handler1”, “window1”);
El primero es el ID del div que servira de handler (es decir, de control, en este caso, la ventana solo puede ser arrastrada por la barra de titulo, no por el cuerpo); el segundo es el ID del “cuerpo” de la ventana …
si queremos mover un objeto unico (como una imagen, que esta estatica) simplemente declaramos:
var drag1 = dragme(“imgsrc”);
fijense que la ventana está confinada al area de la pantalla y no se sale de los bordes (algo practico en sistemas basados en ventanas o dialogos) y el contenido (declarado por el ID window_content) puede ser cualquier cosa, incluso una estructura DOM completa que llegue via AJAX o un IFRAME con un target especifico.
si quieren la libreria pueden bajarla de:
http://www.ajaxvenezuela.com/splib/js/drag_drop.js, requiere ademas el archivo http://www.ajaxvenezuela.com/splib/js/fade.js (para hacer la transparencia que vemos si hacen click sobre ella) y http://www.ajaxvenezuela.com/splib/js/api.js; que son una serie de funciones utiles (como un get DOM object cross-browser) entre otras.
Como todo GPL, espero mantengas mis créditos y si consigues algun bug interesante hazmelo saber (no, aun no tengo un CVS para mis funciones javascript).

Y NO!!… no funciona en Internet Explorer y ni me preocupo porq no funcione, simplemente es una opcion de usar document.all en vez del  estandar dom getElementByID y de usar AttachEvent en vez de usar el estandar w3c AddEventListener, pero bueno, no tengo un equipo con windows en mi casa asi que ni me preocupo por si corre o no en Internet Explorer (espero algun interesado en hacerlo funcionar en IE lo haga y podemos compartir los cambios).

Ha sido probado en Camino (si, tengo un equipo con Tiger truqueado), Mozilla, epiphany, konqueror, opera y firefox 1.5 y 2, con excelentes resultados (aunque un fallo en opera no me permite hacer drag n’ drop de imagenes con position static, pero ya corregiré eso).
Otra clase interesante es fade, fade tiene 2 efectos, transparencia y degradado de color, en:
http://www.ajaxvenezuela.com/splib/prueba.htm
como en el caso anterior la programacion orientada a objetos permite una facil implementacion:
var f = new fade();
f.fade_element(‘p3’);
f.fade_element(‘p1’, ‘#FF0000’); //si quieres cambiar el color predeterminado de inicio
f.intermiddle = false; //desactivo el color intermedio
f.fade_element(‘cuerpo’, ‘#808080’);

en todo caso, se puede cambiar incluso el destino final del color y el color de segunda trancision.

para el caso de las transparencias contamos con 2 funciones:
set_opacity(‘fadein’, 30);
que cambia la opacidad de un elemento cualquiera, ha sido probado en todos (excepto como ya dije en el mal mentado browser) y funciona bastante bien.

tambien hay una funcion llamada:
f.fadein_element(‘fadein’);

que me permite realizar una transicion de transparente a opaco en una cantidad de tiempo (tambien configurable)
f.duration = 2000; //en milisegundos

Como ven; hay muchas cosas que pueden hacer con javascript actualmente (y que pueden usar de una manera facil) sin tener que recurrir a  Flash o a efectos privativos (como los filter de Internet Explorer) dandonos la posibilidad (sin incurrir en excesos de peso) de contar con una aplicación web más vistosa, animada y la la vez útil y ligera.

Espero disfruten las funciones, traeré más después  …

Acerca de phenobarbital

http://about.me/phenobarbital

Publicado el 7 noviembre 2006 en Javascript, Programacion. Añade a favoritos el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: