Script.aculo.us

Script.aculo.us utilities

script.aculo.us is a set of JavaScript functions ggrouped in a library. It provides dynamic visual effects in html pages using the Document Object Model (DOM).

1. Installation

Go to: script.aculo.us
Then download a current version like scriptaculous-js-1.8.1.zip. Unzip the related file to get the following directories: lib: containing prototype.js src: containing the shown set of functions.js: test: set of test functions, and CHANGELOG, MIT-LICENSE, README files, as library
Make a directory as "javascripts". Copy and past in it the prototype.js file from lib directory and all the .js files from src directory. Copy and paste the javascripts" directory to any work web site directory, say C:\SCRIPTUS.

2. First approch

Create a file with the name first_example.html, and include some of the scriptaculous scripts between <head> tags, as follows: javascripts js modules

<head>
<script type="text/javascript" src="/javascripts/prototype.js"> </script>
<script type="text/javascript" src="/javascripts/scriptaculous.js"> </script>
<script type="text/javascript" src="/javascripts/effects.js"></script>
</head>

For specific uses, all the .js modules from src directory can be loaded 
as follows
<script type="text/javascript" src="/javascript/scriptaculous.js?load=effects,
builder,dragdrop, controls,slider"></script>

3. The complete general form of the web page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css" media="screen">
....
</style>

<script type="text/javascript" src="javascripts/prototype.js"></script>
<script type="text/javascript" src="/javascript/scriptaculous.js?load=effects, 
builder, dragdrop, controls,slider">

<script type="text/javascript">
function how_to_display(parameters or not) {
......
other functions ( PARAMETERS. FILE.EXT)
......
other parameters related to the modules
......
}
</script>

</head>
<body>
<div onclick="how_to_display(parameters or not)">
Click here to ....
</div>

or <a href="FILE.EXT" onclick="how_to_display(parameters or not); 
return false">Mesures</a></h3>

or <div id ="PARAMETERS" ....>

</body>
</html>