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
Share your thoughts in the comments
Please Login to comment...