Sunday, March 12, 2017

script.aculo.us - Quick Guide

script.aculo.us - Overview

What is script.aculo.us?

script.aculo.us is a JavaScript library built on top of the Prototype JavaScript Framework, enhancing the GUI and giving Web 2.0 experience to the web users.
script.aculo.us was 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?

It is quite simple to install the script.aculo.us library. It can be set up in three simple steps −

Go to the download page to download the latest version in a convenient package.
Unpack the downloaded package and you will find the following folders −
- lib − contains prototype.js file.
- src − contains the following 8 files −
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test − contains files for testing purpose.
- CHANGELOG − File that contains the history of all the changes.
- MIT-LICENSE − File describing the licensing terms.
- README − File describing the installation package. including the installation instructions.
Now put the following files in a directory of your website, e.g. /javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- 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 the other script.aculo.us features.
If you don't need all 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 Function?

To call a 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 the Effect module and we are applying Highlight effect on an element.
This will produce following result −
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>

This will produce following result −

script.aculo.us - Modules

script.aculo.us is divided into modules, each with its own JavaScript file. These modules are explained here −

Effects

The effects module comes with more than twenty-five visual effects and seven transition modes.

Drag and Drop

You will use the drag and drop module 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.

Sliders

A slider is a sort of small rail or track, along which you can slide a handle. It translates into a numerical value. With script.aculo.us, you can create such sliders with a lot of control.

Autocompletion

Autocompleter controls allow Google-Suggest style, local and server-powered autocompleting text input fields.

In-place Editing

You can make any text or collection of items editable in-place by simply clicking it.

Builder

A helper to build DOM fragments in JavaScript. This is a developer tool that eases DOM creation considerably.

Sound

Version 1.7.1 introduced a sound system that lets you play sounds easily, queue them up, use multiple tracks, and so on.

script.aculo.us - Visual Effects

The script.aculo.us effects are divided into two groups −

Core Effects

The following six core effects are the foundation of the script.aculo.us Visual Effects Java Script library.

All the core effects support various common parameters as well as effect-specific parameters and these effect names are case-sensitive.
All the effect-specific Common Parameters have been discussed in this tutorial along with the effects.

Combination Effects

All the combination effects are based on the five Core Effects, and are thought of as examples to allow you to write your own effects.
Usually these effects rely on the parallel, synchronized execution of other effects. Such an execution is readily available, hence creating your own combined effects is very easy. Here is a list of Combination Effects −

Additionally, there's the Effect.toggle utility method for elements you want to show temporarily with an Appear/Fade, Slide or Blind animation.

Effect.toggle

Library Files Required for Effects

To use the effects capabilities of script.aculo.us, you will need to load the effects module. So, your minimum loading for script.aculo.us will look like this:

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

Syntax to Call Effect Functions

The proper way to start a core effect is usually with the new operator. Depending on your preferences, you can use one of two syntaxes −

new Effect.EffectName(element [, requiredArgs ] [ , options ] )

OR

element.visualEffect('EffectName' [, requiredArgs ] [,options])

These two syntaxes are technically equivalent. Choosing between the two is mostly about your personal sense of code aesthetics.

Example

Here are two equivalent calls, so you can see how the syntaxes are related, which are very much interchangeable −

new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });

OR

$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });

script.aculo.us - Drag & Drop

The most popular feature of Web 2.0 interface is the drag and drop facility. Fortunately script.aculo.us comes with an inherent capability to support drag and drop.
To use the dragging capabilities of script.aculo.us, you'll need to load the dragdrop module, which also requires the effects module. So your minimum loading for script.aculo.us will look like this:

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

Dragging Things Around

It is very simple to make an item draggable using script.aculo.us. It requires creating of an instance of the Draggable class, and identifying the element to be made draggable.

Draggable Syntax

new Draggable( element, options );

The first parameter to the constructor identifies the element to be made draggable either as the id of the element, or a reference to the element. The second parameter specifies optional information on how the draggable element is to behave.

Draggable Options

You can use one or more of the following options while creating your draggable object.

Option	Description	Examples
revert	If set to true, the element returns to its original position when the drag ends. Also specifies whether the reverteffect callback will be invoked when the drag operation stops. Defaults to false.	Example
snap	Used to cause a draggable to snap to a grid or to constrain its movement. If false (default), no snapping or constraining occurs. If it is assigned an integer x, the draggable will snap to a grid of x pixels. If an array [x, y], the horizontal dragging will snap to a grid of x pixels and the vertical will snap to y pixels. It can also be a function conforming to Function( x , y , draggable ) that returns an array [x, y].	Example
zindex	Specifies the CSS z-index to be applied to the element during a drag operation. By default, the element's z-index is set to 1000 while dragging.	Example
ghosting	Boolean determining whether the draggable should be cloned for dragging, leaving the original in place until the clone is dropped. Defaults to false.	Example
constraint	A string used to limit the draggable directions, either horizontal or vertical. Defaults to null which means free movement.	Example
handle	Specifies an element to be used as the handle to start the drag operation. By default, an element is its own handle.	Example
starteffect	An effect called on element when dragging starts. By default, it changes the element's opacity to 0.2 in 0.2 seconds.	Example
reverteffect	An effect called on element when the drag is reverted. Defaults to a smooth slide to element's original position.Called only if revert is true.	Example
endeffect	An effect called on element when dragging ends. By default, it changes the element's opacity to 1.0 in 0.2 seconds.	Example

Callback Options

Additionally, you can use any of the following callback functions in the options parameter :

Function	Description	Examples
onStart	Called when a drag is initiated.	Example
onDrag	Called repeatedly when a mouse moves, if mouse position changes from previous call.	Example
change	Called just as onDrag (which is the preferred callback).	Example
onEnd	Called when a drag is ended.	Example

Except for the "change" callback, each of these callbacks accepts two parameters: the Draggable object, and the mouse event object.

Draggable Example

Here, we define 5 elements that are made draggable: three <div> elements, an <img> element, and a <span> element. The purpose of the three different <div> elements is to demonstrate that regardless of whether an element starts off with a positioning rule of static (the default), relative, or absolute, the drag behavior is unaffected.

<html>
   <head>
      <title>Draggables Elements</title>
  
      <script type="text/javascript" src="/javascript/prototype.js"></script>
      <script type="text/javascript" src="/javascript/scriptaculous.js"></script>
      <script type="text/javascript">
  
         // Take all the elements whatever you want to make Draggable.
         var elements = ['normaldiv', 'relativediv', 'absolutediv', 'image', 'span'];
   
         // Make all the items drag able by creating Draggable objects
         window.onload = function() {
            elements.each(function(item) { new Draggable(item, {});});
         }
   
      </script>
   </head>
   <body>
 
      <div id="normaldiv">
         This is a normal div and this is dragable.
      </div>

      <div id="relativediv" style="position: relative;">
         This is a relative div and this is dragable.
      </div>

      <div id="absolutediv" style="position: absolute;">
         This is an absolute div and this dragable.
      </div>
      <br />
  
      <img id="image" src="/images/scriptaculous.gif"/>

      <p>Let part <span id="span" style="color: blue;"> 
         This is middle part</span> Yes, only middle part is dragable.</p>
   
   </body>
</html>

This will produce following result −

Dropping Dragged Things

An element is converted into a drop target via a call to the add() method within a namespace called Droppables.
The Droppables namespace has two important methods: add() to create a drop target, and remove() to remove a drop target.

Syntax

Here is the syntax of the add() method to create a drop target. The add() method creates a drop target out of the element passed as its first parameter, using the options in the hash passed as the second.

Droppables.add( element, options );

The syntax for remove() is even more simpler. The remove() method removes the drop target behavior from the passed element.

Droppables.remove(element);

Options

You can use one or more of the following options while creating your draggable object.

Option	Description	Examples
Hoverclass	The name of a CSS class that will be added to the element while the droppable is active (has an acceptable draggable hovering over it). Defaults to null.	Example
Accept	A string or an array of strings describing CSS classes. The droppable will only accept draggables that have one or more of these CSS classes.	Example
Containment	Specifies an element, or array of elements, that must be a parent of a draggable item in order for it to be accepted by the drop target. By default, no containment constraints are applied.	Example
Overlap	If set to 'horizontal' or 'vertical', the droppable will only react to a Draggable if its overlapping by more than 50% in the given direction. Used by Sortables, discussed in the next chapter.
greedy	If true (default), it stops hovering other droppables, under the draggable won't be searched.	Example

Callback Options

Additionally, you can use any of the following callback functions in the options parameter :

Function	Description	Examples
onHover	Specifies a callback function that is activated when a suitable draggable item hovers over the drop target. Used by Sortables, discussed in the next chapter.
onDrop	Specifies a callback function that is called when a suitable draggable element is dropped onto the drop target.	Example

Example

Here, the first part of this example is similar to our previous example, except that we have used Prototype's handy $A() function to convert a node list of all the <img> elements in the element with the id of draggables to an array.

<html>
   <head>
      <title>Drag and Drop Example</title>
  
      <script type="text/javascript" src="/javascript/prototype.js"></script>
      <script type="text/javascript" src="/javascript/scriptaculous.js"></script>
  
      <script type="text/javascript">
  
         window.onload = function() {
   
            // Make all the images draggables from draggables division.
    
            $A($('draggables').getElementsByTagName('img')).each(function(item) {
               new Draggable(item, {revert: true, ghosting: true});
            });

            Droppables.add('droparea', {hoverclass: 'hoverActive', onDrop: moveItem});
    
            // Set drop area by default  non cleared.
            $('droparea').cleared = false;
         }
   
         // The target drop area contains a snippet of instructional
         // text that we want to remove when the first item
         // is dropped into it.
   
         function moveItem( draggable,droparea){
   
            if (!droparea.cleared) {
               droparea.innerHTML = '';
               droparea.cleared = true;
            }
    
            draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
         }
      </script>
  
      <style type="text/css">
  
         #draggables {
            width: 172px;
            border: 3px ridge blue;
            float: left;
            padding: 9px;
         }
   
         #droparea {
            float: left;
            margin-left: 16px;
            width: 172px;
            border: 3px ridge maroon;
            text-align: center;
            font-size: 24px;
            padding: 9px;
            float: left;
         }
   
         .hoverActive {
            background-color: #ffffcc;
         }
   
         #draggables img, #droparea img {
            margin: 4px;
            border:1px solid red;
         }
   
      </style>
   </head>
   <body>
 
      <div id="draggables">
         <img src="/images/html.gif"/>
         <img src="/images/css.gif"/>
         <img src="/images/xhtml.gif"/>
         <img src="/images/wml_logo.gif"/>
         <img src="/images/javascript.gif"/>
      </div>

      <div id="droparea">
         Drag and Drop Your Images in this area
      </div>
  
   </body>
</html>

This will produce following result −

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews

Sunday, March 12, 2017

script.aculo.us - Quick Guide

script.aculo.us - Overview

What is script.aculo.us?

How to Install script.aculo.us?

How to Use script.aculo.us Library?

How to Call a script.aculo.us Library Function?

script.aculo.us - Modules

Effects

Drag and Drop

Sliders

Autocompletion

In-place Editing

Builder

Sound

script.aculo.us - Visual Effects

Core Effects

Combination Effects

Library Files Required for Effects

Syntax to Call Effect Functions

Example

script.aculo.us - Drag & Drop

Dragging Things Around

Draggable Syntax

Draggable Options

Callback Options

Draggable Example

Dropping Dragged Things

Syntax

Options

Callback Options

Example

No comments:

Post a Comment