如何重新分配 jQueryUI 对话框关闭按钮事件答案

【问题标题】：How to re-assign jQueryUI Dialog close button event如何重新分配 jQueryUI 对话框关闭按钮事件
【发布时间】：2010-07-28 16:31:59
【问题描述】：

基本上我是通过定位手动显示和隐藏对话框，所以像“swfupload”这样的东西可以工作（不要问呵呵，我使用的多上传 Flash 控件无法隐藏，或者 Flash 做了一些时髦的事情......所以我正在使用定位显示/隐藏对话框）。

所以我将 autoOpen: 设置为 true，因此当页面加载时它不会预先隐藏......我只是使用 jquery css 来隐藏它的定位，然后用 display:none 隐藏它的覆盖；（与 css 文件相比，因为我需要覆盖 style="" 元素）... 现在我想隐藏它...

但是 Dialog 自动创建的关闭按钮会自动调用它自己的关闭功能并设置“显示：无”。我想覆盖它来做我的定位......

知道如何重新分配它吗？我正在考虑以某种方式解除其上的点击事件并重新分配它。我不知道真正做到这一点的最佳方法是什么。

感谢您的任何想法:)

【问题讨论】：

标签： jquery jquery-ui jquery-ui-dialog

【解决方案1】：

您可以绑定到关闭事件并在那里执行您的逻辑：

$('#dialogID')
        .dialog({ 
            autoOpen: true
        }).bind('dialogclose', function(event, ui) { /* Do position logic here */ });

我没有测试此代码，因此不确定您是否必须手动调用 close 才能隐藏对话框。如果是这样，只需添加以下行：

$('#dialogID').dialog("close");

另外请记住，如果单击对话框右上角的“X”，也会调用此关闭函数。

【讨论】：

【解决方案2】：

这有点帮助我走上正轨：

我做了：我的html：

<body>  
  <div id="popup">
    Please upload the files you want associated with this payment below:
    <span id="dialog_file_upload_btn"></span>
  </div>

  <div>
    <a id="attach_1" href="#" class="upload_file">Attach</a>
    ....
    <a id="attach_2" href="#" class="upload_file">Attach</a>
    ...
    <a id="attach_3" href="#" class="upload_file">Attach</a>
  </div>
</body>

我的CSS：

  .ui-widget-overlay{ 
    display: none;  
  }
  .ui-dialog{ /*need to override style="" with jquery. this is just for reference */
    top: -5000px;  
  }

我的js：

function closeDialog(){
  $('.ui-dialog').css('top', -5000);
  $('.ui-widget-overlay').css('display','none');
}

var swfu;
var dialog;
var orig_top_css;

$(document).ready (function()
{


    dialog = $('#popup').dialog({
      closeOnEscape: false,
      modal: true,
      title: 'Upload File(s) related to this row'

    }).bind('dialogbeforeclose', function(event, ui) { 
      closeDialog();
      return false;
    });

    orig_top_css = $('.ui-dialog').css('top'); //get after dialog created, possibly see if oncomplete function. but this stores origial 'centered' value


    var settings =
    {
        flash_url: 'scripts/swfupload/Flash/swfupload.swf?'+Math.random(),
        ...

      upload_success_handler: function() { console.log ('success'); alert('You have successfully uploaded the file(s).'); dialog.dialog('close'); }, //catches close and doesnt really close in my dialogbeforeclose event
      upload_progress_handler: function(file, complete, total) { console.log ('progress' + file + " " + complete + " " + total); }

      ,prevent_swf_caching : true
      ,post_params: {payment_id: 'value1'}

    };

    swfu = new SWFUpload (settings);

    $('.upload_file').click(function() {                              
      orig_top_css_wopx = parseInt( orig_top_css.replace('px','') ,10);

      $('.ui-dialog').css('top', orig_top_css_wopx);
      $('.ui-widget-overlay').css('display','block');

      // prevent the default action, e.g., following a link
      return false;
    });


     $('.ui-dialog').css('top', -5000); //hide the dialog when the page loads, the popup also is hidden via css
});

只需要添加 setPostParams 来为每一行自定义上传和一个进度条，我就设置好了:)。

【讨论】：

【解决方案3】：

我用类似这样的东西替换了我的点击功能，以使 setPostParams 正常工作：

  $('.upload_file').click(function() {                              
      orig_top_css_wopx = parseInt( orig_top_css.replace('px','') ,10);

      $('.ui-dialog').css('top', orig_top_css_wopx);
      $('.ui-widget-overlay').css('display','block');


      var row_id = $(this).attr('id').replace('attach_','');          
      row_id = parseInt(row_id,10);          

      //alert(row_id);

      if(row_id && row_id > 0) {
        swfu.setPostParams({row_id_key: row_id}); //think this should dynamically set the post param
      } else { 
        alert('Error getting id'); 
      }

      // prevent the default action, e.g., following a link
      return false;
    });

和我的绑定事件来重置 customparam：

.bind('dialogbeforeclose', function(event, ui) { 
          closeDialog();
          swfu.setPostParams({});
          return false;
        });

为了取得进展，我将 handlers.js 和 fileprogress.js 添加到我的页面（来自他们的 simpledemo 示例）。然后将回调更改为它们的设置：

  custom_settings : {
    progressTarget : "fsUploadProgress",
    cancelButtonId : "btnCancel"
  },
  file_queued_handler : fileQueued,
  file_queue_error_handler : fileQueueError,
  file_dialog_complete_handler : fileDialogComplete,
  upload_start_handler : uploadStart,
  upload_progress_handler : uploadProgress,
  upload_error_handler : uploadError,
  upload_success_handler : uploadSuccess,
  upload_complete_handler : uploadComplete,
  queue_complete_handler : queueComplete    // Queue plugin event

并添加了 html 以使其正常工作：

<div id="popup">
  Please upload the files you want associated with this row below:
  <span id="dialog_file_upload_btn"></span>

  <input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
    <div class="fieldset flash" id="fsUploadProgress">
            <span class="legend">Upload Queue</span>
  </div>
    <div id="divStatus">0 Files Uploaded</div>
</div>

【讨论】：