Question

对于服务器的典型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>
...
...
...

使用.toggle（）方法时是否有可能，或者有没有人显示过模态jQueryUI对话框？在这种情况下，id =“SECTION_ _collapse”的span元素用于折叠id =“SECTION _ ”的div元素。

提前致谢。

修改

是。有可能的。答案是在.toggle（）处理程序中。点击事件仍然有一点滞后，但总体而言，死亡时间减少了，最后在执行过程中得到了一些反馈。缓存一些jQuery对象也有帮助。

以下是没有所有管道代码，对话框声明等的相关部分。


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

Answer 1

以下将 .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();

});

是否可以使用.toggle（）方法显示jQuery模式对话框？

1 个答案:

的 jsFiddle example