Question

我有一个jQuery UI对话框，可以获取一行文本。如果此文本未包含在localStorage字典中，我将其插入到字典中。如果存在，我想让用户不要覆盖“ok”处理程序中的现有条目。

因为除非明确删除（AFAICT），否则jQuery UI对话框是有状态的，并且会持续存在于多个调用中，我没有看到明确的路径来呈现“你确定你想要破坏你之前的条目吗？”警惕而不诉诸......呃......警觉。

这个问题简明扼要地说：你能在jQuery UI对话框中创建一个确认框吗？

感谢。

Answer 1

我没有使用过jQuery UI Dialog，但你总是可以创建自己的html元素并随心所欲地做任何事情，包括在jQuery对话框之上分层。

Answer 2

我猜你可以使用google搜索这些链接：

无论如何都有它并取笑：

JQuery Dialogs
Jquery Confirmation

干杯!!!

Answer 3

好吧，事实证明我发现处理此问题的最佳方法是使用闭包。像这样（伪代码）：

getThingieName: handler(function() {
  var $dialog;
  $dialog = $('<div id="thingie-name-dialog" class="ui-widget"></div>').html("<p>Enter a name for this thingie</p>\n<input type=\"text\" id=\"dlg-thingie-name\" style=\"width: 80%\" />").dialog({
    autoOpen: false
  }, {
    title: 'enter a name',
    modal: true,
    buttons: {
      Add: function() {
        var value = $('#dlg-thingie-name').val();
        $(this).dialog('close');
        $('#thingie-name-dialog').remove();
        return handler(value);                  // <= closure to handle the onAdd
      },
      Cancel: function() {
        $(this).dialog('close');
        return $('#thingie-name-dialog').remove();
      }
    }
  });
  return $dialog.dialog('open');
}),

getConfirmation: function(message, handler) {
  var $dialog;
  $dialog = $('<div id="confirmation-dialog" class="ui-widget"></div>').html("<p>" + message + "</p>").dialog({
    autoOpen: false
  }, {
    title: 'confirm overwrite',
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog('close');
        $('#confirmatio-dialog').remove();
        return handler(true);               // <= closure to handle onOk
      },
      Cancel: function() {
        $(this).dialog('close');
        $('#Thingie-name-dialog').remove();
        return handler(false);              // <= closure to handle onCancel
      }
    }
  });
  return $dialog.dialog('open');
}

// Calling sequence
Snippets.getSnippetName(function(value) {
  if (value == null) return false;
  if (localStorage.getItem(value)) {
    getConfirmation("This thingie, " + value + ", already exists. Overwrite?", function(response) {
      if (response) return localStorage.setItem(value, snippet);
    });
  } else {
    localStorage.setItem(value, snippet);
  }
}

这可能不是最佳代码，但它确实通过将对象嵌入处理程序中来触发对话框依赖于按钮推送。

带有确认的jQuery UI对话框

3 个答案: