Можно ли отобразить модальное диалоговое окно jQuery с помощью метода .toggle ()? - PullRequest
Новая
       3

Можно ли отобразить модальное диалоговое окно jQuery с помощью метода .toggle ()?

3 голосов
/ 14 сентября 2010

Для типичного запроса AJAX к серверу я связываю события ajaxStart и ajaxStop с открытием и закрытием модального диалогового окна jQueryUI. Тем не менее, у меня есть другой вариант использования, где есть 1 или более div (обычно 5 разделов), которые содержат довольно большие таблицы, отображающие строки данных, извлеченных из базы данных. Я заметил значительную задержку при переключении свойства отображения CSS в разделе (показано ниже). 


<span id="SECTION_1_collapse">[+/-]</span><br />
<div id="SECTION_1">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>

<span id="SECTION_2_collapse">[+/-]</span><br />
<div id="SECTION_2">
<table>
<!-- Typically 100 cols x 250+ rows -->
</table>
</div>
...
...
...

Возможно ли это, или кто-нибудь когда-либо отображал модальное диалоговое окно jQueryUI при использовании метода .toggle ()? В этом случае элементы span с id = "SECTION_ _collapse" используются для свертывания элементов div с id = "SECTION_ ".

Спасибо заранее.

EDIT:

Да. Это возможно. Ответ был в обработчике .toggle (). Событие click все еще немного запаздывает, но в целом теряется меньше мертвого времени и, наконец, появляется некоторая обратная связь во время выполнения. Кэширование некоторых объектов jQuery также помогло.

Здесь приведен соответствующий раздел без всего кода сантехники, декларации диалогов и т. Д. 


$('#SECTION_1_collapse').click(function(){
  $('#wait_dialog').dialog("open");
  $('#SECTION_1').toggle('slow', function(){
    $('#wait_dialog').dialog("close");
  });
});

1 Ответ

2 голосов
/ 15 сентября 2010

Следующее будет .toggle () между показом таблицы и открытием / закрытием диалогового окна и скрытием таблицы.Задержка обеспечивается с помощью setTimeout () .

Этот переключатель чередует выполнение двух анонимных функций.Первый открывает диалоговое окно, показывает таблицу, затем после паузы закрывает диалоговое окно.Второй просто скрывает таблицу. 

  // Set up a variable to hold the dialog box:
var $dialog = $("<div>").html("I'm busy.").dialog({autoOpen: false,
                                                   // other options
                                                   // ...
                                                   title: 'Status'});

  // Initially have the table hidden.
$("#SECTION_1").hide();

  // Setup the toggle for the show and hide
$('#SECTION_1_collapse').toggle(function(){

      // Show the "loading..." dialog box
    $dialog.dialog("open"); 

      // Show the table... this might take a while
    $("#SECTION_1").show();

      // Close the dialog box after a while... experiment w the timing
    setTimeout(function() { $dialog.dialog("close"); }, 1500);

}, function() {

      // No need for fancy dialog boxes when we hide the big table
    $("#SECTION_1").hide();

});

jsFiddle пример

...