Open In App

script.aculo.us Modules

Improve
Improve
Like Article
Like
Save
Share
Report

script.aculo.us extends the Prototype JavaScript Framework by adding more accessibility features to your webpage. These features are divided into several modules.

1. Effects Module: The effects’ module comes with five core effects : Opacity, Scale, MoveBy, Highlight, and Parallel. Through the combination of these core effects there are over 16 additional effects eg: effect.Appear, effect.Toggle etc.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js?load = effects">
    </script>
     
    <script type="text/javascript">
        function ShowElement(element) {
            new Effect.Opacity(element,
            { duration: 1, from: 0, to: 1.0 });
        }
 
        function HideElement(element) {
            new Effect.Opacity(element,
            { duration: 1, from: 1.0, to: 0 });
        }
    </script>
</head>
 
<body>
    <div onclick="ShowElement('element')">
        <Button>Show Content</Button>
    </div>
    <br />
 
    <div onclick="HideElement('element')">
        <Button>Hide Content</Button>
    </div>
    <br />
    <img id="element" src="./gfg.png">
</body>
 
</html>


Output:

2. Drag and Drop: It can be used to make any element draggable, turn it into a drop zone, or even make an entire series of elements sortable so that you can rearrange them by dragging and dropping.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js?load=effects,dragdrop">
    </script>
     
    <script type="text/javascript">
        var draggables = ['element'];
        window.onload = function () {
            draggables.each(function (item)
            { new Draggable(item, {}); });
        }           
    </script>
</head>
 
<body>
    <img id="element" src="./gfg.png">
</body>
 
</html>


Output:

3. Sliders: A slider is a kind of small track, along which you can slide a handle. It translates into a numerical value. With script.aculo.us, you can create such sliders with plenty of control.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js?load = slider">
    </script>
     
    <script>
        window.onload = function () {
            new Control.Slider('handle', 'track', {
                range: $R(1, 100),
                values: [1, 10, 20, 30, 40,
                    50, 60, 70, 80, 90, 100],
                sliderValue: 1,
                onSlide: function (value) {
                    $('sliderValue').innerHTML
                        = 'Slider Position: ' + value;
                }
            });
        }
    </script>
 
    <style>
        .track {
            background-color: rgb(0, 0, 0);
            position: relative;
            height: 10px;
            width: 200px;
            cursor: pointer;
        }
 
        .handle {
            background-color: #13e421;
            height: 20px;
            width: 4.25px;
            top: -4.25px;
            cursor: move;
        }
    </style>
</head>
 
<body>
    <div id="track" class="track ">
        <div id="handle" class="handle"
            style="width: 10px;">
        </div>
    </div>
 
    <p id="sliderValue"></p>
</body>
 
</html>


Output:

4. Autocompletion: Autocompletion allows local and server-powered autocompleting text input fields. It makes autocompletion very easy.

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script type="text/javascript"
        src="prototype.js">
    </script>
     
    <script type="text/javascript"
        src="scriptaculous.js?load = effects,controls">
    </script>
     
    <script type="text/javascript">
        window.onload = function () {
            new Autocompleter.Local(
                'searchBox',
                'Result',
                ['effect', 'drag', 'drop',
                'auto', 'complete',
                'slider', 'sound'],
            );
        }
    </script>
</head>
 
<body>
    <div>
        <label>Search :</label>
        <input type="text" id="searchBox" />
        <div id="Result"></div>
    </div>
</body>
 
</html>


Output:

5. In-place Editing: It allows to make any text or collection of items in the database, editable in-place by simply clicking on it. You can turn the static content to editable form using this module.

6. Builder: Builder allows creating DOM elements dynamically. This tool eases the DOM creation.

7. Sound: This module was first introduced in version 1.7.1 of the script. It lets you play sounds easily, queue them up, use multiple tracks, and so on.< It helps to easily manage sound tracks.



Last Updated : 10 Apr, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads