<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Module: ActionView::Helpers::ScriptaculousHelper</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="../../.././rdoc-style.css" type="text/css" media="screen" />
<script type="text/javascript">
// <![CDATA[
function popupCode( url ) {
window.open(url, "Code", "resizable=yes,scrollbars=yes,toolbar=no,status=no,height=150,width=400")
}
function toggleCode( id ) {
if ( document.getElementById )
elem = document.getElementById( id );
else if ( document.all )
elem = eval( "document.all." + id );
else
return false;
elemStyle = elem.style;
if ( elemStyle.display != "block" ) {
elemStyle.display = "block"
} else {
elemStyle.display = "none"
}
return true;
}
// Make codeblocks hidden by default
document.writeln( "<style type=\"text/css\">div.method-source-code { display: none }</style>" )
// ]]>
</script>
</head>
<body>
<div id="classHeader">
<table class="header-table">
<tr class="top-aligned-row">
<td><strong>Module</strong></td>
<td class="class-name-in-header">ActionView::Helpers::ScriptaculousHelper</td>
</tr>
<tr class="top-aligned-row">
<td><strong>In:</strong></td>
<td>
<a href="../../../files/lib/action_view/helpers/scriptaculous_helper_rb.html">
lib/action_view/helpers/scriptaculous_helper.rb
</a>
<br />
</td>
</tr>
</table>
</div>
<!-- banner header -->
<div id="bodyContent">
<div id="contextContent">
<div id="description">
<p>
Provides a set of helpers for calling Scriptaculous JavaScript functions,
including those which create Ajax controls and visual effects.
</p>
<p>
To be able to use these helpers, you must include the Prototype JavaScript
framework and the Scriptaculous JavaScript library in your pages. See the
documentation for <a
href="JavaScriptHelper.html">ActionView::Helpers::JavaScriptHelper</a> for
more information on including the necessary JavaScript.
</p>
<p>
The Scriptaculous helpers’ behavior can be tweaked with various
options. See the documentation at <a
href="http://script.aculo.us">script.aculo.us</a> for more information on
using these helpers in your application.
</p>
</div>
</div>
<div id="method-list">
<h3 class="section-bar">Methods</h3>
<div class="name-list">
<a href="#M000436">draggable_element</a>
<a href="#M000437">drop_receiving_element</a>
<a href="#M000435">sortable_element</a>
<a href="#M000434">visual_effect</a>
</div>
</div>
</div>
<!-- if includes -->
<div id="section">
<div id="constants-list">
<h3 class="section-bar">Constants</h3>
<div class="name-list">
<table summary="Constants">
<tr class="top-aligned-row context-row">
<td class="context-item-name">TOGGLE_EFFECTS</td>
<td>=</td>
<td class="context-item-value">[:toggle_appear, :toggle_slide, :toggle_blind]</td>
</tr>
</table>
</div>
</div>
<!-- if method_list -->
<div id="methods">
<h3 class="section-bar">Public Instance methods</h3>
<div id="method-M000436" class="method-detail">
<a name="M000436"></a>
<div class="method-heading">
<a href="ScriptaculousHelper.src/M000436.html" target="Code" class="method-signature"
onclick="popupCode('ScriptaculousHelper.src/M000436.html');return false;">
<span class="method-name">draggable_element</span><span class="method-args">(element_id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Makes the element with the DOM ID specified by <tt>element_id</tt>
draggable.
</p>
<p>
Example:
</p>
<pre>
<%= draggable_element("my_image", :revert => true)
</pre>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
</div>
</div>
<div id="method-M000437" class="method-detail">
<a name="M000437"></a>
<div class="method-heading">
<a href="ScriptaculousHelper.src/M000437.html" target="Code" class="method-signature"
onclick="popupCode('ScriptaculousHelper.src/M000437.html');return false;">
<span class="method-name">drop_receiving_element</span><span class="method-args">(element_id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Makes the element with the DOM ID specified by <tt>element_id</tt> receive
dropped draggable elements (created by <tt><a
href="ScriptaculousHelper.html#M000436">draggable_element</a></tt>). and
make an AJAX call. By default, the action called gets the DOM ID of the
element as parameter.
</p>
<p>
Example:
</p>
<pre>
<%= drop_receiving_element("my_cart", :url =>
{ :controller => "cart", :action => "add" }) %>
</pre>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
<p>
Some of these <tt>options</tt> include:
</p>
<ul>
<li><tt>:accept</tt> - Set this to a string or an array of strings describing
the allowable CSS classes that the <tt><a
href="ScriptaculousHelper.html#M000436">draggable_element</a></tt> must
have in order to be accepted by this <tt><a
href="ScriptaculousHelper.html#M000437">drop_receiving_element</a></tt>.
</li>
<li><tt>:confirm</tt> - Adds a confirmation dialog. Example:
<pre>
:confirm => "Are you sure you want to do this?"
</pre>
</li>
<li><tt>:hoverclass</tt> - If set, the <tt><a
href="ScriptaculousHelper.html#M000437">drop_receiving_element</a></tt>
will have this additional CSS class when an accepted <tt><a
href="ScriptaculousHelper.html#M000436">draggable_element</a></tt> is
hovered over it.
</li>
<li><tt>:onDrop</tt> - Called when a <tt><a
href="ScriptaculousHelper.html#M000436">draggable_element</a></tt> is
dropped onto this element. Override this callback with a JavaScript
expression to change the default drop behaviour. Example:
<pre>
:onDrop => "function(draggable_element, droppable_element, event) { alert('I like bananas') }"
</pre>
<p>
This callback gets three parameters: The Draggable element, the Droppable
element and the Event object. You can extract additional information about
the drop - like if the Ctrl or Shift keys were pressed - from the Event
object.
</p>
</li>
<li><tt>:with</tt> - A JavaScript expression specifying the parameters for the
XMLHttpRequest. Any expressions should return a valid URL query string.
</li>
</ul>
</div>
</div>
<div id="method-M000435" class="method-detail">
<a name="M000435"></a>
<div class="method-heading">
<a href="ScriptaculousHelper.src/M000435.html" target="Code" class="method-signature"
onclick="popupCode('ScriptaculousHelper.src/M000435.html');return false;">
<span class="method-name">sortable_element</span><span class="method-args">(element_id, options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Makes the element with the DOM ID specified by <tt>element_id</tt> sortable
by drag-and-drop and make an Ajax call whenever the sort order has changed.
By default, the action called gets the serialized sortable element as
parameters.
</p>
<p>
Example:
</p>
<pre>
<%= sortable_element("my_list", :url => { :action => "order" }) %>
</pre>
<p>
In the example, the action gets a "my_list" array parameter
containing the values of the ids of elements the sortable consists of, in
the current order.
</p>
<p>
Important: For this to work, the sortable elements must have id attributes
in the form "string_identifier". For example, "item_1".
Only the identifier part of the id attribute will be serialized.
</p>
<p>
Additional <tt>options</tt> are:
</p>
<ul>
<li><tt>:format</tt> - A regular expression to determine what to send as the
serialized id to the server (the default is <tt>/^[^_]*_(.*)$/</tt>).
</li>
<li><tt>:constraint</tt> - Whether to constrain the dragging to either
<tt>:horizontal</tt> or <tt>:vertical</tt> (or false to make it
unconstrained).
</li>
<li><tt>:overlap</tt> - Calculate the item overlap in the <tt>:horizontal</tt>
or <tt>:vertical</tt> direction.
</li>
<li><tt>:tag</tt> - Which children of the container element to treat as
sortable (default is <tt>li</tt>).
</li>
<li><tt>:containment</tt> - Takes an element or array of elements to treat as
potential drop targets (defaults to the original target element).
</li>
<li><tt>:only</tt> - A CSS class name or array of class names used to filter
out child elements as candidates.
</li>
<li><tt>:scroll</tt> - Determines whether to scroll the list during drag
operations if the list runs past the visual border.
</li>
<li><tt>:tree</tt> - Determines whether to treat nested lists as part of the
main sortable list. This means that you can create multi-layer lists, and
not only sort items at the same level, but drag and sort items between
levels.
</li>
<li><tt>:hoverclass</tt> - If set, the Droppable will have this additional CSS
class when an accepted Draggable is hovered over it.
</li>
<li><tt>:handle</tt> - Sets whether the element should only be draggable by an
embedded handle. The value may be a string referencing a CSS class value
(as of script.aculo.us V1.5). The first child/grandchild/etc. element found
within the element that has this CSS class value will be used as the
handle.
</li>
<li><tt>:ghosting</tt> - Clones the element and drags the clone, leaving the
original in place until the clone is dropped (default is <tt>false</tt>).
</li>
<li><tt>:dropOnEmpty</tt> - If true the Sortable container will be made into a
Droppable, that can receive a Draggable (as according to the containment
rules) as a child element when there are no more elements inside (default
is <tt>false</tt>).
</li>
<li><tt>:onChange</tt> - Called whenever the sort order changes while dragging.
When dragging from one Sortable to another, the callback is called once on
each Sortable. Gets the affected element as its parameter.
</li>
<li><tt>:onUpdate</tt> - Called when the drag ends and the Sortable‘s
order is changed in any way. When dragging from one Sortable to another,
the callback is called once on each Sortable. Gets the container as its
parameter.
</li>
</ul>
<p>
See <a href="http://script.aculo.us">script.aculo.us</a> for more
documentation.
</p>
</div>
</div>
<div id="method-M000434" class="method-detail">
<a name="M000434"></a>
<div class="method-heading">
<a href="ScriptaculousHelper.src/M000434.html" target="Code" class="method-signature"
onclick="popupCode('ScriptaculousHelper.src/M000434.html');return false;">
<span class="method-name">visual_effect</span><span class="method-args">(name, element_id = false, js_options = {})</span>
</a>
</div>
<div class="method-description">
<p>
Returns a JavaScript snippet to be used on the Ajax callbacks for starting
visual effects.
</p>
<p>
Example:
</p>
<pre>
<%= link_to_remote "Reload", :update => "posts",
:url => { :action => "reload" },
:complete => visual_effect(:highlight, "posts", :duration => 0.5)
</pre>
<p>
If no <tt>element_id</tt> is given, it assumes "element" which
should be a local variable in the generated JavaScript execution context.
This can be used for example with <tt><a
href="ScriptaculousHelper.html#M000437">drop_receiving_element</a></tt>:
</p>
<pre>
<%= drop_receiving_element (...), :loading => visual_effect(:fade) %>
</pre>
<p>
This would fade the element that was dropped on the drop receiving element.
</p>
<p>
For toggling visual effects, you can use <tt>:toggle_appear</tt>,
<tt>:toggle_slide</tt>, and <tt>:toggle_blind</tt> which will alternate
between appear/fade, slidedown/slideup, and blinddown/blindup respectively.
</p>
<p>
You can change the behaviour with various options, see <a
href="http://script.aculo.us">script.aculo.us</a> for more documentation.
</p>
</div>
</div>
</div>
</div>
<div id="validator-badges">
<p><small><a href="http://validator.w3.org/check/referer">[Validate]</a></small></p>
</div>
</body>
</html>
distrib
>
Mandriva
>
2010.0
>
i586
>
media
>
contrib-release
>
by-pkgid
>
8b99df826c3b6cf56a1caaae5f931d50
>
files
>
887
