| By Michael Benedict | Article Rating: |
|
| October 5, 2008 03:45 PM EDT | Reads: |
4,897 |
- button_to_function(button_value, *args, ∓block)
Returns a button that‘ll trigger a JavaScript function using the onclick handler. All of these go into the body tag of the view file. You can use the visual_effect function to specify any visual effects -
Example :
This will show a button with the value “Greeting”, upon clicking will show a alert box with “Hello World!” inside.<%=button_to_function "Greeting", "alert('Hello world!')" %>
This will display a button with value “Fade”, upon clicking will fade in or fade out the element ‘fade_text’ (It can be a div element with id=fade_text).
<%=button_to_function "Fade", visual_effect(:toggle_appear, "fade_text", :duration => 0.5)%>
- link_to_function(name, *args, &block)
Intead of a button, if you want to implement AJAX functionality using a text link. You can use this helper.
Returns a link that will trigger a JavaScript function using the onclick handler and return false after the fact.Example :
This will show a “Greeting” link, upon clicking will show a alert box with “Hello World!” inside.<%=link_to_function "Greeting", "alert('Hello world!')" %>
This will display a “Slide Me” link, upon clicking it will slide in or out the element ’slide_text’ (It can be a div element with id=slide_text).
<%=link_to_function "Slide Me", visual_effect(:toggle_slide, "slide_text", :duration => 0.5)%>
Helper for Animation
- visual_effect(name, element_id = false, js_options = {})
Returns a JavaScript snippet to be used on the Ajax callbacks for starting visual effects.Example :
This will show a “Highlight” button, upon clicking will highlight the element which is specified.<%=button_to_function "Highlight", visual_effect(:highlight, "element_id_name",:startcolor => '#ffff99', :endcolor => '#ffffff')%>
This will display a “Grow” link, upon clicking it will grow the specified element_id_name
<%= link_to_function "Grow", visual_effect(:grow,"element_id_name",:direction => "center",:duration => 1)%>
I would really suggest to go through Script.aculo.us WIKI to know more about every effect and their parameters. All of these effects can be used with RoR. For Example I have attached the code for the demo file.
Code for the Demo File
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
<title>AJAX</title>
-
<%= javascript_include_tag :defaults %>
-
</head>
-
<body>
-
<%=button_to_function "Greeting Alert Me", "alert('Hello world!')" %><br /><br />
-
<h4>Actions with paragraph using buttons</h4>
-
<%=button_to_function "Fade", visual_effect(:toggle_appear, "fade", :duration => 0.5)%>
-
<%=button_to_function "Slide", visual_effect(:toggle_slide, "fade",:duration => 1)%>
-
<%=button_to_function "Highlight", visual_effect(:highlight, "fade",:startcolor => '#ffff99', :endcolor => '#ffffff')%>
-
<div id="fade" style="border:1px solid #dbdbdb; margin:50px;">
-
This is test, This is test<br>
-
This is testing....<br>
-
Lorum ipsum blablasadadada
-
</div>
-
<h4>Actions with Green Box using links</h4>
-
<%= link_to_function "Toggle Fade", visual_effect(:toggle_appear, "s1", :duration => 0.5)%> ||
-
<!-- Transitions --><%= link_to_function "Fade with wobble","new Effect.Fade('s1', { transition: Effect.Transitions.wobble })" %> ||
-
<!-- grow effect --><%= link_to_function "Grow", visual_effect(:grow,"s1",:direction => "center",:duration => 1)%> ||
-
<!-- shake effect --><%= link_to_function "Shake", visual_effect(:shake,"s1",:distance => "30",:duration => 1)%> ||
-
<!-- morph effect --><%= link_to_function "Morph to Red box", visual_effect(:morph,"s1",:style => "{background: '#f00',color: '#fff',width: '200px'}" )%> ||
-
<br>
-
<br>
-
<div id="s1" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #444; text-align:center;">
-
</div>
-
<h4>Drag Action with Blue Box</h4>
-
<div id="s2" style="width:80px; height:80px; cursor:move; background:#7baaed; border:1px solid #333; text-align:center;">
-
<%= draggable_element("s2", :revert => true) %>
-
DRAG ME
-
</div>
-
</body>
-
</html>
Published October 5, 2008 Reads 4,897
Copyright © 2008 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
More Stories By Michael Benedict
Michael Benedict
- Kindle 2 vs Nook
- Cloud Computing on Gartner's Top 10 List and SYS-CON Events' 2010 Calendar
- Confessions of a Ulitzer Addict
- IBM Hardware Chief, Intel VC Exec Arrested in Insider Trading Scam
- Tactical Cloud Computing Panel at 1st Annual GovIT Expo
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- Moving Your RIA Apps into the Cloud: Seven Challenges
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Windows 7 – Microsoft’s First Step to the Cloud
- Ulitzer Provides a Powerful Social Journalism Platform
- Jill Tummler Singer, Deputy CIO of CIA, Keynotes at GovIT Expo
- Open Source Mobile Cloud Sync and Push Email
- Kindle 2 vs Nook
- The Difference Between Web Hosting and Cloud Computing
- Cloud Computing on Gartner's Top 10 List and SYS-CON Events' 2010 Calendar
- Ajax in RichFaces 3.3, JSF 2 and RichFaces 4
- Confessions of a Ulitzer Addict
- IBM Hardware Chief, Intel VC Exec Arrested in Insider Trading Scam
- My Thoughts on Ulitzer
- Tactical Cloud Computing Panel at 1st Annual GovIT Expo
- Ulitzer.com Named Exclusive "New Media" Sponsor of Cloud Computing Conference & Expo
- US Post Office Hops a Ride on NetSuite’s Cloud
- Moving Your RIA Apps into the Cloud: Seven Challenges
- Adobe’s Aiming ColdFusion at Multiple Clouds
- Building a Drag-and-Drop Shopping Cart with AJAX
- What Is AJAX?
- Google Maps! AJAX-Style Web Development Using ASP.NET
- Flashback to January 2006: Exclusive SYS-CON.TV Interviews on "OpenAjax Alliance" Announcement
- AJAXWorld Conference & Expo to Take Place October 2-4, 2006, at the Santa Clara Convention Center, California
- AJAX Sponsor Webcasts Are Now Available at AJAXWorld Website
- How and Why AJAX, Not Java, Became the Favored Technology for Rich Internet Applications
- "Real-World AJAX" One-Day Seminar Arrives in Silicon Valley
- AJAXWorld University Announces AJAX Developer Bootcamp
- AJAX Support In JadeLiquid WebRenderer v3.1
- Where Are RIA Technologies Headed in 2008?
- Struts Validations Framework Using AJAX





































