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

基本上我通过定位手动显示和隐藏对话框，所以类似'swfupload'的作品（不要问嘿，我使用的多上传Flash控件不能隐藏或Flash做东西时髦...所以我使用定位来显示/隐藏对话框）。如何重新分配jQueryUI对话框关闭按钮事件

所以我设置autoOpen：为真，所以当页面加载其不预先隐藏...我只是使用jQuery的CSS来隐藏它的定位，然后隐藏它的覆盖显示：无; （而不是css文件，因为我需要重写style =“”元素）... 现在我想隐藏它...

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

任何想法如何重新分配它？我正在想办法解除它上的点击事件并重新分配它。我不知道做什么是最好的方式。

感谢您的任何想法:)

2010-07-28 armyofda12mnkeys

您可以绑定到接近事件，做你的逻辑在那里：

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

我没有测试此代码，所以不知道你是否将有手动调用close以隐藏对话框。如果是的话只需添加这行：

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

还要记住，如果在对话框的右上角的“X”被点击，以及这种紧密的功能将被调用。

来源

2010-07-28 18:07:08 amurra

这有点让我走上正轨：

我做：我的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自定义上传的每一行和一个进度条，我会被设置:)。

来源

2010-07-28 19:30:59 armyofda12mnkeys

我代替我的点击功能的东西，像这样得到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; 
     });

，并获得进步的工作，我添加了处理程序.js和fileprogress.js到我的页面（从他们的简单例子中）。再变回调到它们的设置：

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>

来源

2010-07-28 20:13:42 armyofda12mnkeys

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

回答

相关问题