Your SlideShare is downloading. ×
Scriptaculous
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

Scriptaculous

751

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
751
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. +Julie IskanderLecturer at ITIMSc. Communication and Electronics
  • 2. +Script.aculo.us 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.aculo.us <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 script.aculo.us http://www.nasa.gov/ http://www.apple.com/ http://www.gucci.com/us/home http://rubyonrails.org/
  • 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 : http://madrobby.github.io/scriptaculous/draggable/
  • 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: http://madrobby.github.io/scriptaculous/droppables/
  • 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: http://madrobby.github.io/scriptaculous/sortable/
  • 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: http://madrobby.github.io/scriptaculous/slider/
  • 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 http://script.aculo.us/ Practical Prototype and script.aculo.us, AndrewDupont , 2008

×