ajax - 窗户上的微调器

Question

我有一个带有节点和子节点的树视图的窗口。当我复制子节点/节点并尝试将其粘贴到另一个节点时，窗口往往没有响应。粘贴完成后，它会刷新目标粘贴。此功能如下所示。

现在，如何在复制和粘贴之间显示微调器，以使带有树视图的窗口褪色并显示微调器，直到粘贴完成。任何帮助表示赞赏。

$.ajax({
    type: 'POST',
    url: '/test.aspx',
    data: data,
    success: function(result) {
        refresh(id);
        if (result != "SUCCESS") alert("Copy failed");
        else {
            alert("Successfully Copied");
        }
    }
});

Answer 1

您可以为此使用ajaxSendand ajaxComplete- 在发送时显示它，在完成时将其删除。

使用您的 CSS 创建一个带有微调器图形背景的元素，也许添加一些文本等...

$("#Loadstatus").bind("ajaxSend", function() {
    $(this).text(loadingMessage);
    $(this).show();
}).bind("ajaxComplete", function() {
    $(this).hide();
});

您可以在活动期间向目标树添加覆盖或淡入淡出等...

Answer 2

实现所需功能的一种方法是使用隐藏<div>标签。您需要 2 个 div 来完成此操作：

• 具有灰色和高透明度的 div 覆盖了加载时要变灰的区域。
• 包含旋转 gif 图像的 div。

现在，当您加载该部分时，打开两个 div 的 css 可见性，加载完成后，将可见性向后关闭。

~瞧

Answer 3

$("#divProgress").html("<img src='yourImg.gif' alt='loading..' />").fadeIn(100,function(){

   $.ajax({
     type: 'POST',
     url: '/test.aspx',
     data: data,
     success: function(result) {
        $("#divProgress").fadeOut(300,function(){
              refresh(id); // not sure what this does!!! ...??
              if (result != "SUCCESS") 
              {
                 alert("Some error!");
              }
              else
              {
                 alert("Successfully Copied");
              }
        });
     }
  });

});

假设divProgress您要在其中显示加载图像的 Div 和您的旋转图像名称是yourImg.gif. 您可能需要根据您的场景更改图像路径。