Add custom method in jquery ui dialog

Question

How can I do something like:

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

And what this method should do is add an extra icon to the title

EDIT 1 : I tried this solution : the method is being called, but I cannot access the dialog object (maybe I am "something is wrong"

Answer 1

Ok, here 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 from Langdon as well as this one from Kevin B gave me an answer on how to solve 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>"); } }); 

Answer 2

First, if you add an icon to the title, I would suggest applying the class to this dialog box and styling it with CSS. Example:

 $( "#some_div" ).dialog({ dialogClass: "someClass" }); 

If you still want to add a custom method, here is what the documentation says:

Set a callback function to handle the create event as an init parameter.

 $( ".selector" ).dialog({ create: function(event, ui) { ... } }); 

Binding to a creation event by type: dialogcreate.

 $( ".selector" ).bind( "dialogcreate", function(event, ui) { ... });