Scriptaculous Rails

By TechKnow | August 12, 2006

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

Enjoy. Share. Be Happy.
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer
  • spacer

Related posts:

  1. Simply Helpful Rails Plugin
  2. JavaScript FX
  3. Riff Rails Plugin
  4. High Rolling With Rails
  5. Graphs Rails Plugin

This entry was posted in JavaScript, Ruby, TechKnow. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Trackback

  1. By Mark’s Link Blog » links for 2008-04-04 on April 4, 2008 at 1:35 am

    [...] Juixe TechKnow ยป Scriptaculous Rails (tags: scriptaculous rails ajax rubyonrails javascript) [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*
  • Blogroll

    • A Rubyist Railstastic Adventure
    • Couture Central
    • Happy Coder's Daily Digest
    • Intentionally Untitled
    • Juixe Software: Freshly Squeezed Code
    • Juixe Software: Technical Store
    • Travel Blizzard
    • TweetYo: Celebrity Twitter
  • What I'm Doing...

    • Space Invader: twitpic.com/370l78 3 weeks ago
    • Instead of trying to build a better mousetrap why not put your efforts to build a better mouse? 3 weeks ago
    • What is the the "Hello, World" equivalent of entrepreneurship? Lemonade stand? T-shirt business? Blog network? 3 weeks ago
    • Competition makes everyone better. 3 weeks ago
    • Current success often hampers future success. 3 weeks ago
    • More updates...

    Posting tweet...

  • Categories

    • TechKnow (574)
      • Books (23)
      • CMS (5)
      • Conference (105)
      • CSS (10)
      • Design (12)
      • DotNET (13)
      • Gadgets (3)
      • HTML/XML (38)
      • IDE (31)
      • Java (170)
      • JavaScript (48)
      • Mac (9)
      • PHP (10)
      • Programming (195)
      • Python (1)
      • Rant (122)
      • Ruby (137)
      • Social (1)
      • SQL (22)
      • Startup (1)
      • Tools (72)
      • Visual Basic (14)
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.