April 24, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

What Can the Yahoo! User Interface (YUI) Library Do for Your Site?, Page 3

  • April 12, 2007
  • By Vlad Kofman, Vlad Kofman
  • Send Email »
  • More Articles »

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.

YUI Widgets

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.

Conclusion

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.

References

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.





Page 3 of 3



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel