具有傳遞參數的Jquery UI對話框動態功能

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

};

因此，上面是新的函數定義。 事情簡化了很多。 讓我們來看一下更改：

• 為了清楚起見，該函數接受一個options對象而不是一堆args
• 模態html更簡單明了
• autoOpen: false刪除的autoOpen: false ，因為這可以防止在沒有open()調用的情況下open()模式
• 在您的示例中，button語法完全令人厭煩，修復了該問題，並將buttons對象委托給了調用，無論如何它們的語法還是很干凈的。
• 實際上將模式添加到html，但僅添加一次

現在是電話：

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

這里更清晰，更容易理解，主要是因為我們現在接受一個對象而不是一堆參數。 我發現的唯一問題是奇怪的fl幸，其中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';