RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Script.aculo.us Controls: Do Your Web Users a Favor

Learn how to integrate Script.aculo.us web controls into your web applications to make the end-user experience more pleasant.

n a previous DevX article, I wrote about the JavaScript framework Prototype, which aims to ease the development of dynamic web applications. That article ended with just a few words about Script.aculo.us, which is a fantastic UI library based on Prototype. This article gives Script.aculo.us its due by examining the web controls it provides: autocompleters, sliders, and in-place editors.

Script.aculo.us is a pretty big library, so no single article can cover it completely. However, the knowledge you will gain will enable you to leverage the power of Script.aculo.us web controls to improve the end-user experience.

Setting Up the Environment
First of all, point your browser to the Prototype Home Page and download the latest version. (At the time of writing, it was the The only file you really need is prototype.js. Next, download Script.aculo.us. Go to its download page and get the latest version. (At the time of writing, it was the 1.8.1.)

Uncompress the archive and place the files you find under the src directory—along with prototype.js—under a directory of your choice. I put them under the scripts directory, which I'll refer to throughout the rest of the article.

In order to use Script.aculo.us controls in your applications at this point, you just need to include the following script files in your pages using code similar to the following:

<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects,controls"></script>

As you can see, you need to include both effects and controls in order to use the latter. This is due to the fact that controls use the effect part of the library internally.

With the environment set, you can begin exploring the fantastic world of Script.aculo.us controls. I suggest you start with the most used one: autocompleter.

Author's Note: You may have noticed that Script.aculo.us is more modular than Prototype. As a matter of fact, you can include only the part of the library you're interested in, instead of the whole bundle of code. However, if you need the Script.aculo.us library in its entirety, you can include it all by using the following syntax:

<script type="text/javascript" src="scripts/scriptaculous.js"></script>

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date