John Resig and team have officially launched their long-awaited jQuery UI library early this morning. jQuery UI provides "higher-order" effects like magnification and drag-and-drop. It also provides themeable widgets (tabs, accordions, sortable tables, calendars, etc). Here are the key links:
My impression so far is that this initial release is a little rough. Like any ambitious cross-browser effort, it will go an iteration or two, gaining polish and stability.
A final note: if you're used to check in on the jQuery group for news, note that there's a separate group for UI: http://groups.google.com/group/jquery-ui.
I am very interested in online collaboration tools. This experiment is an early offshoot of some tools and techniques I am developing:
|A visual 'map' as a collaborative workspace. In this case, the goal is to build a visual representation of the Web 2.0 space, including entities (people, concepts, companies) and relationships among those entities.|
Feel free to participate! Just three things you need to do:
Try it out at http://web20.earthcode.com
HighlightFade by Blair Mitchelmore is a very thorough jQuery implementation of the "yellow fade" technique. Options include the type of fade (linear, sinusoidal, exponential), the duration, and a function to call on completion. The plugin weighs in at 3.5K (uncompressed, so it could be made smaller), and should handle all your yellow-fading needs.
tablesorter by Christian Bach is browser-side table sorter (click on a column heading to sort the table accordingly). It's fast (in the demo, sorts 400 rows in about .3 seconds), and it auto-detects the column type to provide the appropriate kind of sorting. For example, it automatically recognizes date vs. text vs. URL contents, and sorts accordingly. For URLs, it disregards the http/https/ftp/file prefix for sorting purposes, which is more likely to give you the sort you actually want. You can also define your own auto-detects, which usually involves 5-10 lines of code. The plugin is about 10.5K uncompressed.
Did you know there are lots more jQuery plugins listed on the wiki at http://proj.jquery.com/plugins? Note that the URL to the wiki will change when jQuery goes 1.0.
As you probably know, I've been a fan of jQuery for some time, and have been using it on some of my Rails projects instead of Prototype.js. I'm happy to be working with John Resig and the rest of the jQuey community to get the word out on this great library.
The final slide was some resources from the talk you may find useful:
- SF Wireless: http://wifi.earthcode.com
- jQuery tutorial: http://15daysofjquery.com
- jQuery CSS selectors: http://jquery.com/docs/CSS/
- jQuery interface library: http://eyecon.ro/interface
- jQuery interactive documentation: http://visualjquery.com
- JSLog: http://earthcode.com/blog/2005/12/jslog.html
- Rails & geocoding: http://earthcode.com/blog/2006/04/rails_geocoding_and_google_map.html
Since I last posted on Lightbox for modal dialogs in May, some additional relevant projects have sprung up. This is a roundup of more Lightbox-type modal dialog options. As you go about choosing the perfect script for your needs, Here are some questions to keep in mind:
- What's your content? Do you need to just display images? Or arbitrary HTML? Many scripts support both, and some are tailored around displaying images very easily.
- Is your content remote? You may need to retrieve your content from the server, or the content may already be rendered on the page in a hidden div. I actually find the second case the more common one -- the dialog content is already loaded on the page, and I just want to reveal it in a modal window.
- What are your bandwidth requirements? These scripts vary quite a bit in size. If you're building an internal application you can get away with a bulkier script, but otherwise you might want to look for one of the leaner ones.
- How important is look-and-feel? Some of these scripts offer a slick and customizable look, and others are more spartan. I appreciate the nice looking options, but usually end up using the scripts with less flourish. Your needs may be different.
- What JS Library are you using? Prototype? Moo.fx? Dojo? jQuery? Your choice may narrow the field for modal scripts, since you typically will not include another whole JS library just for the modal dialog functionality.
You may know from my previous posts that I've been moving away from Prototype/Scriptaculous and toward jQuery for JS/AJAX programming, primarily for jQuery's powerful selectors, code-shrinking chaining model, and light weight.
jQuery also has an active development community, working off of a plugin architecture which allows incremental inclusion of only the modules you need. The community is coming out with some awesome plugins, which will further shrink the functional gap between jQuery and Prototype/Scriptaculous. Below are three exceptional ones from the jQuery mailing list:
Draggable, sortable lists
All the major functions are here: dragging, sorting, target outlines, drop zone highlighting, drag-time ghosting.
Define a rectangle by clicking and dragging, and select the elements which fall within the rectangle -- just like selecting icons on your desktop or a group of photos in Picassa.
Accessible, unobtrusive tabs