×
Namespaces

Variants
Actions

Quickstart to the Scriptaculous framework

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: Maveric (16 May 2010)
Last edited: hamishwillee (16 Nov 2011)


Contents

Introduction

Scriptaculous is a JavaScript framework build on the Prototype JavaScript libraries. is It is very popular within web designers and developers for rapid UI demonstrations of advanced user interfaces. It contains classes for creating animations, AJAX calls, drag and drop features-basically all sorts of different UI effects are included. Many big web sites nowadays use the Scriptaculous framework.

In this wiki article is instructed how you get quickly started with the Scriptaculous framework and also show a couple of tricks you can do with it.

For the full documentation and examples, please visit the site at http://script.aculo.us.

  • Note: not all functionality may be available on the web browser of a S60 Web Runtime supported mobile.


Downloading and installing Scriptaculous

Obtain the latest build of the library from their website. Latest version was script.aculo.us 1.8.3 at the time of writing.

In this Wiki article we will be downloading and using the Windows version, thus downloading the "scriptaculous-js-1.8.3.zip" file. You may choose version for Linux too, if that is your environment. For Linux installation and use, please refer to the scriptaculous site instructions.

Extract the contents of the downloaded package under a directory of your choice. In this article we assume the "c:\" root is used. The package default extracts the content under "\scriptaculous-js-1.8.3".

If you use external web hosting, you would need to upload all the JavaScript ".js" files from the "scriptaculous-js-1.8.3\src" to the server under a subdirectory of your choice (e.g. "./js"). If you are using your computer and local-host, just copy the JavaScript ".js" files them under the corresponding directory there.

The "/lib" sub-directory of the scriptaculous package, contains the essential Prototype.js library. You may use this version, or download the most recent version from http://www.prototypejs.org/

If you are working at localhost, then copy the "prototype.js" file of the framework also under the "./js" JavaScript directory or, if using a remote hosting, to it correspondingly.

Ftp transfer 1.jpg

Ftp transfer 2.jpg


The downloaded package also contains a directory called "/test" with both functional and unit tests in it. You can also copy those, but they are not required for running the Scriptaculous framework.


Put the Scriptaculous framework into use

Next we will create a simple "Hello from Scriptaculous!" web page to check that everything was installed OK and to test a couple of effects, just to get you started.

For this purpose, use your favourite (html)code editor and create a blank new html page and save it with name e.g. "hello.html".


Code example

Note that the following lines are included only, because the scriptaculous.js takes care of loading the needed files.

<html>
<head>
<title> Scriptaculous test </title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div id="pulsate"
style="width:max-width;
height:60;
background:#cbc;
text-align:center;"
>
<a href="#" onclick="Effect.Pulsate('pulsate'); return false;"
style="line-height:50px;">Demo of the PULSATE effect, CLICK ME!</a>
</div>
<br><br><br><br>
<div id="move"
style="width:max-width;
height:60;
background:#cbc;
text-align:center;"
>
<a href="#" onclick="new Effect.Move('move', { x: 0, y: -100, mode: 'relative' });
return false;"

style="line-height:50px;">Demo of the MOVE effect, CLICK ME!</a>
</div>
</body>
</html>

The default scriptaculous.js behaviour is that it will load all the necessary features. The user can modify this to include only the features that are wanted. In this case, the scriptaculous.js will be passed a comma separated list of needed features from of these: builder, effects, drag-drop, controls, and slider. Important note is that some of the scripts may require other scripts to be loaded in order.

Example limitation to only effects and drag-drop features;

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

There is a dedicated wiki at the Scriptaculous website, which you can refer for a comprehensive set of examples and full documentation.

Scriptaculous documentation wiki


--Maveric 19:48, 16 May 2010 (UTC)

This page was last modified on 16 November 2011, at 05:27.
167 page views in the last 30 days.
×