An extensive tutorial/documentation on jQuery UI widget

Question

Asking for forgiveness if this is somewhat answered in anywhere else (a link to that will be very helpful)

I am unable to find a good tutorial or documentation on $.widget. The UI docs is somewhat limited on this. What I am looking for is a documentation on how to define events efficiently and call in custom widgets. How to intercept the events from a base widget. What are best practices, and recommended design patterns.

Sadly (and surprisingly) the only documentation I found on this is http://msdn.microsoft.com/en-us/library/hh404085.aspx.

I am building (or trying to build) a custom widget (ui.dialog as base) that will host a slickgrid in it and some buttons to navigate the data (slickgrid default ones are not good enough as the data source is heavily ajax driven).

So far, my progress is very good and I started admiring the power of $.widget. Since I am on a learning curve here, I would appreciate some expert advice and guidelines on best practices.

Thanks in advance

Answer 1

Here is a good introduction on how to build a widget with jQuery-UI

http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-plugin/

as well as

http://ajpiano.com/widgetfactory

They also list their references which directly links you to more tutorials and documentation on the matter.

The basics are that you will define a widget name

$.widget('ui.widget_name', {
    options: {
        overrideableOption: true,
    },
    _create: function () {
        //fires when you first create the widget, and can be used as a callback for the 'create' event
    },
    _additional_events.....
});

then you can call your widget by using the naming convention after the ui namespace

$(element).widget_name({overrideableOption: false});

Hope that can get you started.