代码之家 › 专栏 › 技术社区 › T.P.

是否可以使用.toggle()方法显示jquery模式对话框?

jquery-ui-dialog jquery

T.P. · 技术社区 · 14 年前

对于服务器的典型Ajax请求,我将AjaxStart和AjaxStop事件绑定到模式jQueryUI对话框的打开和关闭。但是,我还有另一个用例,其中有一个或多个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”的span元素_ _ collapse”用于折叠id=“section”的DIV元素。_ “。

提前谢谢。

编辑:

对。这是可能的。答案在.toggle()处理程序中。单击事件仍然有一点延迟,但总体来说,在执行过程中丢失的死区时间更少,最后还有一些反馈。缓存一些jquery对象也有帮助。

这里是没有所有管道代码、对话框声明等的相关部分。


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

1 回复 | 直到 12 年前

Peter Ajtai 14 年前

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

});