Question

我正在尝试构建一个通用函数，我可以通过将自定义参数传递给jQuery UI确认对话框从应用程序的任何位置调用它。我一直在寻找和尝试不同的东西，但以下是我想要使用的逻辑。我究竟做错了什么？非常感谢任何帮助。

这是功能：

function popDialog(h, w, deny_btn, confirm_btn, confirm_title, confirm_message, deny_action, confirm_action) {
  var newDialog = $('<div id="dialog-confirm">\
      <p>\
        <span class="ui-icon ui-icon-alert" style="float: left;margin: 0 7px 60px 0;"></span>\
        ' + confirm_message + '\
      </p>\
    </div>');
  newDialog.dialog({
    resizable: false,
    height: h,
    width: w,
    modal: true,
    autoOpen:false,
    title: confirm_title,
    buttons: [
      {text: deny_btn: click: function() {deny_action}},
      {text: confirm_btn: click: function() {confirm_action}}
    ]
  });

}

这是电话：

$("#cancel").click(function(e) {
    popDialog("210", // height
              "350", // width
              "No",  // deny_btn
              "Yes", // confirm_btn
              "Confirm Cancel", // confirm_title
              "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
              $('#dialog-confirm').dialog('close'), // deny_action
              window.location = '/some/location/index/<?= $class->getClassid() ?>'); //confirm_action


});

Answer 1

所以这有很多问题，我认为解决这些问题的最佳方法是小型重构。我将代码放入jsfiddle进行测试和修补，这就是出现的结果：

http://jsfiddle.net/BDh2z/1/

代码转载如下：

function popDialog(opts) {
  var newDialog = $('<div id="dialog-confirm"><p>'+opts.message+'</p></div>');

  if (!$('#dialog-confirm').length){ $('body').append(newDialog); }

  newDialog.dialog({
    resizable: false,
    modal: true,
    title: opts.title,
    height: opts.height,
    width: opts.width,
    buttons: opts.buttons
  });

};

所以上面是新的函数定义。事情简化了很多。让我们回顾一下这些变化：

函数接受选项对象而不是一堆args以保持清晰
modal html更简单明了
autoOpen: false已删除，因为这会阻止模式在没有open()调用的情况下打开
按钮语法在你的例子中被完全搞定，修复了它并将按钮对象委托给了调用，无论如何它们的语法都很干净。
实际上将模态添加到html中，但只添加一次

现在这是电话：

popDialog({
  width: 300,
  height: 150,
  title: 'testing modal',
  message: 'look it worked!',
  buttons: {
    cancel: function(){ $(this).dialog('close') },
    confirm: function(){ $(this).dialog('close') }
  }
});

这里更清洁，更容易理解，主要是因为我们现在接受一个对象而不是一堆args。我找到的唯一问题是一个奇怪的侥幸，其中jquery UI似乎正在折叠内容部分，所以我在jsfiddle的css中删除了一个丑陋的修复。这似乎是jquery UI的问题，但我会继续研究它。

这在jsfiddle中非常实用，看起来不错，让我知道这里有什么令人困惑的事情，或者这不能解决你的问题：）

Answer 2

我认为问题在于您传递的是返回值： $('#dialog-confirm').dialog('close') 和 window.location = '/some/location/index/<?= $class->getClassid() ?>' 你的popDialog函数。你想这样做：

功能：

buttons: [
  {text: deny_btn, click: deny_action},
  {text: confirm_btn, click: confirm_action}
]

呼叫：

$("#cancel").click(function(e) {
popDialog("210", // height
          "350", // width
          "No",  // deny_btn
          "Yes", // confirm_btn
          "Confirm Cancel", // confirm_title
          "Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
          function() { $('#dialog-confirm').dialog('close') }, // deny_action
          function() { window.location = '/some/location/index/<?= $class->getClassid() ?>') }; //confirm_action

}）;

这样你就可以将函数传递给popDialog，而不是值。

Answer 3

只是为了解释多线问题（不能带注释，但可以带答案）：

var bad = 'Invalid
syntax';

-

var good = 'Valid' +
'syntax';

带有传递参数的Jquery UI对话框动态函数

3 个答案: