Comment réassigner jQueryUI Dialogue bouton de fermeture événement

Fondamentalement, je montre et cache le Dialog manuellement par le biais de positionnement de sorte que quelque chose comme 'swfupload' fonctionne (ne demandez pas hehe, le contrôle de flash multi-upload que je utilise ne peut pas être caché ou Flash quelque chose de génial ... donc j'utilise le positionnement pour montrer/cacher le dialogue).Comment réassigner jQueryUI Dialogue bouton de fermeture événement

Donc, je configure autoOpen: à true alors quand la page ne charge pas sa page ... et j'utilise simplement jquery css pour la masquer avec positionner puis cacher sa superposition avec display: none; (par rapport à un fichier css car j'ai besoin de remplacer les éléments style = "") et maintenant je veux le cacher ...

mais le bouton de fermeture automatique créé automatiquement appelle sa propre fonctionnalité de fermeture et définit 'display: none'. Je veux passer outre de ceci pour faire mon positionnement ...

Une idée comment le réaffecter? Je pensais à désengager l'événement click et à le réaffecter. Je ne sais pas quelle est la meilleure façon de le faire.

Merci pour toutes les idées :)

Source

2010-07-28 armyofda12mnkeys

Vous pouvez lier à l'événement proche et faites votre logique là-dedans:

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

Je n'ai pas testé ce code donc pas sûr si vous avez manuellement appeler pour fermer afin de cacher le dialogue. Si oui il suffit d'ajouter dans cette ligne:

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

Rappelez-vous aussi que cette fonction de fermeture sera appelée si le « X » dans le coin supérieur droit de la boîte de dialogue est cliqué aussi bien.

Source

2010-07-28 18:07:08 amurra

Cela m'a un peu aidé à me sur la bonne voie:

je l'ai fait: mon 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>

mon css:

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

mes 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 
});

Juste besoin d'ajouter setPostParams pour personnaliser le téléchargement pour chaque ligne et une barre de progression et je serai défini :).

Source

2010-07-28 19:30:59 armyofda12mnkeys

j'ai remplacé ma fonction de clic avec quelque chose comme pour ainsi obtenir setPostParams travail:

$('.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; 
    });

et mon événement de liaison pour réinitialiser le customparam:

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

et pour obtenir des progrès de travail, j'ai ajouté des gestionnaires .js et fileprogress.js sur ma page (à partir de leur exemple simpledemo). a ensuite changé les callbacks à leurs paramètres:

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

et a ajouté le code html pour obtenir que travailler:

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

Source

2010-07-28 20:13:42 armyofda12mnkeys

Comment réassigner jQueryUI Dialogue bouton de fermeture événement

Répondre

Questions connexes