こんにちは、YJです。

JQuery UIで他のウィジェットから新しいウィジェットを作成する為に下記のコードを書きます。

$.widget('namespace.myWidget', $.ui.dialog, {
  options : {},

  _create : function() {
  }

  _destroy : function() {
  }
});

下記に ウィジェットの使い方です。

// ウィジェットを作成する。
$('#dlg').myWidget({autoOpen: false});

// ダイヤログを開く。
$('#dlg').myWidget('open');

でも下記のコマンドがNGになる。

$('#dlg').dialog('open');

なぜ？ウィジェットファクタリーでウィジェットを継承しませんが、ウィジェットベースをコピーします。

本当の継承する為に下記のコードを書きます。

$.widget('namespace.myWidget', $.ui.dialog, {
    options : {},

    _create : function() {
        this.element.data('ui-dialog', this);
        this._super();
    },

    _destroy : function() {
        this.element.removeData('ui-dialog');

        this._super();
    }

});

大切事は「this.element.data(‘ui-dialog’, this);」です。

これから下記のコードが正しくなる。

$('#dlg').dialog('open');
$('#dlg').myWidget('close');

以上です。