Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.
vs.
What's wrong with each of these web sites?
alert
unless absolutely necessarymeta
tagsScriptaculous is another JavaScript library, built on top of Prototype, that adds:
<script src="http://www.cs.washington.edu/education/courses/cse190m/08sp/prototype.js" type="text/javascript"></script> <script src="http://www.cs.washington.edu/education/courses/cse190m/08sp/scriptaculous.js" type="text/javascript"></script>
.js
files from its src/
folder to the same folder as your projectThere's no complete online API documentation (argh), but the following are useful resources:
(Appearing)
(Disappearing)
(Getting attention)
new Effect.name(element or id);
new Effect.Shake("sidebar"); var buttons = $$("results > button"); for (var i = 0; i < buttons.length; i++) { new Effect.Fade(buttons[i]); }
Effect
and passing the element's DOM object or its id
new Effect.name(element or id, { option: value, ... option: value, } );
new Effect.Opacity("my_element", { duration: 2.0, from: 1.0, to: 0.5 } );
delay
,
direction
,
duration
,
fps
,
from
,
queue
,
sync
,
to
,
transition
new Effect.Fade("my_element", { 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 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, 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>
window.onload = function() { new Autocompleter.Local( "bands70s", "bandlistarea", ["ABBA", "AC/DC", "Aerosmith", "America", "Bay City Rollers", ...], {} ); };
Ajax.Autocompleter
new Ajax.Autocompleter( element or id of text box, element or id of div, url, { options } );
ul
with li
elements in itparamName
,
tokens
,
frequency
,
minChars
,
indicator
,
updateElement
,
afterUpdateElement
,
callback
,
parameters
Scriptaculous provides several classes 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 event<div id="draggabledemo1">Draggable demo. Default options.</div> <div id="draggabledemo2">Draggable demo. {snap: [40,40], revert: true}</div>
window.onload = 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>
window.onload = 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
onChange
,
onUpdate
onUpdate
to work, each li
must have an id
attributeSortable.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>
window.onload = function() { Sortable.create("simpsons"); };
window.onload = function() {
Sortable.create("simpsons", {
onUpdate: listUpdate
});
};
function listUpdate() {
// I can do anything I like here; create an Ajax.Request, etc.
new Effect.Shake("simpsons");
}
problem: rearranged items are not "remembered"; they return to their original order when we revisit the page
Sortable
has events you can handle when the list order changes:
onChange
: during a drag, each time the list order changesonUpdate
: when a drag is done and the order has changedSortable
's event, post
the data to the server to save itSortable.create
on the list again to fix itonUpdate
event will not work unless each li
has an id
of the form listID_index
, e.g. "simpsons_0"
<ol id="simpsons"> <li id="simpsons_0">Homer</li> <li id="simpsons_1"u>Marge</li> <li id="simpsons_2">Bart</li> <li id="simpsons_3">Lisa</li> <li id="simpsons_4">Maggie</li> </ol>
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
Modify our ubiquitous ASCII art program in the following ways:
ascii.php
with no parameters to get a list of names separated by \n
.