I’m wrapping up my first jQuery UI widget (see multiselect on GitHub) and thought it would be useful to share some notes I took on the widget factory & widget development in general.  I personally found development on the factory to be quite enjoyable; a lot of functionality is available right out the box (custom events, ability to change options after initialization) and idioms you might not otherwise consider, like widget destruction.  Furthermore, it imposes a clean object-literal development structure with public and private methods, making it much easier to start a project or maintain other’s projects.

Throughout this blog post I will be showing you various ways to modify the jQuery UI dialog widget source to add your own features.  I do not actually recommend doing this however, because widgets can just as easily be extended.  The concepts are the same though and are easily adaptable to your own project. This post also assumes you are already familiar with the widget factory; if you aren’t, be sure to familiarize yourself first.

_init() and _create()

The widget factory automatically fires the _create() and _init() methods during initialization, in that order.  At first glance it appears that the effort is duplicated, but there is a sight difference between the two.  Because the widget factory protects against multiple instantiations on the same element,  _create() will be called a maximum of one time for each widget instance, whereas _init() will be called each time the widget is called without arguments:

$(function(){
 
	// _create() and _init() fire on the first call.
	$("div").mywidget();
 
	// a widget has already been instantiated on the div, so this time
	// only _init will fire.
	$("div").mywidget();
 
	// however, once the widget is destroyed...
	$("div").mywidget("destroy");
 
	// both _create() and _init() will fire.
	$("div").mywidget();
 
});

So how do you know where to place which logic?  Use _create to build & inject markup, bind events, etc. Place default functionality in _init().  The dialog widget, for example, provides an autoOpen parameter denoting whether or not the dialog should be open once the widget is initialized; a perfect spot for _init! Continue Reading »