YUI 3 Cookbook

Chapter 3. UI Effects and Interactions

Originally, JavaScript provided only small niceties like the occasional animation, fade, or rollover. Today’s browsers have advanced to the point where it is possible to build and maintain sophisticated applications. But sometimes, the small niceties are all you need.

Many YUI developers are frontend engineers who tend to take an application-centric view of the code they are writing. The amount of work that goes into JavaScript dominates all else, and the HTML and CSS is something to tweak later or (hopefully) hand off to a designer.

But if you’re a designer who codes, or you’re working on a very content-heavy page, it might be the HTML and CSS that dominates. In this more page-centric view, the HTML page needs only some snippets of JavaScript to sprinkle in some user interface effects.

To support this kind of use case, YUI enables you to add interesting UI effects with little overhead. You can make an element draggable in one line of code. You can fade an element in response to a click in just three lines of code. You can perform an interesting sequence of animations in only a few lines of code.

In some ways, YUI is actually better suited for the page-centric world than you might expect. If the JavaScript is meant to be a light cosmetic addition to the page, then the worst thing you can do is load a huge monolithic library just to do a fade. YUI’s flexible module system enables you to be far more selective about which components you load to create ...