Mostrando entradas con la etiqueta scriptaculous. Mostrar todas las entradas
Mostrando entradas con la etiqueta scriptaculous. Mostrar todas las entradas

martes, 15 de julio de 2008

Drag and drop usando Scriptaculous (1) - Vagabundia


Drag and drop usando Scriptaculous (1)

JMiur



Una de las tantas posibilidades de script.aculo.us es el uso de las funciones de Drag and Drop. No es algo que tenga una gran utilidad práctica pero es bastante sencillo de usar.

Para probarlas, debemos seguir el mismo procedimiento que con los efectos; descargar las librerías, alojarlas en un servidor propio y cargarlas en nuestra plantilla. Empecemos con esto ya que es una pregunta repetida y hay varias alternativas.

Si no tenemos nada, debemos de empezar descargando el ZIP que contiene todos los archivos necesarios y luego alojarlos en un servidor propio. Como mínimo, necesitaremos los siguientes scripts:
prototype.js
scriptaculous.js
effects.js
dragdrop.js
el resto son optativos; cada uno de ellos se utiliza para poder implementar funciones especiales (builder.js, controls.js, slider.js, sound.js).

Los agregamos a la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_prototype.js"></script>
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>
Si ya tenemos alguno de los módulos en uso, por ejemplo porque usamos LightWindow, basta agregar dragdrop.js en la llamada:
<script type="text/javascript" src="URL_scriptaculous.js?load=effects,dragdrop"></script>
Una segunda alternativa si nos queremos ahorrar el trabajo de alojar los archivos es utilizar las librerías de Google. Este es el método más sencillo si se trata de hacer pruebas rápidas ya que basta agregar antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("prototype", "1.6.0.2");
google.load("scriptaculous", "1.8.1");
</script>
De esta manera se cargarán todos los módulos que existan.

Una última posibilidad es usar Protoculous que es una librería comprimida y que en un solo archivo nos permite usar todas las funciones [más información]

Bueno, ahora que ya tenemos los scripts, vamos a ver como funcionan.

Para hacer que un elemento sea "arrastrable" basta crearlo con la clase Draggable e identificarlo utilizando el atributo ID. La sintaxis general es esta:

new Draggable(elemento);

Suena complicado pero no lo es, bastan dos líneas de código; por ejemplo:
<div id="demo"> [ ... el contenido ... ] </div>
<script type="text/javascript"> new Draggable('demo'); </script>
Este es un ejemplo sencillo usando un DIV donde sólo hay un texto:

La palabra MOVER se puede arrastrar.


<div style="text-align: center;font-size:17px;">
La palabra
<span id="demo1" style="color:#FF0000;font-weight:bold;cursor:move;">MOVER</span>
se puede arrastrar.
</div>
<script type="text/javascript">new Draggable('demo1');</script>

MOVER
Lo mismo podríamos hacer con una imagen, un DIV o cualquier otro elemento siempre que le demos un ID único.


<img id="demo2" src="URL_imagen"/>
<script type="text/javascript">new Draggable('demo2');</script>

En todos los casos, basta colocar un script después del elemento pero también podemos agregarle algunas opciones para controlarlo:
<script type="text/javascript">
new Draggable(IDelemento, opciones);
</script>


MOVER
revert (por defecto es false) si la establecemos como true el elemento vuelve a su posición original cuando lo soltamos (eventualmente, también puede ser otra función):

new Draggable('demo', {revert:true} );


MOVER
snap (por defecto es false) hace que el objeto se mueva dentro de una cierta grilla es decir, "saltando" canda cierta cantidad de pixeles. Para esto usamos [x, y] si queremos indicar ambos:

new Draggable('demo', {snap: [100, 50]} ); se mueve cada 100 pixeles horizontales y 50 pixeles verticales


zindex (por defecto es 1000) indica la propiedad CSS z-index del elemento cuando lo arrastramos; esto hace que aparezca "por encima" de todos los otros elementos de la página; al soltarlo vuelve a tener su valor normal.


MOVER
ghosting (por defecto es false) indica si el elemento original se verá o no mientras lo arrastramos. Para verlo debemos poner el valor en true:

new Draggable('demo', {ghosting:true} );


constraint es una de las formas en que podemos limitar el desplazamiento y por defecto no está definida. Hay dos posibilidades:

new Draggable('demo', {constraint:"horizontal"} );
new Draggable('demo', {constraint:"vertical"} );


MOVER
handle normalmente, a un elemento lo arrastramos desde si mismo, es decir, haciendo click sobre él pero podemos usar esta opción para indicar otro elemento para esto. De alguna manera, es lo que hacen muchos controles como los llamados sliders.

new Draggable('demo', {handle:'barraDesplazamiento',constraint:'horizontal'});

LO MOVEMOS HORIZONTALMENTE CON ESTE


starteffect, endeffect y reverteffect definen funciones que podemos llamar al comenzar a arrastra un elemento o al soltarlo.

new Draggable('demo', {starteffect: unaFuncion('demo')} );
new Draggable('demo', {endeffect: otraFuncion('demo')} );


También hay una serie de funciones predefinidas o eventos (callbacks) que pueden llamarse dentro de las opciones.

onStart se ejecuta cuando comenzamos a arrastar el objeto
onDrag se ejecuta mientras arrastamos el objeto
change se ejecuta cuando cambiamos la posición original del objeto
onEnd se ejecuta cuando soltamos el objeto


MOVER
Si queremos deshabilitar un elemento, es decir, hacer que ya no sea "arrastrable" y que vuelva a su posición original debemos usar una variable para crearlo y luego, "destruirlo
var unNombre = new Draggable('demo', {revert: true});
.......
unNombre.destroy();


Una forma muy sencilla de limitar los movimientos es colocar los elementos "arrastrables" dentro de un DIV al que le damos propiedades CSS especiales para que todo lo que se salga de él, no se vea:








<div style="border:1px solid #444444; height:250px; overflow:hidden; position:relative;
margin:10px auto; width:450px;">
<img style="cursor:move; position:absolute; left:10px; top:10px;"
id="demoIMG1" src="URL_imagen1" />
<img style="cursor:move; position:absolute; left:390px; top:10px;"
id="demoIMG2" src="URL_imagen2" />
<img style="cursor:move; position:absolute; left:10px; top:190px;"
id="demoIMG3" src="URL_imagen3" />
<img style="cursor:move; position:absolute; left:390px; top:190px;"
id="demoIMG4" src="URL_imagen4" />
</div>
<script type="text/javascript">
new Draggable('demoIMG1');
new Draggable('demoIMG2');
new Draggable('demoIMG3');
new Draggable('demoIMG4');
</script>




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:

miércoles, 23 de enero de 2008

Ir al inicio pero con Scriptaculous - Vagabundia


Voy a tratar de resumir varias preguntas en una sola respuesta porque todas están relacionadas.

Utilizo un enlace del tipo IR AL INICIO con una imagen (las típicas flechitas que nos permiten subir cuando una página es muy larga) y la dejo fija de tal manera que cuando hago un scroll, siempre permanece en el mismo lugar ... pero, ocurren dos cosas: primero, no me funciona en IE y segundo, quiero repetir eso en un post y tampoco funciona.

El primer problema tiene una respuesta sencilla: algunas versiones de IE no soportan esa propiedad (position: fixed) así que no hay nada que hacer más que olvidarse del tema. Podemos elegir si queremos usarla o no, es indiferente mientras seamos conscientes de la limitación.

El segundo problema es diferente. Por lo que me muestran, usan un código de este tipo:

<a href="#">Ir al inicio</a>

Funciona bien pero siempre que esté en la plantilla. Cuando lo ponemos en un post, apenas lo editamos veremos que el código cambia a algo así:

<a href="http://www.blogger.com/post-edit.g
?blogID=XXXXXXXXXXXXXXXXXX
&postID=XXXXXXXXXXXXXXXXXXX#">Ir arriba</a>

El efecto que produce es malo; al hacer click, si estamos logueados, se abre la ventana del editor del posts ¿Es un error de Blogger?

Si y no, en realidad, es la forma en que interpreta los enlaces vacios, es decir, los que no apuntan a una dirección URL. Es más, fuera de Blogger, en una página web "normal", usar href="#" no produciría ninguno de los dos efectos. Sería lo que es, un enlace vacío; algo que usamos cuando no colocamos la acción a realizar en el atributo href sino en algún evento como onclick. Esto es lo que nos permite ejecutar scripts y la sintaxis óptima para Blogger es:

<a href="javascript:void(0);" onclick="instrucciones;return false;">ENLACE</a>

o bien

<a href="#" onclick="instrucciones;return false;">ENLACE</a>

siempre y cuando no utilicemos el modo REDACTAR en un post o lo coloquemos en la plantilla (más información).

Bueno, ¿y entonces?

En cualquier parte de una página, incluyendo la plantilla o un post de Blogger, podemos usar enlaces especiales para desplazarnos de un lugar a otro dentro de la misma página sin necesidad de recargarla. A estos enlaces se los llama anclajes y tienen dos partes:

La posición se marca con el atributo name y permanece siempre oculto:

<a name="unNombre"></a>

y el enlace en si mismo (donde hacemos click) tiene esta sintaxis:

<a href="#unNombre">IR AL EJEMPLO</a>

o sea, es igual que un enlace común pero, le anteponemos el carácter #

Usando Prototype y los efectos de Scriptaculous, esto lo podemos hacer con un poco de sofisticación; por ejemplo, agregando un suave movimiento de desplazamiento.

Como en el resto de los ejemplos debemos tener ambos scripts funcionando y cargados en la plantilla:
<script src="URL/prototype.js" type="text/javascript">
<script src="URL/scriptaculous.js?load=effects" type='text/javascript">
Usarlo es muy fácil:
<a onclick='new Effect.ScrollTo("elNombre",{offset:-140}); return false' href="#elNombre">
TEXTO / IMAGEN
</a>
donde reemplazamos elNombre por el ID de algún DIV de la plantilla. Por ejemplo, para ir al inicio de una página, podríamos poner:
<a onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false' href="#outer-wrapper">
TEXTO / IMAGEN
</a>
El enlace puede ser tanto un texto como una imagen tal como he colocado en el pie de página de cada post.

Para abajo ... para arriba ... todo lo controlamos con el atributo href.

Vamos al final de la página con href="#footer-wrapper" o las etiquetas de la sidebar con href="#Label1" con un solo click.

Como los efectos de Scriptaculous sólo dependen de variables de tiempo, no importa la distancia, sea cual sea, tardaremos lo mismo; si es corta, el efecto será más lento y si es larga, será más rápido.




















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)

Correo Vaishnava

Mi foto
Correo Devocional