如何重新分配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對話框關閉按鈕事件

回答

相關問題