Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. +Julie IskanderLecturer at ITIMSc. Communication and Electronics
  2. 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. 3. <script src=“scriptaculous.js”></script>  adds all libraries <script src=“scriptaculous.js?load=effects,dragdrop”></script> adds only specified ones
  4. 4. +
  5. 5. +Sites that use
  6. 6. +Animation Framework
  7. 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. 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. 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. 10. +Core Effects Effect.ScrollTo scroll the browser to a specific element new Effect.ScrollTo(„‟)
  11. 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. 12. +Effect Callbacks passed into options argument beforeStart, afterStart beforeUpdate, afterUpdate beforeFinish,afterFinish
  13. 13. +Draggables, Droppables ,Sortables
  14. 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. 15. +Draggable Callbacks onStart onDrag onEnd
  16. 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. 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. 18. +Advanced Controls
  19. 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. 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. 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. 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. 23. +Slider Functions: setValue(value) setDisabled() setEnabled() callbacks onSlide(value) onChange(value) More here:
  24. 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. 25. +References Practical Prototype and, AndrewDupont , 2008