Ruby-on-Rails
  Home arrow Ruby-on-Rails arrow Page 4 - Introducing script.aculo.us
Dev Articles Forums 
ADO.NET  
Apache  
ASP  
ASP.NET  
C#  
C++  
ColdFusion  
COM/COM+  
Delphi-Kylix  
Design Usability  
Development Cycles  
DHTML  
Embedded Tools  
Flash  
Graphic Design  
HTML  
IIS  
Interviews  
Java  
JavaScript  
MySQL  
Oracle  
Photoshop  
PHP  
Reviews  
Ruby-on-Rails  
SQL  
SQL Server  
Style Sheets  
VB.Net  
Visual Basic  
Web Authoring  
Web Services  
Web Standards  
XML  
Dedicated Servers  
Moblin 
JMSL Numerical Library 
IBM® developerWorks 
Sun Developer Network 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us Get Paid 
Request Media Kit
Contact Us 
Site Map 
Privacy Policy 
Support 
 USERNAME
 
 PASSWORD
 
 
  >>> SIGN UP!  
  Lost Password? 
RUBY-ON-RAILS

Introducing script.aculo.us
By: O'Reilly Media
  • Search For More Articles!
  • Disclaimer
  • Author Terms
  • Rating: 5 stars5 stars5 stars5 stars5 stars / 1
    2007-11-08

    Table of Contents:
  • Introducing script.aculo.us
  • Visual Effects
  • Toggling
  • Queues

  • Rate this Article: Poor Best 
      ADD THIS ARTICLE TO:
      Del.ici.ous Digg
      Blink Simpy
      Google Spurl
      Y! MyWeb Furl
    Email Me Similar Content When Posted
    Add Developer Shed Article Feed To Your Site
    Email Article To Friend
    Print Version Of Article
    PDF Version Of Article
     
     
    ADVERTISEMENT


    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 an excerpt from the book "Ajax on Rails," published by O'Reilly. We...
     

    Buy this book now. 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.

    RUBY-ON-RAILS ARTICLES

    - Iterating and Incrementing Strings in Ruby
    - Comparing and Manipulating Strings in Ruby
    - Strings in Ruby
    - Ruby On Rails: Making Your First Dynamic Site
    - Ruby on Rails: Beginning Rails
    - Ruby: Modules, Mixins, Fixins, and Rails
    - Controlling Information Access with the Rail...
    - URLs, Filters and the Rails Action Controller
    - Flash and the Rails Action Controller
    - Rails Action Controller
    - Dropping and Sorting with AJAX and script.ac...
    - Drag and Drop with script.aculo.us and Rails
    - Introducing script.aculo.us
    - Ruby Classes and Objects
    - Ruby Loops







    © 2003-2008 by Developer Shed. All rights reserved. DS Cluster 2 hosted by Hostway