Scriptaculous Rails

The script.aculo.us JavaScript library is ridiculously simple, and Ruby on Rails makes using it just as simple. Ruby on Rails provides a view helper visual_effect method which can be used in any event, such as an onclick event. Here is an example of the rails visual_effect helper method in action:

[source:html]
<%= content_tag ‘DIV’, ‘Hello, World’, :id => ‘msg’ %>
<%= content_tag ‘DIV’, ‘Click Here’,
:onclick => visual_effect(:highlight, ‘msg’, :duration => 1.0) %>
[/source]

In the above example, when the user clicks where indicated the Hello, World message will highlight for a second. You can also group a series of effects by wrapping them in a SCRIPT tag such as the following opacity effects:

[source:html]
<SCRIPT type=”text/javascript”>
<%= visual_effect :opacity, ‘idOne’, :duration => 2.0,
:from => 1.0, :to => 0.5 %>
<%= visual_effect :opacity, ‘idTwo’, :duration => 2.0,
:from => 1.0, :to => 0.5, :transition => ‘Effect.Transitions.wobble’ %>
</SCRIPT>
[/source]

In addition to the highlight and opacity effects, script.aculo.us and the visual_effect helper method supports the following combination effects: fade, appear, puff, blindUp, blindDown, switchOff, dropOut, shake, slideDown, slideUp, squish, grow, shrink, pulsate, and fold.

The combination effects listed above support the duration and delay options.

[source:html]
<SCRIPT type=”text/javascript”>
<%= visual_effect :fade, ‘idOne’, :duration => 5.0,
:delay => 5.0 %>
<%= visual_effect :puff, ‘idTwo’, :duration => 1.0,
:delay => 5.0 %>
</SCRIPT>
[/source]

You can also cut and paste effects submitted by script.aculo.us users and the visual_effect will also work for those effects.

Script.aculo.us also has some great drag and drop controls. To make a DIV element draggable use code similar to the following:

[source:html]
<%= draggable_element ‘idOne’, :revert => true,
:zindex => -1 %>
[/source]

Technorati Tags: , , , , , ,


One Response to “Scriptaculous Rails”

Leave a Reply