Как переназначить событие закрытия кнопки jQueryUI Dialog - PullRequest
2 голосов
/ 28 июля 2010

В основном я показываю и скрываю диалог вручную с помощью позиционирования, так что работает что-то вроде 'swfupload' (не спрашивайте, хе-хе, управление мульти-загрузкой флэш-памяти, которое я использую, не может быть скрыто, или Flash делает что-то интересное ... поэтому я использую позиционированиечтобы показать / скрыть диалог).

Поэтому я установил autoOpen: в значение true, чтобы при загрузке страницы не было предопределено ... и я просто использую jquery css, чтобы скрыть его с позиционированием, а затем скрыть его наложение с отображением:никто;(по сравнению с файлом CSS, так как мне нужно переопределить элементы style = "") ... и теперь я хочу скрыть это ...

, но автоматически созданная кнопка закрытия Dialog автоматически вызывает свою собственную функцию закрытия иустанавливает 'display: none'.Я хочу переопределить это, чтобы сделать мое позиционирование ...

Есть идеи, как переназначить его?Я думал о том, чтобы как-то отменить привязку события click к нему и переназначить его.я не знаю, какой лучший способ действительно сделать это.

Спасибо за любые идеи:)

Ответы [ 3 ]

5 голосов
/ 28 июля 2010

Вы можете привязаться к событию close и выполнить там свою логику:

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

Я не тестировал этот код, поэтому не уверен, что вам придется вручную вызывать close, чтобы скрыть диалог,Если это так, просто добавьте в эту строку:

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

Также помните, что эта функция закрытия будет вызвана, если также будет нажата кнопка «X» в верхнем правом углу диалогового окна.

1 голос
/ 29 июля 2010

Я заменил свою функцию щелчка на что-то вроде этого, чтобы заставить 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 для сброса customparam:

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

и, чтобы добиться прогресса, я добавил на свою страницу handlers.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>
1 голос
/ 28 июля 2010

Это помогло мне встать на путь:

я сделал: мой 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, чтобы настроить загрузку для каждой строки и индикатор выполнения, и я установлю:).

...