jquery - jqueryuiダイアログにカスタムメソッドを追加します

Question

どうすれば次のようなことができますか？

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

そして、その方法がすべきことは、タイトルバーにアイコンを追加することです

編集1：私はこの解決策を試しました：メソッドは呼び出されますが、ダイアログオブジェクトにアクセスできません（おそらく私は何か間違ったことをしています）

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

Langdon によるこのソリューションと、Kevin B によるこのソリューションは、私の問題を解決する方法についての答えを与えてくれました

更新 2014-01-03

$.widget()についてのTILなので、ここに同じものの別の実装があります

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

まず、タイトル バーにアイコンを追加する場合は、そのダイアログ ボックスにクラスを適用し、CSS でスタイルを設定することをお勧めします。例：

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

それでもカスタム メソッドを追加したい場合は、ドキュメントに次のように記載されています。

作成イベントを init オプションとして処理するコールバック関数を提供します。

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

type:dialogcreate で作成イベントにバインドします。

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