Question

I am learning jQuery UI. I downloaded a code in which the author made a plugin. Code is working but i am confusing when author is calling a function. Here is the code

(function($){

    $.widget("ui.calculator", {

        options: {

            autoShow: true,
            currentSum: []

        }, //end of options

        _create: function(){..},
        destroy: function(){..},
        disable: function(){..},
        enable: function() {..},
        show: function() {
            var el = this.element.children(":first");
            if (el.is(":hidden")) {
                el.show();
            }
            this._trigger("show", null, this.element);
        }, //end of show()

         _addHoverState: function(){..}, 
         ..
    }); //end of $.widget()

})(jQuery);

and here it is calling the method

$(document).ready(function(){

    //To configure the autoShow option, we could use:
    //To add a handler for the custom show event we defined     
    $("#calc").calculator({
        autoShow: true,
        show: function(e, ui) {
            alert(e + ", " + $(ui).attr("id"));
        }
     });

 }); //end of document.ready(fn)

I am confusing in calling. I define show method just show: function(){} no argument i am passing. But when calling i am writing show: function(e, ui) {} passing two arguments to my show function. Why? Also i debug it in the firebug and i noticed that after show: function(e, ui) { line, it comes to _create() method of the plugin , but don’t go inside show method. Why?
Thanks

Answer 1

You have two entirely different shows. This one:

$("#calc").calculator({
    show: function(e, ui) { /* ... */ }
});

is a callback function that your calculator widget calls. Somewhere inside your widget you’d say:

this.options.show.call(some_sensible_this, e, ui);

to call it with whatever context (some_sensible_this) makes sense for your widget or if you don’t care about the context, you’d just say:

this.options.show(e, ui);

The show that you define with the widget factory:

show: function() {
    var el = this.element.children(":first");
    if (el.is(":hidden")) {
        el.show();
    }
    this._trigger("show", null, this.element);
}

will be a jQuery-UI style method on your widget that you’d call like this:

$('#calc').calculator('show');

That “message passing” interface is the usual way of calling methods in the jQuery-UI world; the standard behavior for a jQuery plugin is to return a jQuery object for chaining so it is difficult for a plugin to return a custom object with normal JavaScript methods on it. To have chaining and the ability to call custom methods at the same time, you call the plugin with a method name and arguments:

$(...).somePlugin('some_method', arg1, arg2, ...)

Look at any of the Methods tabs in the jQuery-UI documentation for examples; the accordion has things like this:

activate
.accordion( "activate" , index )

Activate a content part of the Accordion programmatically.

There’s also a third show in play here and that’s this one:

el.show();

That show is just the usual jQuery show function.