simple script.ac.ulous mike patterson the university of aberdeen
TRANSCRIPT
Simple Script.ac.ulous
Mike Patterson
The University of Aberdeen
What is Script.aculo.us?
• A set of JavaScript libraries to enhance the user interface of web sites.
• It provides among other things a visual effects engine, a drag and drop library, sortable lists and Ajax-based auto-completion.
• It’s really easy to use.
• It’s get the job done fast!
• Used on sites like Apple, NASA, CNN and web applications such as Twitter and Basecamp
Core Effects
• Effect.Move
• Effect.Opacity
• Effect.Scale
• Effect.Highlight
• Effect.ScrollTo
• Effect.Morph //1.7+
Effect Options { Speed }
• delay– Time in seconds before effect starts
• duration– How long (in seconds) from start to finish
• Example
new Effect.Highlight( ‘mydiv’ , { delay: 0.5, duration: 5.0 } )
Effect Options { transition }
• flicker – Randomly picks from last 25% of frames.
• linear – Steady transition.
• pulse – Runs through transitions five times.
• reverse – Does effect backward.
• spring – Overshoots final result then bounces back and forth to final value.
• Example
new Effect.Highlight(‘mydiv’, {duration: 10, transition: 'pulse'})
Effect.Move
• This effect moves an element by modifying its position attributes
• onclick="new Effect.Move( 'mydiv‘ , { x: 60, y: 30 } );
• Demo
Effect.Opacity
• This effect changes an element’s opacity (transparency)
• new Effect.Opacity( ‘mydiv’, { from: 1.0, to: 0.7, duration: 0.5 });
• Demo
Effect.Highlight
• This effect can draw attention to something important
• new Effect.Highlight(‘mydiv', {options});
• Demo
Morphing
• This effect changes the CSS properties of an element.
• $(‘mydiv’).morph(‘font-size:20px; color:#666666’);
• Demo
Combination Effects
• All the combination effects are based on the Core Effects• Effect.Appear, Effect.Fade • Effect.BlindDown, Effect.BlindUp • Effect.SlideDown, Effect.SlideUp • Effect.Pulsate • Effect.Squish • Effect.Fold • Effect.Grow • Effect.Shrink
• Can also be used with Effect.toggle onclick="Effect.toggle(’content_to_show’, ’slide’)“
• Techfest Demo
Sortable
• Demo• Setpoint
Ajax-based autocompletion
• new Ajax.Autocompleter(id of text field, id of div to populate, url, options);
• Demo
Highslide
• Highslide JS is open source JavaScript software, offering a Web 2.0 approach to popup windows. (http://vikjavev.no/highslide/)
• Really easy to use
• Very elegant
• Demo
Check List
• Will your users benefit? - are there real usability improvements?
• Think twice about when and what effects to add - "Because it's possible" is not a good argument. Don't overuse effects!
• I’m not a Javascript expert, nor a script.aculo.us expert but I like the fact that you can start using it “out of the box”
• Similar to JQuery, Dojo, Moo.fx Demo