jquery - 将自定义方法添加到 jquery ui 对话框

Question

我该怎么做：

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

该方法应该做的是在标题栏中添加一个额外的图标

编辑1：我已经尝试过这个解决方案：该方法被调用但我无法访问对话框对象（也许我做错了什么）

Answer 1

首先，如果您要向标题栏添加一个图标，我建议您将一个类应用到该对话框并使用 CSS 对其进行样式设置。例子：

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

如果您仍想添加自定义方法，请参阅文档说明：

提供一个回调函数来处理 create 事件作为一个 init 选项。

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

按类型绑定到 create 事件：dialogcreate。

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

Answer 2

好的，这就是我所做的：

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

兰登的这个解决方案以及凯文 B 的这个解决方案给了我如何解决我的问题的答案

更新 2014-01-03

TIL 关于$.widget()，所以这是同一事物的另一种实现

$.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>");
    }
});