script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework. it provides dynamic visual effects and other functionality via the Document Object Model (DOM).
What included inside script.aculo.us ?
* lib : having prototype.js file.
* src: having 8 files
1. builder.js
2. controls.js
3. dragdrop.js
4. effects.js
5. scriptaculous.js
6. slider.js
7. sound.js
8. unittest.js
* test: having files for testing purpose.
* CHANGELOG: file having history of all the changes.
* MIT-LICENSE: file describing the licensing terms.
* README: file having description of the installation package. Including installation instructions.
Now put following files in a directory of your website, e.g. /javascript.
1. builder.js
2. controls.js
3. dragdrop.js
4. effects.js
5. scriptaculous.js
6. slider.js
7. prototype.js
NOTE: The sound.js and unittest.js files are optional
How to use?
<script type="text/javascript" src="/javascript/prototype.js"></script>
<script type="text/javascript" src="/javascript/scriptaculous.js"></script>
By default, scriptaculous.js loads all of the other JavaScript files necessary for effects, drag-and-drop, sliders, and all of the other script.aculo.us features.
If you don't need all of the features, you can limit the additional scripts that get loaded by specifying them in a comma-separated list, e.g.:
<script type="text/javascript" src="/javascript/scriptaculous.js?load=effects,dragdrop">
</script>
The scripts that can be specified are:
* effects
* dragdrop
* builder
* controls
* slider
NOTE: Some of the scripts require that others be loaded in order to function properly.
How to call a script.aculo.us library functions?
To call upon any script.aculo.us library function, use HTML script tags as shown below:
<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.Highlight(element,
{ startcolor: "#ff0000",
endcolor: "#0000ff",
restorecolor: "#00ff00",
duration: 8
});
}
// ]]>
</script>
<body>
<div id="id" onclick="action(this);">
Click on this and see how it change its color.
</div>
</body>
</html>
Another easy way to call:
<div onclick="new Effect.BlindUp(this, {duration: 5})">
Click here if you want this to go slooooow.
</div>
No comments:
Post a Comment