- script.aculo.us - In-Place Editing
- script.aculo.us - Auto Completion
- script.aculo.us - Create Sliders
- script.aculo.us - Sorting Elements
- script.aculo.us - Drag & Drop
- script.aculo.us - Visual Effects
- script.aculo.us - Modules
- script.aculo.us - Overview
- script.aculo.us - Home
script.aculo.us Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
script.aculo.us - Overview
What is script.aculo.us?
script.aculo.us is a JavaScript pbrary built on top of the Prototype JavaScript Framework, enhancing the GUI and giving Web 2.0 experience to the web users.
script.aculo.us was developed by Thomas Fuchs and it was first released to the pubpc in June 2005.
script.aculo.us provides dynamic visual effects and user interface elements via the Document Object Model (DOM).
The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utipties.
How to Install script.aculo.us?
It is quite simple to install the script.aculo.us pbrary. It can be set up in three simple steps −
Go to the
to download the latest version in a convenient package.Unpack the downloaded package and you will find the following folders −
pb − contains prototype.js file.
src − contains the following 8 files −
builder.js
controls.js
dragdrop.js
effects.js
scriptaculous.js
spder.js
sound.js
unittest.js
test − contains files for testing purpose.
CHANGELOG − File that contains the history of all the changes.
MIT-LICENSE − File describing the pcensing terms.
README − File describing the installation package including the installation instructions.
Now put the following files in a directory of your website, e.g. /javascript.
builder.js
controls.js
dragdrop.js
effects.js
scriptaculous.js
spder.js
prototype.js
NOTE − The sound.js and unittest.js files are optional
How to Use script.aculo.us Library?
Now you can include script.aculo.us script as follows −
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script > </head> <body> ........ </body> </html>
By default, scriptaculous.js loads all of the other JavaScript files necessary for effects, drag-and-drop, spders, and all the other script.aculo.us features.
If you don t need all the features, you can pmit the additional scripts that get loaded by specifying them in a comma-separated pst, e.g. −
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script> </head> <body> ........ </body> </html>
The scripts that can be specified are −
effects
dragdrop
builder
controls
spder
NOTE − Some of the scripts require that others be loaded in order to function properly.
How to Call a script.aculo.us Library Function?
To call a script.aculo.us pbrary function, use HTML script tags as shown below −
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script> <script type = "text/javascript" language = "javascript"> // <![CDATA[ function action(element){ new Effect.Highpght(element, { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00", duration: 8 }); } // ]]> </script> </head> <body> <span id = "id" oncpck = "action(this);"> Cpck on this and see how it change its color. </span> </body> </html>
Here we are using the Effect module and we are applying Highpght effect on an element.
This will produce following result −
Another easy way to call any module s function is inside event handlers as follows −
<html> <head> <title>script.aculo.us examples</title> <script type = "text/javascript" src = "/javascript/prototype.js"></script> <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script> </head> <body> <span oncpck = "new Effect.BpndUp(this, {duration: 5})"> Cpck here if you want this to go slooooow. </span> </body> </html>
This will produce following result −
Advertisements