Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller.
Scriptaculous : a JavaScript library, built on top of Prototype, that adds:
<script src="http://www.cs.washington.edu/education/courses/cse190m/09sp/prototype.js" type="text/javascript"></script> <script src="http://www.cs.washington.edu/education/courses/cse190m/09sp/scriptaculous.js" type="text/javascript"></script>
.js
files from its src/
folder to the same folder as your project
(appearing)
(disappearing)
(Getting attention)
element.effectName(); // for most effects // some effects must be run the following way: new Effect.name(element or id);
$("sidebar").shake(); var buttons = $$("results > button"); for (var i = 0; i < buttons.length; i++) { buttons[i].fade(); }
element.effectName( { option: value, option: value, ... } );
$("my_element").pulsate({ duration: 2.0, pulses: 2 });
{}
)delay
,
direction
,
duration
,
fps
,
from
,
queue
,
sync
,
to
,
transition
$("my_element").fade({ duration: 3.0, afterFinish: displayMessage }); function displayMessage(effect) { alert(effect.element + " is done fading now!"); }
beforeStart
,
beforeUpdate
,
afterUpdate
,
afterFinish
afterFinish
event fires once the effect is done animating
Effect
object as its parameter
element
, options
, currentFrame
, startOn
, finishOn
Shrink
) are technically "parallel effects", so to access the modified element, you write effect.effects[0].element
rather than just effect.element
Scriptaculous provides several objects for supporting drag-and-drop functionality:
Draggable
: an element that can be draggedDraggables
: manages all Draggable
objects on the pageDroppables
: elements on which a Draggable
can be droppedSortable
: a list of items that can be reorderedDraggable
new Draggable(element or id, { options } );
handle
,
revert
,
snap
,
zindex
,
constraint
,
ghosting
,
starteffect
,
reverteffect
,
endeffect
onStart
,
onDrag
,
onEnd
Draggable
object, and the mouse eventDraggable
example<div id="draggabledemo1">Draggable demo. Default options.</div> <div id="draggabledemo2">Draggable demo. {snap: [40,40], revert: true}</div>
document.observe("dom:loaded", function() { new Draggable("draggabledemo1"); new Draggable("draggabledemo2", {revert: true, snap: [40, 40]}); });
Draggables
drags
,
observers
register
,
unregister
,
activate
,
deactivate
,
updateDrag
,
endDrag
,
keyPress
,
addObserver
,
removeObserver
,
notify
Droppables
Droppables.add(element or id, { options } );
accept
,
containment
,
hoverclass
,
overlap
,
greedy
onHover
,
onDrop
Draggable
, the Droppable
, and the event<img id="product1" src="images/shirt.png" alt="shirt" /> <img id="product2" src="images/cup.png" alt="cup" /> <div id="droptarget"></div>
document.observe("dom:loaded", function() { new Draggable("product1"); new Draggable("product2"); Droppables.add("droptarget", {onDrop: productDrop}); }); function productDrop(drag, drop, event) { alert("You dropped " + drag.id); }
Sortable
Sortable.create(element or id of list, { options } );
ul
, ol
) as being able to be dragged into any orderDraggable
s and Droppable
stag
,
only
,
overlap
,
constraint
,
containment
,
format
,
handle
,
hoverclass
,
ghosting
,
dropOnEmpty
,
scroll
,
scrollSensitivity
,
scrollSpeed
,
tree
,
treeTag
Sortable.destroy
on itSortable
demo<ol id="simpsons"> <li id="simpsons_0">Homer</li> <li id="simpsons_1">Marge</li> <li id="simpsons_2">Bart</li> <li id="simpsons_3">Lisa</li> <li id="simpsons_4">Maggie</li> </ol>
document.observe("dom:loaded", function() { Sortable.create("simpsons"); });
Sortable
list eventsevent | description |
---|---|
onChange
|
when any list item hovers over a new position while dragging |
onUpdate
|
when a list item is dropped into a new position (more useful) |
document.observe("dom:loaded", function() { Sortable.create("simpsons", { onUpdate: listUpdate }); });
onChange
handler function receives the dragging element as its parameteronUpdate
handler function receives the list as its parameterSortable
list events example
document.observe("dom:loaded", function() {
Sortable.create("simpsons", {
onUpdate: listUpdate
});
});
function listUpdate(list) {
// can do anything I want here; effects, an Ajax request, etc.
list.shake();
}
Sortable
eventsonUpdate
to work, each li
must have an id
of the form listID_index
<ol id="simpsons"> <li id="simpsons_0">Homer</li> <li id="simpsons_1">Marge</li> <li id="simpsons_2">Bart</li> <li id="simpsons_3">Lisa</li> <li id="simpsons_4">Maggie</li> </ol>
Sortable.create
on the list again to fix itScriptaculous offers ways to make a text box that auto-completes based on prefix strings:
Autocompleter.Local
:
auto-completes from an array of choices
Ajax.Autocompleter
:
fetches and displays list of choices using Ajax
Autocompleter.Local
new Autocompleter.Local( element or id of text box, element or id of div to show completions, array of choices, { options } );
div
to store the auto-completion matches
ul
that you can style with CSSclass
of selected
{
}
choices
, partialSearch
, fullSearch
, partialChars
, ignoreCase
Autocompleter.Local
demo<input id="bands70s" size="40" type="text" /> <div id="bandlistarea"></div>
document.observe("dom:loaded", function() { new Autocompleter.Local( "bands70s", "bandlistarea", ["ABBA", "AC/DC", "Aerosmith", "America", "Bay City Rollers", ...], {} ); });
<input id="bands70s" size="40" type="text" /> <div id="bandlistarea"></div>
#bandlistarea {
border: 2px solid gray;
}
/* 'selected' class is given to the autocomplete item currently chosen */
#bandlistarea .selected {
background-color: pink;
}
Ajax.Autocompleter
new Ajax.Autocompleter( element or id of text box, element or id of div to show completions, url, { options } );
ul
with li
elements in itparamName
,
tokens
,
frequency
,
minChars
,
indicator
,
updateElement
,
afterUpdateElement
,
callback
,
parameters
Ajax.InPlaceEditor
new Ajax.InPlaceEditor(element or id, url, { options } );
okButton
,
okText
,
cancelLink
,
cancelText
,
savingText
,
clickToEditText
,
formId
,
externalControl
,
rows
,
onComplete
,
onFailure
,
cols
,
size
,
highlightcolor
,
highlightendcolor
,
formClassName
,
hoverClassName
,
loadTextURL
,
loadingText
,
callback
,
submitOnBlur
,
ajaxOptions
onEnterHover
,
onLeaveHover
,
onEnterEditMode
,
onLeaveEditMode
Ajax.InPlaceCollectionEditor
new Ajax.InPlaceCollectionEditor(element or id, url, { collection: array of choices, options } );
Ajax.InPlaceEditor
that gives a collection of choicescollection
option whose value is an array of strings to choose fromAjax.InPlaceEditor
method | description |
---|---|
Sound.play("url");
|
plays a sound/music file |
Sound.disable();
|
stops future sounds from playing (doesn't mute any sound in progress) |
Sound.enable();
|
re-enables sounds to be playable after a call to Sound.disable()
|
Sound.play("music/java_rap.mp3"); Sound.play("music/wazzaaaaaap.wav");
Sound.play('', {replace: true});
new Control.Slider("id of knob", "id of track", {options});
Builder
- convenience class to replace document.createElement
:
var img = Builder.node("img", { src: "images/lolcat.jpg", width: 100, height: 100, alt: "I can haz Scriptaculous?" }); $("main").appendChild(img);