Question

基本上我通过定位手动显示和隐藏对话框，所以像'swfupload'一样工作（不要问嘿嘿，我使用的多上传闪光控制无法隐藏或Flash做一些时髦的东西......所以我使用定位显示/隐藏对话框。）

所以我将autoOpen：设置为true，这样当页面加载时不会被预先隐藏...而我只是使用jquery css用定位隐藏它，然后用display：none隐藏它的叠加层; （相对于css文件，因为我需要覆盖style =“”元素）... 现在我想隐藏它......

但Dialog自动创建的关闭按钮会自动调用其自己的关闭功能并设置'display：none'。我想覆盖它来做我的定位...

知道如何重新分配吗？我想在某种程度上解除对它的点击事件的绑定并重新分配它。我不知道最好的办法是什么。

感谢您的任何想法：）

Answer 1

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

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

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

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

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

Answer 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来自定义每行和进度条的上传，我将设置：）。

Answer 3

我用类似的东西替换了我的click函数以使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>

如何重新分配jQueryUI Dialog关闭按钮事件

3 个答案: