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 ...
  }
});

Javascript Code Colorizer

Recently, I came across Pygments based Javacript code colorizer called Pygments Code Colorizer here. Very easy to use and supports lots of languages.

Just add the

<script src="http://www.pygments.com/js/init.js"></script>

and a pre tag that contains the code to be highlighted. That's it!!! Code highlighting on the fly using the power of Pygments. Another reason to rejoice is that Pygments.com is powered by Django.