jQuery UI is a all-in-one package from the creators of jQuery, it is a suite of tools and effects that are designed to cover everything that a developer/designer would want in their site.
One of the things that makes jQuery UI different from the other add-on libraries is 'Theme Roller'. Theme Roller is a webapp on the jQuery UI site that allows you to create a customized theme that you can use on your site for windows, borders, fonts, etc. After you select your colors and fonts you can download a zip file containing all the images, css, and even a demo html page showing you an example of how to use your newly aquired theme.
If that isn't cool enough (which in our case, it's really not all that useful) the other features of jQuery UI are enough to make you want to include at least a bit of it in your site.
The new effects suite has plenty of eye-candy. It containes everything from 'drop-ins', to animated div explosions. The new effects pack really does seem to have it all. Check the Sandbox for a few examples.
The UI suite also includes Draggables, Droppables, Sortables, Selectables, and Resizables. These add new controls to the keyboard and mouse. And of course we have new widgets, a built in accordion (so no more un-offical plug-ins!) Autocomplete, Colorpicker, Datepicker, and more.
Here is the code for the first sandbox, the explode effect.
$(document).ready(function(){
$("#sandbox .button").click(function(){
$("#div .box").hide("explode", {pieces: 25}, 1000);
});
});
Something new here is that with the new UI effects in the .hide() function I can now pass some new params. I passed "explode" so that the explode effect would be called, then passed in "pieces: 25" so that the effect would know to break the div into 25 pieces, and of course we ended the function by setting the speed at which we wanted the effect to occur.
For another example of what the UI library brings, lets set up a draggable box. In the second sandbox we've already set the div to be draggable. Go ahead and drag it around the page. We've also set the reset button to lock the div in place where it is when it's clicked. To move it again, click the go button.
$(document).ready(function(){
$("#div2 .box").draggable(); //init setup of the div to be draggable
$("#sandbox2 .button").click(function(){
$("#div .box").draggable("enable");
});
$("#sandbox2 .reset").click(function(){
$("#div2 .box").draggable("disable");
});
});
The jQuery UI site is still fairly new and doesn't have very many tutorials posted, but they do have a comprehensive docs section. It covers the standard fare of how to set up an effect with an example or two. The tutorials section appears to have been written by volunteers (quality varies) but it does give you an idea of what you can do with the ui library.
The entire UI library is 261KB Uncompressed, 90KB Packed, and 156KB (pre-gzip) Minified (38KB post-gzip!). While it can be fairly sizable, jQuery has followed in the footsteps of MooTools, meaning that you can break the lib down and only include the features you need. This page for example is only using the effects-core, effects-explode, ui-core, and ui-draggable js files. Using yui compression (pre-gzip) the total for all four files is only 31.4KB of space. In case you were wondering, with gzip turned on, those four files take up less than 10KB, not too shabby for a little eye-candy.
