Section 14.3. Script.aculo.us: More Than the Sum of Its Periods
14.3. Script.aculo.us: More Than the Sum of Its PeriodsThe script.aculo.us library is one of several that's built on top of Prototype. It extends the available functionality and provides a higher level of interaction, as well as increasingly sophisticated effects. You'll find documentation for script.aculo.us, which includes a usage page, at http://wiki.script.aculo.us/scriptaculous/show/Usage. This covers where to get the library and how to install it. The library consists of multiple JavaScript files (scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js, and control.js), which need to be placed in your script directory, along with prototype.js and any other JavaScript file. 14.3.1. UsageTo use script.aculo.us, you'll need to link prototype as well as the new library: <script type="text/javascript" src="/books/4/327/1/html/2/prototype.js"></script> <script type="text/javascript" src="/books/4/327/1/html/2/scriptaculous.js"></script> The scriptaculous.js file loads in all the other JS files. If you want only certain effects, though, you can specify this on the same line as the scriptaculous.js load, using the following syntax: <script type="text/javascript" src="/books/4/327/1/html/2/scriptaculous.js?load=effects,controls"> Once loaded, you can then use any of the libraries' specialized UI (user interface) effects.
14.3.2. A Gander at EffectsOne of the script.aculu.os libraries includes several visual effects: fades, clippings, and so on. These are extremely easy to use and quite fun to watch. In Example 14-3, I tried out several of the different effects, including ones to puff, squish, and pulsate a DIV element. Example 14-3. Taking script.aculo.us visual effects for a run
Notice in the code that I pass the element in using the Prototype helper function, $. The title of the example page says it all: I want to have fun. There's nothing wrong with making your web pages fun, but these effects go beyond just the coolness factor. The Pulsate effect can be used to grab attention. Other means can still be used, such as an alert dialog when scripting is turned off. However, I find something like Pulsate preferable to using an alert to get attention. The Shake effect can be used when a person enters a wrong value, and I've seen this used in login pages. If there's text that also provides feedback, the use of this effect is also accessible. The SlideDown and SlideUp provide the functionality demonstrated in Chapter 12 for creating an accordion effect. Again, if the layers are open when scripting is not supported, the page is accessible. The Puff and Squish effects can show and hide a note to the web-page reader. I like this rather than using straight visibility because there's a warning that something is coming and something is going away, rather than just having them appear and disappear. One rule of DHTML is: don't disconcert your user too much. The Appear function is a way to undo some of the other disappearing effects, and it also has a nice "here I come" feel to it. As for Highlight, this is the infamous blue-to-yellow fade that people are implementing in their applications to denote a successful form action. I'm still out on this one. The point is how easy these effects were to use. Other script.aculo.us effects include the autocompletion, the sortables, and the slider. The library also implements drag and drop, though as discussed earlier in the book, use this effect sparingly. Script.aculo.us isn't the only library built on top of Prototype. Another is Rico, discussed next.
|
EAN: 2147483647
Pages: 151