Your SlideShare is downloading. ×
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply



Published on

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. +Julie IskanderLecturer at ITIMSc. Communication and Electronics
  • 2. A UI library built upon Prototype Framework, developed byThomas Fuchs. Includes: scriptaculous.js builder.js effects.js dragdrop.js controls.js slider.js sound.js
  • 3. <script src=“scriptaculous.js”></script>  adds all libraries <script src=“scriptaculous.js?load=effects,dragdrop”></script> adds only specified ones
  • 4. +
  • 5. +Sites that use
  • 6. +Animation Framework
  • 7. +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.
  • 8. +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:50and 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‟ })
  • 9. +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}
  • 10. +Core Effects Effect.ScrollTo scroll the browser to a specific element new Effect.ScrollTo(„‟)
  • 11. +Combination Effect a group of core effects that run in parallel to create complexanimation. 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>
  • 12. +Effect Callbacks passed into options argument beforeStart, afterStart beforeUpdate, afterUpdate beforeFinish,afterFinish
  • 13. +Draggables, Droppables ,Sortables
  • 14. +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 initialplace at end of drag snap: false, [x,y],function, the delta x and delta y that the elementcan be dragged to. handle: element or class name of element that acts as draghandler. More :
  • 15. +Draggable Callbacks onStart onDrag onEnd
  • 16. +Droppable Objects that manages all draggable elements. It listens for mouse-over events to determine when an element is beingdragged into it. Then negotiates with draggable to determine if they‟recompatible. 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:
  • 17. +Sortable A common application of drag-and-drop, where elements moverelative to one another. Sortable.create(„element‟, options): Options tag: default „li‟, is the tag name of children elements that can be usedas draggables. More here:
  • 18. +Advanced Controls
  • 19. +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 touse], options); Ajax.Autocompleter new Ajax.Autocompleter(„textboxID‟,‟divID‟, „url‟);
  • 20. +AutoCompleter.Local<input type="text" name="pname" id="pname" size="30"><div id="suggestions"></div>newAutocompleter.Local(pname,suggestions,[Ahmed,Alaa,Mohammed,Ahmaad,Zara,Mona],{choices:2});
  • 21. +Slider Creates a slider control that can be used to drag a handle to aspecific spot vertically or horizontally. new Slider(„handle‟,‟track‟ options) handle: element used as handle track element used as track
  • 22. +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
  • 23. +Slider Functions: setValue(value) setDisabled() setEnabled() callbacks onSlide(value) onChange(value) More here:
  • 24. +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 avoidexceptions
  • 25. +References Practical Prototype and, AndrewDupont , 2008