添加自定义方法jQuery用户界面对话框

Question

我怎么可以这样做：

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

而且什么方法应该做的是在标题栏添加一个额外的图标

编辑1：我我试过这个solution：方法被调用，但我不能访问对话框对象（也许我做错了什么）

Answer 1

好吧，这是我做的：

//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; 
} 

这solution由兰登，随着this one由凯文·乙给了我如何解决我的问题的答案

UPDATE 2014 -01-03

TIL约$.widget()，所以这里是另一个执行sa我的事情

$.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

首先，如果你要添加一个图标到标题栏，我会建议应用一个类到那个对话框和stylin用CSS代替它。例如：

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

如果你仍然想添加一个自定义的方法，这里的documentation说什么：

提供一个回调函数来处理作为初始化选项，创建事件。

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

按类型绑定到创建事件：dialogcreate。

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