Scriptaculous

+
Julie Iskander
Lecturer at ITI
MSc. Communication and Electronics

+
Script.aculo.us
 A UI library built upon Prototype Framework, developed by
Thomas Fuchs.
 Includes:
 scriptaculous.js
 builder.js
 effects.js
 dragdrop.js
 controls.js
 slider.js
 sound.js

+
Script.aculo.us
 <script src=“scriptaculous.js”></script>  adds all libraries
 <script src=“scriptaculous.js?load=effects,dragdrop”></script>
 adds only specified ones

+
Sites that use script.aculo.us
 http://www.nasa.gov/
 http://www.apple.com/
 http://www.gucci.com/us/home
 http://rubyonrails.org/

+
Animation
 To create animations, you need:
 target to be animated
 starting and ending point
 A way to get from starting to ending point incrementally
 Effect
 is the modification, over time, of any aspect of an element.

+
Core Effects
 Effect.Morph:
 takes an element and some css properties and slowly change them
 new Effect.Morph(„box‟,{style:”left:50px; top:50px”, duration:1.0});
 The box is moved through one second from its location to top:50
and left:50
 $(„box‟).morph(……);
 Effect.Move:
 move an element to a certain x and y using absolute/relative
 new Element.Move(„element‟,{x:5 , y: 5 , mode:‟absolute‟ })

+
Core Effects
 Effect.Scale:
 change the size of the element by a given percentage
 new Effect.Scale(„box‟,150)
 can also receive an Options object
{
scaleContent:true,
scaleFrom:50,
scaleX:false,
scaleY:true
}

+
Core Effects
 Effect.ScrollTo
 scroll the browser to a specific element
 new Effect.ScrollTo(„‟)

+
Combination Effect
 a group of core effects that run in parallel to create complex
animation.
 Effect.Fade / Effect.Appear
 animate opacity of element
 Effect.BlindUp / Effect.BlindDown
 use blinds effect to show or cover element
 Effect.SlideUp / Effect.SlideDown
 use sliding effect to show or hide element.
 Element must be double wrapped in block elements
 <div id=“box”><div>BOX</div></div>

+
Effect Callbacks
 passed into options argument
 beforeStart, afterStart
 beforeUpdate, afterUpdate
 beforeFinish,afterFinish

+
Draggables, Droppables ,
Sortables

+
Draggable
 Anything that can be dragged around the page.
 Examples
 new Draggable(„element‟)
 new Draggable(„element‟, options)
 Options
 revert: true/false or function, if true move the element back to initial
place at end of drag
 snap: false, [x,y],function, the delta x and delta y that the element
can be dragged to.
 handle: element or class name of element that acts as drag
handler.
 More : http://madrobby.github.io/scriptaculous/draggable/

+
Draggable Callbacks
 onStart
 onDrag
 onEnd

+
Droppable
 Objects that manages all draggable elements.
 It listens for mouse-over events to determine when an element is being
dragged into it. Then negotiates with draggable to determine if they‟re
compatible.
 Not class, can‟t be instantiated.
 Droppables.add(„element‟,options);
 Options:
 accept: class name of elements that can be dropped.
 Callbacks
 onHover
 onDrop
 More here: http://madrobby.github.io/scriptaculous/droppables/

+
Sortable
 A common application of drag-and-drop, where elements move
relative to one another.
 Sortable.create(„element‟, options):
 Options
 tag: default „li‟, is the tag name of children elements that can be used
as draggables.
 More here: http://madrobby.github.io/scriptaculous/sortable/

+
AutoCompleter
 Gives the developer the control to suggest input to textbox.
 It is indeed a textbox + div with a ul inside it
 There are 2 types
 Autocompleter.Local
 new Autocompleter.Local(„textboxID',„div id',[array of strings to
use], options);
 Ajax.Autocompleter
 new Ajax.Autocompleter(„textboxID‟,‟divID‟, „url‟);

+
AutoCompleter.Local
<input type="text" name="pname" id="pname" size="30">
<div id="suggestions"></div>
new
Autocompleter.Local('pname','suggestions',['Ahmed','Alaa','Moha
mmed','Ahmaad','Zara','Mona'],{choices:2});

+
Slider
 Creates a slider control that can be used to drag a handle to a
specific spot vertically or horizontally.
 new Slider(„handle‟,‟track‟ options)
 handle: element used as handle
 track element used as track

+
Slider
 Options:
 axis: horizontal or vertical
 range: $R( , )  object range takes min value and max value
 values: []  array of acceptable values
 increment: 1;
 minimum
 maximum

+
Slider
 Functions:
 setValue(value)
 setDisabled()
 setEnabled()
 callbacks
 onSlide(value)
 onChange(value)
 More here: http://madrobby.github.io/scriptaculous/slider/

+
Control.Slider
#handle{
width: 50px;
height: 20px;
background-color: #ddd; }
<div id="track">
<div id="handle"></div>
</div>
new Control.Slider('handle','track')
Note that you must give width and height to handle to avoid
exceptions

+
References
 http://script.aculo.us/
 Practical Prototype and script.aculo.us, Andrew
Dupont , 2008

Scriptaculous

More Related Content

Viewers also liked

Similar to Scriptaculous

More from Julie Iskander

Recently uploaded

Scriptaculous