YUI Library

   YUI Library

This page contains information about the '''Yahoo! User Interface (YUI) Library'''.

About YUI
The YUI Library is a set of utilities and controls written in JavaScript and including several core CSS resources. It can be utilised for building web applications using techniques such as DOM scripting, DHTML and AJAX. All components in the YUI Library have been released as open source under a BSD license and are free for all uses!
 * developer.yahoo.com/yui — developer's website with downloads and such.
 * yahoo groups: ydn-javascript — developer's mailing list

YUI is fully tested for all A-Grade browsers: See yahoo.com YUI Browser Support.

Below are details of some useful YUI applications that have been released:

YUI Slideshow
A simple slideshow that handles both images and HTML. Allows you to choose transition effect (slide, fade, squeeze) and choose to load on demand.
 * http://www.madb.net/slideshow/

Javascript and CSS
You need to load the following javascript and css files:
 * YUI Files:
 * yahoo.js
 * dom.js
 * event.js
 * connection.js — for remote html slides
 * animation.js
 * Slideshow files:
 * slideshow.js
 * slideshow.css

Container DIV
Define a container for the slideshow with the  class (inline):

Slides
Define the slides on the page:
 * html slides — div elements children of the container, with the class.
 * images slides — img elements children of the container, with the class . The first slide should also have the class.

Remote HTML content is put in a containing div when loaded. Remote images loaded on demand have class applied to them prior to their insertion in the DOM tree.

Javascript
The slideshow is constructed by initiating the class. The constructor takes 2 arguments:
 * id — of the container.
 * Configuration object, with the following fields:
 * frames — an array of objects representing the remote slides to load on demand (see below for details),
 * effect — to apply when transitioning to the next slide. Available effects are:
 * YAHOO.myowndb.slideshow.effects.slideUp
 * YAHOO.myowndb.slideshow.effects.slideRight
 * YAHOO.myowndb.slideshow.effects.slideLeft
 * YAHOO.myowndb.slideshow.effects.squeezeLeft
 * YAHOO.myowndb.slideshow.effects.squeezeRight
 * YAHOO.myowndb.slideshow.effects.squeezeUp
 * YAHOO.myowndb.slideshow.effects.squeezeDown
 * YAHOO.myowndb.slideshow.effects.fadeOut
 * YAHOO.myowndb.slideshow.effects.fadeIn
 * slide_selector — function taking 2 parameters that returns an integer being the index of the next frame:
 * number_of_slides
 * current frame index
 * interval — in milliseconds between 2 transitions when loopint through slides.

Here's the code for a random slide selector:

Remote slide objects have 3 fields:
 * type — can be remote_html (for html content) or image_url
 * value — the url where the remote slide can be found
 * id — the id to give to the slide.

Here is how the slideshow on the homepage was defined:

You can start the looping by calling the loop method, like this:

New effects
Effects are simple objects with following fields:
 * setup — a function that prepares the next slide for the transition (argument is the next frame)
 * get_animation — a function taking the active element (to which the effect will apply) as argument, and returning the YAHOO.util.anim or YAHOO.util.motion instance built with that element

Here is the definition of the slideUp effect: