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: ruby, rubyonrails, rails, script.aculo.us, javascript, web2.0, web design
Related posts:
One Trackback
[...] Juixe TechKnow ยป Scriptaculous Rails (tags: scriptaculous rails ajax rubyonrails javascript) [...]