YUI-FX Beta. Effects Library With Unobtrusive Javascript

During my “to know us better” with the YUI library, I decided that the best way to learn it is to build an FX library. So here it is, the YUI-FX (not even beta). My plan was to create an unobtrusive library that the only thing someone should do in order to use it, would be as simple as assigning class names to elements. Each element should be assigned an ID property and a class name of “yuitools”  too. I managed to add 3 effects on the library (it is quite a thing for 1 hour work). The effects are:

Tooltips

The library is able to display skinnable tool-tips on every element with an animated unfolding effect. The way to use the tool-tip effect is:

<p id="1" class="yuitools tooltip[Place the text of the tooltip here]">Normal paragraph text here</p>

Resize

The resize effect can be added to any element that supports widths and heights. The value assigned can be a positive one, like the example that follows, or a negative one. The way to use it is similar to the tool-tip :

<img id="2" class="yuitools resize[+8]" />

Expose

This effect animates an element’s color to the value assigned from the expose class. The element should first be assigned a background color property from CSS or inline style property. To use it, you should assign the ending color with the expose class:

<div id="3" class="yuitools expose[#eeefff]">Text here</div>

You can also combine effects by adding more class names:

<p id="4" class="yuitools expose[#000000] tooltip[This paragraph combines effects]"></p>

Requirements

You should first link to the dependancy YUI files. For example up until now, the YUI-FX library depends on:

1. Yahoo DOM Event,
2. Animation and
3. Container utility.

Download and Demo

You can download the library or view a live demo.

Notice:

This is a first “hands on” on the library. Please if you think that something should be done differentely then post a comment and feedback on it.

Popularity: 2%

Related posts:

1. Essential Unobtrusive Javascript Effects That Will Improve Your Site There are some effects that need a lot of coding...
2. Creating an Unobtrusive Javascript Image Callery Using YUI The Yahoo User Interface (YUI) is a set of utilities...
3. Yet Some More Excellent JavaScript Libraries And Tools These are some Javascript libraries, frameworks and tools that can...
4. The Javascript Libraries That Shape The New Web Web is like sea. It is always in the move...
5. YUI Mac Like Style Desktop When i first saw jQuery desktop i was amazed of...