What Can the Yahoo! User Interface (YUI) Library Do for Your Site?, Page 3
As I mentioned earlier, the DD object has the actual Drag & Drop implementation where the linked element follows the mouse cursor during a drag. If only a drag was all that required, no extra logic would be written, but the resize is custom and not part of the YUI. Again, the first parameter to the DD is the ID of the element to be dragged. The outer panelDiv (with inner handleDiv) will be dragged when the mouse is over it, and resized when the mouse drags the inner handleDiv.
Here is the CSS look-and-feel definition for the two DIV elements:
Note that inner handleDiv is absolutely positioned inside the outer panelDiv, which has a relative position. As you can see by adding a few lines of YUI code, any element can be made drag enabled, and by adding a small amount of custom code, any element cam become resizable too.
The Drag is just one of the examples of included utilizes. Other utilizes include fine-grained Event handing, back button utility, or manipulation of the DOM structure.
The YUI comes with a rich set of pre-built widgets, and implementing them also takes very little coding. Widgets such as Sliders, Grids, DataTables (with inline editing), Calendar, TreeView, and Tabs let developers easily incorporate advanced features into their projects.
And, if all of this was not enough, there is also a generous library of animation effects that can be mixed and matched to create an infinite number of possible outcomes, applicable to any visible DOM element. One neat effect that I have not seen in other frameworks is the auto scroll effect of the text inside of the textarea, either vertically or horizontally.
Download the Source Code
Download the source code for this article here.
In this article, I have covered the Yahoo User Interface (YUI) library in some detail. The YUI currently competes with other AJAX frameworks, such as Dojo, Backbase, or Scrip.aculo.us. Even though it is a free product, it has great documentation, examples and a lot of features. If you are looking for a solid AJAX framework to help with rich user interface development or just want to code some AJAX, the YUI can be a great start. It also will be interesting to see how the YUI evolves in the future and what features Yahoo or the open source community will introduce into it.
- Yahoo! User Interface Library (YUI): http://developer.yahoo.com/yui/
- Ten Things Yahoo! Is Already Doing with the YUI Library
- 15 Things you can do with Yahoo! UI
About the Author
Vlad Kofman is working on enterprise-scale projects for the major Wall Street firms. He has also worked on defense contracts for the U.S. government. His main interests are object-oriented programming methodologies, UI, and design patterns.