-
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)
- TechKnow (574)
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: ruby, rubyonrails, rails, script.aculo.us, javascript, web2.0, web design
Related posts:
- Simply Helpful Rails Plugin
- JavaScript FX
- Riff Rails Plugin
- High Rolling With Rails
- Graphs Rails Plugin
One Trackback
[...] Juixe TechKnow ยป Scriptaculous Rails (tags: scriptaculous rails ajax rubyonrails javascript) [...]