RJS templates

Desde la versión 1.1 de Rails, contamos con las plantillas RJS. Si alguien se pregunta en qué consisten, la definición más clara es: “JavaScript written in Ruby”, pues eso, JavaScript escrito en Ruby. Nos resultará de gran utilidad cuando trabajamos con AJAX, ya que nos permite modificar múltiples elementos de una página como respuesta a una llamada AJAX.

Métodos RJS

< <	< <(javascript)
Escribe Javascript sin procesar en la página.
alert	alert (mensaje)
Muestra un cuadro de diálogo con el mensaje dado.
assign	assign (variable, valor)
Asigna a la variable JavaScript el valor dado.
call	call (funcion, *argumentos)
Llama a una función JavaScript, opcionalmente puede pasar argumentos.
delay	delay (segundos)
Ejecuta el contenido del bloque, pasado el tiempo indicado en segundos.
draggable	draggable (id, opciones = {})
Crea un elemento arrastrable script.aculo.us. Ver ActionView::Helpers::ScriptaculousHelper para más información.
drop_receiving	drop_receiving (id, opciones = {})
Crea un elemento receptor del arrastre script.aculo.us. Ver ActionView::Helpers::ScriptaculousHelper para más información.
hide	hide (*ids)
Oculta los elementos DOM visibles, cuyos ids se han dado.
insert_html	insert_html (posición, id, *opciones_para_renderizar)
Inserta código HTML en una posición dada relativa al elemento DOM identificado por el id dado. Las posiciones pueden ser las siguientes: :top El HTML se inserta dentro del elemento, antes del contenido existente en el elemento. :bottom El HTML se inserta dentro del elemento, después del contenido existente en el elemento. :before El HTML se inserta precediendo al elemento. :after El HTML a continuación del elemento. Las opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.
redirect_to	redirect_to (posición)
Redirecciona el navegador a la posición indicada, de igual manera que url_for.
remove	remove (*ids)
Suprime de la página los elementos DOM cuyos ids se han dado.
replace	replace (id, *opciones_para_renderizar)
Remplaza el HTML generado por el elemento DOM (esto es, el elemento entero, no solo su contenido) por el del id dado. *opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.
replace_html	replace_html (id, *opciones_para_renderizar)
Remplaza el HTML interno del elemento DOM por el del elemento dado. *opciones_para_renderizar pueden ser cualquier cadena HTML a insertar, o un “hash” de opciones para ActionView::Base#render.
select	select (patrón)
Retorna una referencia de la colección buscándola a través de un patrón CSS en el DOM. Esta colección puede usarse por futuras llamadas del método.
show	show (*ids)
Muestra los elementos DOM ocultos cuyas ids se han dado.
sortable	sortable (id, options = {})
Crea un elemento “ordenable” de script.aculo.us. Resulta útil para reconstruir elementos “ordenables” después de que los elementos hayan sido agregados o suprimidos. Ver ActionView::Helpers::ScriptaculousHelper para más información.
toggle	toggle (*ids)
Modifica el estado de visibilidad de los elementos de DOM cuyas ids se han dado.
visual_effect	visual_effect (nombre, id = nil, opciones = {})
Inicia un efecto visual de script.aculo.us Listado de efectos. Ver ActionView::Helpers::ScriptaculousHelper para más información.
[]	[] (id)
Retorna una referencia al elemento mediante la búsqueda de su id en el DOM.Este elemento puede usarse para futuras llamadas del método.

fuente: Ruby on Rails Manual

NOTA: No puede existir en el mismo directorio ningún fichero “.rhtml” con el mismo nombre que asignemos al fichero “.rjs”

Efectos visuales de script.aculo.us (por categorías)

Sintaxis básica: Effect.NombreEfecto(’id_DOM’)
Sintaxis con opciones: Effect.NombreEfecto(’id_DOM’,{opción: valor, opción: valor})

NOTA: Todos los efectos fx disponen de opciones por defecto.

Efectos de entrada y salida

Effect.Appear / Effect.Fade

Effect.BlindUp / Effect.BlindDown

Effect.SlideUp / Effect.SlideDown

Effect.Grow / Effect.Shrink

Efectos de salida

Effect.DropOut

Effect.Fold

Effect.Puff

Effect.Squish

Effect.SwitchOff

Effect.toggle

Efectos de resaltado

Effect.Highlight

Effect.Opacity

Effect.Pulsate

Effect.Parallel

Effect.Scale

Effect.ScrollTo

Effect.Shake

Otros

Effect.Move

Effect.MoveBy

Effect.KeepFixed

Effect.Queues

Effects.TreasureChest

fuente: scriptaculous

NOTA: Listado a fecha: 14/08/06

NOTA: Tres ejemplos de acceso a efectos “scriptaculous” desde un fichero “rjs”.