代码之家 › 专栏 › 技术社区 › armyofda12mnkeys

如何重新分配jqueryui对话框关闭按钮事件

jquery-ui-dialog jquery-ui jquery

armyofda12mnkeys · 技术社区 · 14 年前

基本上,我是通过定位手动显示和隐藏对话框,这样类似于“swfupload”的功能(不要问呵呵,我使用的多上传flash控件不能隐藏或flash做了一些奇怪的事情…所以我使用定位来显示/隐藏对话框)。

所以我将autoopen设置为true,这样当页面加载时,它就不会被预先隐藏…我只是使用jquery css来隐藏它的位置,然后用display:none隐藏它的覆盖层;(与CSS文件相比,因为我需要重写style=“”elements)… 现在我想把它藏起来…

但是对话框自动创建的关闭按钮会自动调用自己的关闭功能并设置“显示:无”。我想覆盖这个做我的定位…

知道如何重新分配吗?我在考虑如何解开它上面的点击事件并重新分配它。我不知道真正做到这一点的最好方法是什么。

谢谢你的建议:)

3 回复 | 直到 14 年前

amurra 14 年前

您可以绑定到关闭事件并在其中执行逻辑:

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

我没有测试这段代码,所以不确定是否需要手动调用close来隐藏对话框。如果是这样,只需在这行中添加:

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

还请记住,如果单击对话框右上角的“x”,则也将调用此关闭函数。

armyofda12mnkeys 14 年前

这有助于我走上正轨:

我做到了: 我的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就可以为每一行和一个进度条定制上传,我将被设置为:)。

armyofda12mnkeys 14 年前

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

以及我的绑定事件以重置自定义参数:

.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>