Skip to content
Related Articles

Related Articles

Improve Article

script.aculo.us Installation

  • Last Updated : 21 Jul, 2021

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?

  1. Visual effects can be added or created.
  2. Controls offers multiple user interface elements.
  3. 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:  



  1. It makes creation of drag and drop module easier.
  2. It provides autocompleting input fields.
  3. 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>
 
    <!-- Load the the javascript files
    that we copied earlier during installation -->
    <script type="text/javascript"
        src="./prototype.js">
    </script>
     
    <script type="text/javascript"
        src="./scriptaculous.js">
    </script>
</head>
 
<body>
    <!-- YOUR CODE -->
</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>
 
    <!-- Here we're loading visual effects
         and dragdrop features only -->
    <script type="text/javascript"
        src="./prototype.js">
    </script>
     
    <!-- The scripts that can be specified are:
        builder, effects, dragdrop, controls,
        and slider -->
    <script type="text/javascript"
        src="./scriptaculous.js?load = effects, dragdrop">
    </script>
</head>
 
<body>
    <!-- YOUR CODE -->
</body>
 
</html>

Benefits of script.aculo.us library:  

  • Makes development faster.
  • Lightweight and easy to use.

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :