• Save
Upcoming SlideShare
Loading in...5







Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Scriptaculous Scriptaculous Presentation Transcript

  • +Julie IskanderLecturer at ITIMSc. Communication and Electronics
  • +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
  • +Script.aculo.us <script src=“scriptaculous.js”></script>  adds all libraries <script src=“scriptaculous.js?load=effects,dragdrop”></script> adds only specified ones
  • +
  • +Sites that use script.aculo.us http://www.nasa.gov/ http://www.apple.com/ http://www.gucci.com/us/home http://rubyonrails.org/
  • +Animation Framework
  • +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.
  • +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‟ })
  • +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}
  • +Core Effects Effect.ScrollTo scroll the browser to a specific element new Effect.ScrollTo(„‟)
  • +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>
  • +Effect Callbacks passed into options argument beforeStart, afterStart beforeUpdate, afterUpdate beforeFinish,afterFinish
  • +Draggables, Droppables ,Sortables
  • +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/
  • +Draggable Callbacks onStart onDrag onEnd
  • +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/
  • +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/
  • +Advanced Controls
  • +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‟);
  • +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});
  • +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
  • +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
  • +Slider Functions: setValue(value) setDisabled() setEnabled() callbacks onSlide(value) onChange(value) More here: http://madrobby.github.io/scriptaculous/slider/
  • +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
  • +References http://script.aculo.us/ Practical Prototype and script.aculo.us, AndrewDupont , 2008