script.aculo.us Installation
Last Updated :
07 Jul, 2022
What is script.aculo.us?
script.aculo.us is a set of open-source JavaScript libraries designed to enhance the user interface of web sites. It provides visual effects engine, a drag and drop library, controls (sliders, in-place editing, Ajax-based autocompletion), and more via the Document Object Model (DOM). It was first released to the public in June 2005 by Thomas Fuchs.
Why script.aculo.us?
- Visual effects can be added or created.
- Controls offers multiple user interface elements.
- Builder allows creating DOM elements with ease.
Features of script.aculo.us
1. Visual Effects: It comes with twenty-five visual effects and seven transition modes of which five core effects script.aculo.us offers are Opacity, Scale, MoveBy, Highlight, and Parallel. Also, programmers can extend existing and create new effects.
2. Controls:
- It makes creation of drag and drop module easier.
- It provides autocompleting input fields.
- It also allows In-Place Editing, and much more.
3. Sound: It lets you play sounds, use multiple tracks, queue them up, and still have more to offer.
4. Portability: All the codes of the script.aculo.us framework are written in JavaScript, which runs on most of the platforms available today.
5. Popularity of script.aculo.us: script.aculo.us is used by many popular organizations like NASA, Apple, IKEA, Gucci, Shopify, Ruby on Rails etc. Therefore, it is considered reliable and efficient.
Installation of script.aculo.us: Installing script.aculo.us can be done easily. Also, it’s same for the most of the platforms available so don’t need to worry about which OS platform you’re on. Just follow the steps given below:
- Download the script.aculo.us zip file from the download page.
- Extract the downloaded package. After extraction you’ll find these files, and folders shown below.
Extracted files and folders
- Now copy all the files in src folder in your project folder (sound.js and unittest.js are optional). It’ll have these files; builder.js, controls.js, dragdrop.js, effects.js, scriptaculous.js, sound.js, unittest.js, and slider.js.
- Also copy the prototype.js from the lib folder to your project folder.
Required files in the project folder
Usage: You’re all set to use the script.aculo.us library in your project. Let’s see how to use it now:
- Load the prototype.js and scriptaculous.js in your project as shown below.
html
<!DOCTYPE html>
<html>
<head>
<title>script.aculo.us usage</title>
<script type="text/javascript"
src="./prototype.js">
</script>
<script type="text/javascript"
src="./scriptaculous.js">
</script>
</head>
<body>
</body>
</html>
|
- Now you can use all the features which are available like highlight effect. More can be found on the official documentation site.
<a href=”#” onclick=”new Effect.Highlight(this.parentNode, { startcolor: ‘#ffff99’,
endcolor: ‘#ffffff’ }); return false;”>
Highlight me!
</a>
Note: You can also modify the script tag in the given code to load only required features. Lets look at an example:
html
<!DOCTYPE html>
<html>
<head>
<title>script.aculo.us usage</title>
<script type="text/javascript"
src="./prototype.js">
</script>
<script type="text/javascript"
src="./scriptaculous.js?load = effects, dragdrop">
</script>
</head>
<body>
</body>
</html>
|
Benefits of script.aculo.us library:
- Makes development faster.
- Lightweight and easy to use.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...