javascript - jquery ui 拦截器中的多个 block ？

Question

我正在使用 this 插件。

不过好像用的是全​​局变量

$.blockUI();
$.unblockUI();

我可以拥有这个 block 的不同实例吗？

 $(document).ajaxStart(function (e)
 {
          $.blockUI(); //setup with a loading msg.
  });

 $(document).ajaxStop(function (e)
        {       
            $.unblockUI();

        })


var ajax = // ajax setup stuff


// 1.5 way of doing it
ajax .success(function (response)
            {
               var valid = checkIfValid(response); // check if valid
               if(valid)
               {
                      $.blockUI(); // setup with a save message
               }

            });

这就是我所拥有的。我把

$.blockUI();

为了保持简单，没有任何选项，但在我的真实代码中，我设置了消息和其他选项。

所以现在的问题是，一旦成功完成，就会调用 ajax 停止并取消阻止所有内容。我只想清除在 ajax 开始的那个，而不是有效的那个。

所以我需要不同的实例。

Answer 1

您可以通过在动态创建的 div 上调用 block 来完成您想要做的事情，然后简单地删除该 div 来自 DOM。例如:

$(document).ajaxStart(function (e) {
    /* Create a <div> that will contain the blocking elements: */
    $("<div id='ajax-block' style='position:fixed;width:100%;height:100%' />")
        .appendTo("body").block()
});

$(document).ajaxStop(function (e) {
    /* Remove the page block specific to the ajax request: */       
    $("#ajax-block").remove();
});

并对您要阻止的其他事件做类似的事情(只需更改动态附加的 div 中的 id 属性和对 remove() 的调用。