{"id":153,"date":"2006-08-12T00:34:36","date_gmt":"2006-08-12T05:34:36","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2006\/08\/12\/scriptaculous-rails\/"},"modified":"2006-08-12T00:34:36","modified_gmt":"2006-08-12T05:34:36","slug":"scriptaculous-rails","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2006\/08\/12\/scriptaculous-rails\/","title":{"rendered":"Scriptaculous Rails"},"content":{"rendered":"

The script.aculo.us<\/a> JavaScript library is ridiculously simple, and Ruby on Rails makes using it just as simple. Ruby on Rails provides a view helper visual_effect<\/b> 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:<\/p>\n

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

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:
\n
\n[source:html]
\n<SCRIPT type=”text\/javascript”>
\n <%= visual_effect :opacity, ‘idOne’, :duration => 2.0,
\n :from => 1.0, :to => 0.5 %>
\n <%= visual_effect :opacity, ‘idTwo’, :duration => 2.0,
\n :from => 1.0, :to => 0.5, :transition => ‘Effect.Transitions.wobble’ %>
\n<\/SCRIPT>
\n[\/source]<\/p>\n

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.<\/p>\n

The combination effects listed above support the duration and delay options.<\/p>\n

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

You can also cut and paste effects submitted by script.aculo.us users<\/a> and the visual_effect will also work for those effects.<\/p>\n

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

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

Technorati Tags: ruby<\/a>, rubyonrails<\/a>, rails<\/a>, script.aculo.us<\/a>, javascript<\/a>, web2.0<\/a>, web design<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[16,22,3],"tags":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-2t","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/153"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=153"}],"version-history":[{"count":0,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/153\/revisions"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=153"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=153"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=153"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}