Advanced Uses of jQuery UI


These are my notes from Scott Gonzalez's talk at the jQuery conference in Mountain View, California.

This talk isn't really about jQuery UI; it uses jQuery UI for the code samples, but it's about how to extend plugins using existing plugins.

jQuery UI provides full-featured, highly configurable ready-to-use widgets. Full featured plugins need to support a really wide range of use cases, both common and uncommon. If it's not possible to implement what you need using a plugin because you have a rare use case, then there's really no reason for someone to try really hard to get your plugin to serve their needs, when they might have an easier time with another, more generic plugin. Even if the plugin doesn't provide what you need, you should be able to bend the plugin to your will. Ready to use plugins need to "just work" right out of the box, even if it does have dozens of configurable options. You should be able to install it and use it, and it should do what you expect it to do. If you have to provide five or ten options just for the default call, people will be frustrated while using your plugin.

Doing these things at the same time is extremely hard. Originally we built plugins like Draggable and Sortable and made them huge to handle a lot of use cases. Each has over two dozen options that you can configure (!). They're very flexible, but they don't have a simple API. The documentation is several pages long, which can confuse users.

What can we do?

The most complicated plugin that we released in 1.8 is Autocomplete. Jorn's autocomplete plugin has 20 options for caching, custom formatting, and multiple word support. It's a little confusing, but if you look through all the docs you can figure out how to get the plugin to do what you want.

We created an autocomplete plugin with 4 options (including 'disable') with six different events that you can listen to. We made sure that we could build everything that already existed in Autocomplete with our new plugin, which is half the size with 1/5th of the options.

One of the options in the new Autocomplete plugin is 'source', similar to the first parameter that you'd pass to the old Autocomplete plugin. We provided built-in handling for the most common cases, but we also needed to provide a way to build as much custom functionality that you want. So, you can also pass in a function that takes in a request, and pass that to the response function. In code:

source: function( request, response ) {
if (request.term in cache ) {
response( cache[ request.term ] );

This builds-in AJAX caching for previously-searched-for terms.

Did you enjoy this post? Please spread the word.