Extending JQuery UI widgets

JQuery UI is a useful project that provides theme-able widgets built on top of the JQuery project. It has an active community and lots of community contributed widgets that do a lot of interesting and sometimes out of the world stuff!

For a mini-project, I had to work on replicating the GMail filter labels widget. I looked around if any were available and the closest I came to was the dropdownchecklist project. Then I had to figure out how to extend this widget and in the process learned a lot of cool stuff that I would love to share on this post. These are two very good posts that you must read before you try to extend widgets:

• Understanding jQuery UI widgets: A tutorial
• Extending JQuery UI widgets

Here are some observations from my attempt at overriding the widget:

• The JQuery extend method is the best way to extend the widgets.
• JQuery UI hides methods that start with an _ (underscore) from being called by the instance.

So here are two snippets of extending the widget:

$.ui.widgetName.prototype.someMethod = function(someArgs) {
  // Function body ...
}

$.extend($.ui.widgetName.prototype, {newMethod: function(someArgs) {
    // Function body ...
  }
});