1 / 13

Simple Script.ac.ulous Mike Patterson The University of Aberdeen

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.

farrah
Download Presentation

Simple Script.ac.ulous Mike Patterson The University of Aberdeen

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Simple Script.ac.ulous Mike Patterson The University of Aberdeen

  2. 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

  3. Core Effects • Effect.Move • Effect.Opacity • Effect.Scale • Effect.Highlight • Effect.ScrollTo • Effect.Morph //1.7+

  4. 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 } )

  5. 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'})

  6. Effect.Move • This effect moves an element by modifying its position attributes • onclick="new Effect.Move( 'mydiv‘ , { x: 60, y: 30 } ); • Demo

  7. Effect.Opacity • This effect changes an element’s opacity (transparency) • new Effect.Opacity( ‘mydiv’, { from: 1.0, to: 0.7, duration: 0.5 }); • Demo

  8. Effect.Highlight • This effect can draw attention to something important • new Effect.Highlight(‘mydiv', {options}); • Demo

  9. Morphing • This effect changes the CSS properties of an element. • $(‘mydiv’).morph(‘font-size:20px; color:#666666’); • Demo

  10. 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

  11. Sortable • Demo • Setpoint Ajax-based autocompletion • new Ajax.Autocompleter(id of text field, id of div to populate, url, options); • Demo

  12. 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

  13. 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

More Related