jQuery UI 1.8 Widget Factory

jQuery UI 1.8 is set to have its final release any moment now and with it comes an updated Widget Factory.  If you haven’t used the widget factory before it’s a great piece of code that does the generic jQuery plugin type of things for you.  You can read more about the widget factory in this older post I did about it.

In jQuery UI 1.8 the Widget Factory gets a few very welcomed changes.  First default options are no longer defined outside of the widget, you now add an options property to the object you are passing $.widget and it will take care of merging your defined default options with the options the plugin gets initialized with.  This also means that in order to set global default options on the core jQuery UI widgets you need to now use $.ui.foo.prototype.options rather than $.ui.foo.defaults.  Also you no longer have to define getter methods like you did in 1.7.  In 1.8 any method that returns a value other then the plugin instance ( this ) or undefined it will assume it’s a getter and return that value.  This is sweet because now you can define a method that is a chainable setter and a getter.  The option method now returns the full options hash when called without any paramaters.

The _init method has been renamed to _create and a new _init method was created.  Yes go ahead and read that again I had to do a double take too.  Basically _create is now called only once when the plugin is first initialized and should contain all the logic to set up the widget.  The new _init method gets called every time the plugin gets called without passing a name of a method.  So when you do: $(‘.selector’).dialog({ height: 530 }); the first time both _create and _init get called. If you call that again later only _init will be called. This was created to fix a misunderstanding many people were having with the dialog plugin. Many people were calling $(‘.selector’).dialog(); and a dialog would open up, then later in the code they wold call the same thing and expect the dialog to popup. By having _init be called every time there is not a method provided it lets the dialog decide if it should open back up if it’s called again.

The _setData method got renamed to _setOption to fit better with what is actually happening.  Destroy now handles removing all widget-namespaced events for the plugin that are bound to this.element or this.widget().  Meaning name space your events and you don’t have to do the extra work of cleaning them up.

One very sweet thing is now you can create a new widget that extends an existing widget.  Just by doing something like: $.widget(‘myCustomAccordion’, $.ui.accordion, { //all my custom methods }); which makes it very easy to create a custom widget that can expand upon and use functionality that is already in another jQuery UI plugin. (The date picker still does not use the widget factory yet so it can not be extended like this).

There are a few other changes but these are the ones that perked my attention.  If you want more information check out the Upgrade Guide for 1.8 and check out Scott Gonzalez’s jQuery UI example code for migrating the widget factory from 1.7 to 1.8.  If you’re including the jQuery UI core in to your page and not using the jQuery UI Widget Factory to create your plugins you should start asking yourself WHY?



  • Pingback: jQuery UI 1.8 adds position, button, autocomplete, new widget factory, lighter core « jQuery UI Blog

  • Pingback: jQuery UI 1.8 adds position, button, autocomplete, new widget factory, lighter core : RefreshTheNet.com

  • ran

    If you’re including the jQuery UI core in to your page and not using the jQuery UI Widget Factory to create your plugins you should start asking yourself WHY?

  • lee

    $.widget(‘myCustomDatePicker’, $.ui.datepicker, { //all my custom methods }); doesn’t seem to work with jquery ui 1.8.6.

    I’m getting ‘c’ is not a constructor.
    Which I assume is a reference to $.ui.datepicker (which is also not a constructor).

    Does this mean that the datepicker is not compatible with the new widget factory?

  • http://www.petersendidit.com petersendidit

    @lee Sorry my example was bad because the datepicker doesn’t use the widget factory yet. It’s something that has been on the todo list for a while but just hasn’t happened yet for the jQuery UI team. I updated the example to use the accordion.
    $.widget(‘myCustomAccordion’, $.ui.accordion, {});

    • Lee

      Thanks for your prompt reply, I will have to investigate alternate approaches

      • Flying Space

        I just trouble with this problem. And I’m using dialog widget wiht 1.8.2.
        What I had do:
        import all the min.js dialog depends. Such like:

        And every time I get ‘c is not a consructor’.
        Then I import jquery.widget.js (not min file). Helped with FireBug, I found the argument in this function:
        $.widget = function( name, base, prototype );
        name is ‘draggable’.
        So, delete the import of draggable.js. It is working now.

  • Pingback: Wijmo UI Library builds on top of jQuery UI | appendTo - The Company Dedicated to jQuery

  • Srinivasamguttula

    sdfasdfasdfasf

  • Srinivasamguttula

    erqwerwerwerqwerwer

  • Srinivasamguttula

    hi how r you hari

  • Anonymous

    In this week’s issue of Grazia luxury brand Louis Vuitton exclusively reveal their glamorous spring/summer’12 Louis vuitton Sunglasses range by showing them on a new generation of ‘It’ girls and boys. It’s a veritable who’s who of the hippest people on planet earth right now, and if you like to stay in the know  you should consider that an extra good reason to hotfoot it to Louis vuitton Outlet – TODAY