如何通过更改对话框选项来重用 jQuery UI 对话框

Question

我知道管理 JQuery.dialog 的正确方法是初始化：

$("#dialog").dialog({ autoOpen: false });

然后使用以下命令打开和关闭它：

$("#dialog").dialog("open");
$("#dialog").dialog("close");

但在某些情况下此模型并不完全适用。

例如，我使用对话框来创建新数据并编辑现有数据。在第一种情况下，我有一个取消和一个创建按钮，但在第二种情况下，我还有一个删除按钮。

我看到jquery.dialog中有一个销毁函数。问题是：在这些情况下，我应该销毁对话框而不是关闭它并创建一个新对话框吗？还有更好的选择吗？

Answer 1

jQuery UI 对话框允许您在初始化后操作大多数属性。您可以在对话框初始化后一段时间更改按钮；例如，当单击插入或更新按钮时。

// imported from http://jsfiddle.net/salman/VYAJw/9/

$(function() {
  $("#dialog1").dialog({
    autoOpen: false,
    modal: true
  });
  $("#button-insert").click(function() {
    $("#dialog1").dialog("option", "title", 'Insert Record');
    $("#dialog1").dialog("option", "buttons", [{
      text: "Insert",
      click: function() {
        alert("Record inserted");
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog1").dialog("open");
  });
  $("#button-update").click(function() {
    $("#dialog1").dialog("option", "title", 'Update Record');
    $("#dialog1").dialog("option", "buttons", [{
      text: "Update",
      click: function() {
        alert("Record updated");
        $(this).dialog("close");
      }
    }, {
      text: "Delete",
      click: function() {
        alert("Record deleted");
        $(this).dialog("close");
      }
    }, {
      text: "Cancel",
      click: function() {
        $(this).dialog("close");
      }
    }]);
    $("#dialog1").dialog("open");
  });
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");
body {
  font: medium sans-serif;
}

#dialog1 label,
#dialog1 input {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<div id="dialog1">
  <p>Fill out this form.</p>
  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" />
      <label for="email">Email</label>
      <input type="text" name="email" id="email" />
      <label for="password">Password</label>
      <input type="password" name="password" id="password" />
    </fieldset>
  </form>
</div>
<input type="button" id="button-insert" value="Insert" />
<input type="button" id="button-update" value="Update" />

另一种方法是直接在表单内添加按钮，并根据您是否显示插入或更新对话框来 .hide() 它们。

Answer 2

您可以在对话框打开之前设置不同的按钮作为选项，

例如

var  buttons = {
        "act_add": {
        "Insert": function() { ... },
        "Cancel": function() { ... }
        },
        "act_edit": {
        "Save": function() { ... },
        "Delete": function() { ... }
        }
      };

    $('.dialogOpenLink').click(function(){
      var $dlg = $('#dialog'),
      actType;

      //get an action name from data attribute of the clicked element
      actType = $(this).data('action'); //or get the action in way that best suits you

      $dlg.dialog( "option", "buttons", buttons[actType]);
      $dlg.dialog('open');
    });

Answer 3

要安全地删除对话框，您需要设置关闭选项，如下所示：

close: function() {
 return $(this).remove();
}