Extending JQuery UI widgets

Tue 27 July 2010 by Thejaswi Puthraya

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:

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:

Method - 1

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