Introducing script.aculo.us - Queues
(Page 4 of 4 )
In some circumstances, you may want to chain effects, so that they occur sequentially. As a first attempt, you might simply call one effect after the other:
<%= link_to_function "Blind Up/Down",
"new Effect.BlindUp('target');
new Effect.BlindDown('target')" %>
Unfortunately, this won’t have the desired result. As new effects are created, script.aculo.us adds them to a global queue. By default, these effects are executed in parallel—which means these two effects will collide with each other. To specify an effect’s position in the queue, use thequeueoption:
<%= link_to_function "Blind Up/Down",
"new Effect.BlindUp('target');
new Effect.BlindDown('target', { queue: 'end' })" %>
Now the two effects will execute sequentially, rather than at once. If you want more than two effects sequentially, just keep adding them with aqueue ofend. Thequeue option can also take a value offront, which causes the effect to be executed before anything else in the queue.
script.aculo.us also supports multiple queues, so that you can create named scopes for effects queues that run independently. For more information on creating queue scopes, see Chapter 11.
Callbacks The options hash can also take parameters for callbacks that are executed through the effect’s life cycle. beforeStart is called before the main effects rendering loop is started.beforeUpdateis called on each iteration of the effects rendering loop, before the redraw takes places.afterUpdateis called on each iteration of the effects rendering loop, after the redraw takes places.afterFinishis called after the last redraw of the effect was made. Callbacks are passed one argument, a reference to the effect object. For example:
<%= link_to_function "Fade with callback",
"new Effect.Fade('target', { afterUpdate: function(effect) {
effect.element.innerHTML = effect.currentFrame;
}})" %>
Chapter 11 coversEffectcallbacks in more detail.
Transitions The transition option determines the pattern of change—a constant linear rate of change, gradual speed up, or anything else. There are eight standard transitions, and you can easily define new ones. To override the default transition for an effect, use thetransitionoption like this:
<%= link_to_function "Fade with wobble",
"new Effect.Fade('target',
{ transition: Effect.Transitions.wobble })" %>
The available transitions are:linear,reverse,none,full,sinoidal,pulse,wobble, andflicker. Chapter 11 describes them in detail and explains how to create custom transitions. To get a feel for the possibilities, create a demo for yourself of each transition:
<% %w( linear reverse none full sinoidal pulse
wobble flicker ).each do |name| %>
<%= link_to_function "Fade with #{name}",
"new Effect.Fade('target',
{ transition: Effect.Transitions.#{name} })" %>
<% end %>
Please check back next week for the continuation of this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
|
 This article is excerpted from chapter four of the book Ajax on Rails, written by Scott Raymond (O'Reilly, 2007; ISBN: 0596527446). Check it out today at your favorite bookstore. Buy this book now.
|
|
