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:

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

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:

<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>

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.

<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>

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:

<%= draggable_element ‘idOne’, :revert => true,
:zindex => -1 %>

Technorati Tags: , , , , , ,

Related posts:

  1. Simply Helpful Rails Plugin
  2. JavaScript FX
  3. Rails Google Maps Plugin
  4. Riff Rails Plugin
  5. High Rolling With Rails
  6. Top 11 Rails Plugins


One Response to “Scriptaculous Rails”

Leave a Reply