0

我正在尝试构建一个通用函数，通过将自定义参数传递给 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


});
4

3 回答 3

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
  });

};

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

  • 为了清楚起见，函数接受一个选项对象而不是一堆参数
  • 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 中完全可以使用并且看起来不错，让我知道这里是否有任何令人困惑的地方，或者这是否不能完全解决您的问题:)

于 2013-10-09T19:05:05.937 回答
0

只是为了解释多行问题（不能有评论，但可以有答案）：

var bad = 'Invalid
syntax';

--

var good = 'Valid' +
'syntax';
于 2013-10-09T19:14:28.963 回答
0

我认为问题在于您将返回值传递给： $('#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，而不是值。

于 2013-10-09T18:34:21.080 回答