Question

How can I do something like:

$("#some_div").dialog("doSomething");

And what that method should do is to add an extra icon in the titlebar

EDIT 1: I’ve tried this solution: the method gets called but I can’t access the dialog object (maybe I’m doing something wrong)

Answer 1

Ok, this is what I did:

//in a separate js file
$.ui.dialog.prototype.showExtraButton = function()
{
    this.uiDialogTitlebar.append("<a role='button' class='ui-dialog-titlebar-icon ui-dialog-titlebar-icon-extra'><span class='ui-icon'></span></a>");
}

//call it this way
$("#some_div").dialog("showExtraButton");

//css
.ui-dialog-titlebar-icon {
  position: absolute;
  right: 25px;
}

.ui-dialog-titlebar-icon-extra span
{
    display: block;
    background-image: url(../path_to_img/button_extra.png)!important;
}

This solution by Langdon, along with this one by Kevin B gave me the answer on how to resolve my problem

UPDATE 2014-01-03

TIL about $.widget(), so here is another implementation of the same thing

$.widget("ui.dialog", $.ui.dialog,
{
    showExtraButton: function()
    {
        this.uiDialogTitlebar.append("<a role='button' class='ui-dialog-titlebar-icon ui-dialog-titlebar-icon-extra'><span class='ui-icon'></span></a>");
    }
});