覆寫jQuery UI Dialog plugin

       最近有一個需求是要自訂jQuery UI Dialog plugin的行為，像是增加新的option和額外處理dialog出現時的 UI配置。研究一下知道要用Jquery UI的Widget Factory，讓jQuery UI Dialog覆寫他自己的function。

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {}):

再把要覆寫的function寫到最後的{}底下：

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
//覆寫open事件，先呼叫super再執行自訂的函式。把醜醜的jquery ui 叉叉圖案改成fontawesome
  open: function() {
    $.ui.dialog.prototype.open.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  },
  //覆寫建立title事件，改為自行定義的函式。增加title前的圖案
  _title: function(title) {
    if (!this.options.type || this.options.type == "info") {
      this.uiDialog.removeClass("error").addClass("info");
      if (!this.options.title) {
        title.html(" 提示");
      } else {
        title.html(" " + this.options.title);
      }
    } else {
      switch (this.options.type) { //可新增其他的類型
        case "error":
          this.uiDialog.removeClass("info").addClass("error");
          if (!this.options.title) {
            title.html(" 錯誤");
          } else {
            title.html(" " + this.options.title);
          }
          break;
      }
    }
  }
}));

其中在呼叫jQuery UI Dialog原來的父類別open函數撞牆了，按照網路上的討論是：

$.ui.dialog.prototype.open.apply(this, arguments);

但是這樣會進入一個無限的循環，然後就甚麼都動不了。必須在一開始先將這個父類別函數取出來，再進行呼叫 ：

var _dialogOpen = $.ui.dialog.prototype.open;
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  open: function() {
    _dialogOpen.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("");
  }
========略========
}

fiddle完成範例：