script.aculo.us is a set of JavaScript functions grouped
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>
3. Example:
|
