Tuesday, November 7th, 2006
Yahoo! UI: BasicDialog Updated
Jack Slocum has updated his fantastic YAHOO.ext package yet again.
The main changes are:
CSS Sprites
First off, many of the images for the TabPanel, BasicDialog, BorderLayout and Button classes have been made into CSS sprites. This should improve loading time for images and prevent flickering. All components developed in the future will use CSS sprites from the beginning so I don’t have to go back and redo them!
Gray Theme
There’s also a new theme for the components mentioned above “ytheme-gray”. It changes my nice blue color scheme into an equally smooth looking gray color scheme. :) To use it, you just add the class “ytheme-gray” to the body element or apply it to individual elements by putting it on a container element. Here’s a BasicDialog with the gray theme:
BasicDialog (New Class)
The YUI dialog classes are great for most implementations and relatively simple to implement. I have no desire to try to replace them with my own Dialog classes. Sometimes though, I need a lightweight dialog that displays something, looks nice and offers features like resizing, drag and drop and tabs. Kind of like my comments dialog on this blog. I got started with this idea, and in the end I ended up with a Dialog class that I find incredibly useful. It also mixes well with the rest of YAHOO.ext.
For more information, I would recommend taking a look at the BasicDialog.js file in the download. All of the public configuration options and methods are documented. Here’s a short list of features:
- Automatically create tabs from markup
- Automatic body height synchronization (for easy overflow scrolling)
- Animation targeting (to animate from any existing element, like the comments window)
- 4 way resizing
- Drag and drop moving
- Modal or non-modal
- Easy to use / nice looking custom button implementation
- Automatic state management across page views (location and size) via YAHOO.ext.state
- Easy key listeners
Check out some examples:
The new django book uses the inline comment system that Jack created.
Based on his latest work, I suspect Jack is either secretly a designer in previous years, or has someone doing some work for him. Very nice UI stuff! A rare find in web developers these days. :)
Nice, i am almost ready to releae a jQuery dialog plugin (98% finished) so stay tuned for that. It has a lot of default window features you would expect from a dialog, like the drag/drop part, modal/non-modal, listeners and themability of it.
yahoo is sure developing itself to a very stable ajax library
http://googlelogs.blogspot.com
[...] The Rails community could learn a lot from the Django book that is being produced and annotated right now. The annotations are done with the YAHOO.ext library, and it all works together very nice. [...]