覆寫ui dialog

藉由覆寫jquery ui dialog來達成額外的功能

by wales

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="dialog" style="display:none;">
  <div id="previewArea"></div>
</div>
<button id="openBtn">
  open error
</button>
<button id="openBtnInfo">
  open info
</button>

CSS

.error .ui-dialog-title {
  color: rgba(255, 0, 0, 0.47);
}

.info .ui-dialog-title {
  color: #003DFF;
}

.dialog-close-icon {
  position: relative;
  bottom: 2px;
}

JavaScript

//複寫jquery ui dialog
var _dialogOpen = $.ui.dialog.prototype.open;

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  //覆寫open事件，先呼叫super再執行自訂的函式。把醜醜的jquery ui 叉叉圖案改成fontawesome
  open: function() {
    _dialogOpen.apply(this, arguments);
    var titlBar = $(this.uiDialogTitlebar).find(".ui-dialog-titlebar-close");
    titlBar.empty().append("<i class='fa fa-times dialog-close-icon'></i>");
  },
  //覆寫建立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("<i class='fa fa-info-circle'></i>&nbsp;提示");
      } else {
        title.html("<i class='fa fa-info-circle'></i>&nbsp;" + this.options.title);
      }
    } else {
      switch (this.options.type) { //可新增其他的類型
        case "error":
          this.uiDialog.removeClass("info").addClass("error");
          if (!this.options.title) {
            title.html("<i class='fa fa-exclamation-triangle'></i>&nbsp;錯誤");
          } else {
            title.html("<i class='fa fa-exclamation-triangle'></i>&nbsp;" + this.options.title);
          }
          break;
      }
    }
  }
}));

$(document).ready(function() {

  $("#dialog").dialog({
    autoOpen: false,
    bgiframe: true,
    width: 400,
    height: 150,
    modal: true,
    closeText: "",
    draggable: true,
    resizable: false,
    overlay: {
      opacity: 0.7,
      background: "#FF8899"
    },
    buttons: {
      '確定': function() {
        $(this).dialog('close');
      }
    }
  });

  $("#openBtn").on("click", function() {
    $("#dialog").dialog("option", {
      type: "error",
      title: "錯誤"
    });
    $("#dialog").dialog('open');
  });

  $("#openBtnInfo").on("click", function() {
    $("#dialog").dialog("option", {
      type: "info",
      title: "訊息"
    });
    $("#dialog").dialog('open');
  });

});