Tutorials Point


  Learn script.aculo.us
  script.aculo.us Resources
  Selected Reading

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

script.aculo.us Overview


previous next AddThis Social Bookmark Button


Advertisements

What is script.aculo.us ?

Script.aculo.us is a JavaScript library which is built on top of the Prototype JavaScript Framework enhancing the GUI and giving Web 2.0 experience to the web users.

script.aculo.us is developed by Thomas Fuchs and it was first released to the public in June 2005.

Script.aculo.us provides dynamic visual effects and user interface elements via the Document Object Model (DOM).

The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson that provides an Ajax framework and other utilities.

How to install script.aculo.us ?

This is very simple to do require setup to use script.aculo.us library. You have to carry three simple steps:

  1. Go to the download page to grab the latest version in a convenient package.

  2. Unpack downloaded file and you will find following files:

    • 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.
  3. 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.aculo.us library?

Now you can include script.aculo.us script as follows:

<html>
<head>
<title>script.aculo.us examples</title>
   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js"></script>
</head>
<body>
........
</body>
</html>

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.:

<html>
<head>
<title>script.aculo.us examples</title>
   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects,dragdrop">
   </script>
</head>
<body>
........
</body>
</html>

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:

<html>
<head>
<title>script.aculo.us examples</title>
   <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>

</head>
<body>
<div id="id" onclick="action(this);">
Click on this and see how it change its color.
</div>
</body>
</html>

Here we are using Effect module and we are applying Highlight effect on an element. To understand it in better way you can Try it yourself.

Another easy way to call any module's function is inside event handlers as follows:

<html>
<head>
<title>script.aculo.us examples</title>

   <script type="text/javascript" 
   src="/javascript/prototype.js"></script>
   <script type="text/javascript" 
   src="/javascript/scriptaculous.js?load=effects,dragdrop">
   </script>

</head>
<body>
<div onclick="new Effect.BlindUp(this, {duration: 5})">
    Click here if you want this to go slooooow.
</div>
</body>
</html>

To understand it in better way you can Try it yourself.



previous next Printer Friendly

Advertisements


  

Advertisements