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

Javascript Code Colorizer

Sat 05 January 2008 by Thejaswi Puthraya

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 …

read more