What is Script.aculo.us?

Script.aculo.us gives developers a new way to code in JavaScript by providing new shortcut functions, new powerful objects including Form, Effect, Control and Ajax, and some custom widgets. It’s an add-on to the Prototype.js JavaScript library.

What is Prototype?

Prototype by itself is a very well thought out and implemented library of JavaScript methods that helps a great deal with creating rich, highly interactive, and dynamic web pages.

The focus of this article will be to get you started using these two frameworks in your SharePoint projects. It’s really simple to do, and the frameworks themselves are not that difficult to learn.

Let’s begin:

  1. Download the files from http://www.prototypejs.org/download and http://script.aculo.us/downloads. The prototypejs download is a single file. The Script.aculo.us download is a zip archive with several files included.
  2. Extract the Script.aculo.us files to your project directory where they can be referenced. Place the prototype file there as well. In my case, I was developing a custom application page within MOSS. I placed the files in that layouts folder where my custom application pages were located. 
    1

    C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\CustomApplicationPages\
  3. Inside your project files you only have to include 2 files. The prototype.js file and the scriptaculous.js file. The scriptaculous.js file will load all the other necessary js files for you. Within my custom application page, I added my script tags just after the main content placeholder as follows: 
    1
2
3
4
5

    <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
 
<script src="prototype.js" type="text/javascript"></script>
 
<script type="text/javascript" src="scriptaculous.js"></script>
  4. Now within my custom appliation pages, I can leverage the frameworks to make my pages do some cool things. An example of how to use it: 
    1
2
3

    <div onclick="new Effect.Appear('nameHelp')">Appear</div>
 
<div id="nameHelp" style='display:none;overflow: auto;'>Some content here.</div>

This example is just a small example of what you can do. Check out the Script.aculo.us and Prototype documentation for an idea of what else is possible. If you’re having any trouble getting this going, just drop me a note.